Новый алгоритм PageSpeed: как повысить показатель PageSpeed — наш опыт и советы

Google PageSpeed — это показатель скорости сайта, которую Google оценивает по специальному алгоритму. Этот показатель — один из факторов ранжирования сайтов в поиске. В 2018 году Google поменял работу алгоритма, после чего большинство популярных сайтов втрое просели по скорости.

Рассказываем о своем опыте того, что мы сделали, чтобы вернуть свои прежние скоростные позиции, и как повысить скорость загрузки сайта.

как оптимизировать pagespeed

Как проверить PageSpeed сайта и как алгоритм PageSpeed поменялся в 2018 году

PageSpeed сайта можно определить с помощью сервиса Google PageSpeed Insights. Он не только показывает скорость загрузки страниц, но и помогает улучшить этот параметр с помощью подробных рекомендаций.

Сервис начисляет баллы за скорость сайта в десктопной и мобильной версиях. Максимальное количество — 100.

Чтобы проверить скорость, нужно зайти на страницу сервиса и ввести имя сайта:

PageSpeed сайта Facebook
Скорость сайта Facebook в десктопной версии

До изменений в работе алгоритма баллы начислялись за соблюдение правил и выполнение задач:

Предыдущий алгоритм работы PageSpeed Insights
PageSpeed Insights говорит, что сайт — молодец: не использует редиректы, CSS в контенте без прокрутки, — подчиняется правилам. Поэтому сайт получает 100 баллов

С 2018 года алгоритм PageSpeed ориентируется только на саму скорость сайта — за какое время на странице появляется первый контент и его основная часть, сколько секунд нужно для полноценного взаимодействия пользователя с ресурсом, общий индекс скорости и другие характеристики.

Загрузка страницы оценивается по нескольким характеристикам:

  • через сколько времени после начала загрузки появляется первый контент,
  • когда пользователь может уже кликать куда-нибудь,
  • насколько все тормозит, пока прогружается,
  • когда загружается вся страница целиком.

Эти характеристики сравниваются с показателями лучших сайтов и превращаются в баллы — точной процедуры оценки никто не знает.

До изменений в алгоритме наш PageSpeed в десктопной версии был в районе 90 баллов из 100 — это так называемая зеленая зона. После обновления алгоритма мы попали в красную зону — упали с 90 до опасных 33 баллов в десктопной версии и с 40 до 23 в мобильной.

Поэтому приняли решение срочно оптимизировать страницы, чтобы вернуть былую славу.

Что мы сделали, чтобы повысить показатель PageSpeed

Мы провели много экспериментов для того, чтобы понять, что влияет на скорость, и как сильно.

Для тестов взяли несколько страниц — в частности, нашу страницу виртуального хостинга.

Мы поняли, что если будем рассматривать каждый фактор влияния на скорость в отдельности, то не увидим общей картины. Это потому, что отдельный фактор, конечно, влияет на скорость, но незначительно, а все они в сумме — вполне.

Поэтому мы создали страницы, на которых воспроизводили разные комбинации оптимизаций. Так мы смогли найти наиболее успешный для нас вариант.

С чем мы экспериментировали для ускорения загрузки сайта:

  • вместо мгновенной загрузки чата делали отложенную на 6 секунд загрузку,
  • подключали параметр lazyload, чтобы изображения подгружались отложенно,
  • подключали не общий файл CSS, а только его кусочек для нужной страницы,
  • отключали Google Tag Manager с кучей JavaScript.

После каждого эксперимента мы замеряли скорость страницы и снова тестировали новые гипотезы.

В результате поняли, что самая действенная комбинация — это подключать кусочек CSS для нужной страницы, делать отложенную на 6 секунд загрузку чата и отключать Google Tag Manager. Таким образом, наша скорость в десктопной версии выросла с 33 до 59 баллов, в мобильной — с 23 до 38.

После первых успешных экспериментов продолжили экспериментировать с кодом. На всех страницах нашего сайта есть кусочек JavaScript, который отвечает за показ экспериментального контента для страницы. Мы решили сделать задержку на показ контента для экспериментов не в 4 секунды, а в одну.

После уменьшения времени до одной секунды ситуация улучшилась. Кроме этого мы оставили общий JavaScript, который подключался после загрузки HTML-файла. В итоге PageSpeed в десктопной версии вырос до 92 баллов, а в мобильной — до 42:

PageSpeed на странице доменов после оптимизации
Скорость сайта HOSTiQ после оптимизации под обновленный алгоритм

Работу по оптимизации PageSpeed мы теперь проводим регулярно — смотрим, что влияет на скорость загрузки сайта, и следим за показателями.

Мы также заметили, что баллы PageSpeed могут колебаться в пределах даже одного дня. При эксперименте с одним и тем же сайтом в течение 10 минут количество баллов за скорость колебалось — сначала сервис выдавал 34 балла, через 10 минут — 43. Это зависит от работы 3G/4G сетей, используемых компанией-аналитиком Lighthouse для предоставления данных, варьируемого времени ответа сервера и базы данных для загрузки ресурсов страниц — иконок, изображений, шрифтов, CSS.

Советы, как ускорить загрузку сайта и улучшить показатель PageSpeed

  • Проверяйте разные комбинации факторов на одной странице, чтобы понять, что лучше всего оптимизирует сайт — один фактор вряд ли значительно влияет на скорость.
  • PageSpeed Insights дает подсказки, как увеличить скорость загрузки сайта. Он говорит, где что проседает, и что нужно сделать, чтобы оптимизировать это:

Подсказки PageSpeed Insights по оптимизации страницы
Пример советов по оптимизации загрузки сайта Facebook

    • Обращайте внимание также на скорость сайта в мобильной версии — Google Page Insights дает аудит по десктопной и мобильной версиям. Оптимизированные сайты под мобильную версию становятся сегодня все важнее для поисковиков.
    • Первыми проверяйте изображения — часто проблема в том, что они не оптимизированы. Топ-замечаний Google — загружайте картинки в новых форматах, правильно вставляйте код картинок. Google также выпустила экспериментальное приложение Squoosh, которое помогает сжимать изображения.
    • Используйте формат JPEG для изображений — он сжимается без потери качества.
    • Загружайте фоновые картинки через внешний, или сторонний CSS.
    • Минимизируйте пробелы и теги комментариев — каждая буква или пробел занимает один байт HTML-кода.
    • Критично важно оптимизировать или как можно меньше использовать Javascript — в экспериментах компании Milestone после удаления внутреннего Javascript с сайта баллы за Pagespeed выросли с 49 до 87. Также не стоит использовать сторонний Javascript.
    • Удаляйте ненужный CSS. Когда вы используете преднастроенные темы и плагины WordPress, в них обычно содержится больше кода, чем нужно. Когда PageSpeed Insights проанализирует страницу, нажмите на «Сократить HTML» — «Посмотреть содержание» — он подскажет, как ускорить загрузку страниц.
    • Оптимизируйте базы данных — по мере роста проекта базы данных растут и работают медленнее. Поэтому нужно регулярно избавляться от спама, ненужных таблиц. Удалить ненужные данные можно вручную через phpMyAdmin в разделе SQL или с помощью сторонних плагинов.
    • Уменьшайте количество редиректов и удаляйте лишние плагины.
    • Настройте кэширование на стороне браузера. Для этого в файле .htaccess пропишите директивы: Expires — отвечает за актуальность кэша: можно установить срок от недели до года. Last-Modified и ETag — устанавливают в кэше уникальный id для каждого url.
    • Попробуйте использовать инструменты Google для оптимизации загрузки.
    • После внедренных улучшений регулярно мониторьте PageSpeed сайта и проводите работы по его оптимизации. А сервис PageSpeed Insights всегда поможет вам с этим — подскажет, как ускорить работу сайта.

Валерия

Маркетолог HOSTiQ и альтер-эго кота Хвостика. Ест за себя и за Хвостика.
Понравилась статья? Оставь свой голос!