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

Отчёт важен, поскольку скорость загрузки страниц учитывается при ранжировании в результатах поиска: при прочих равных параметрах, быстрые сайты будут показаны выше медленных.

12 ноября Google полностью обновил свой продукт PageSpeed Insights: серьёзно изменились алгоритмы выставления оценок. Самое главное теперь с точки зрения оценки — скорость работы сайта для пользователя. Важна не скорость ответа сервера, а время, через которое пользователь может начать взаимодействовать со страницей.

Если вам не интересны детали и хочется сразу понять, что делать дальше — листайте сразу в конец страницы.

Новые параметры оценки

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

В каждом случае, чем меньше значение параметра — тем лучше для вашего сайта.

1. Время загрузки для взаимодействия (Time to Interactive)

Эта метрика учитывает время, спустя которое страница полностью готова для взаимодействия со стороны пользователя. При этом учитываются следующие параметры:

1. Страница содержит отрисованный в браузере полезный контент;
2. Зарегистрированы обработчики событий на элементах страницы;
3. Страница реагирует на действия пользователя быстрее, чем за 50 мс.

Некоторые сайты оптимизируют контент таким образом, чтобы он быстро отобразился, но если такой контент не отвечает на действия пользователя, он бесполезен.

2. Индекс скорости загрузки (Speed Index)

В этом параметре учитывается время, когда страница в браузере перестаёт изменяться (то есть вся вёрстка страницы загружена и отрисована). Для проверки используется покадровое сравнение внешнего вида страницы, примерно вот так:

3. Время загрузки первого контента (First Contentful Paint)

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

Чтобы добиться хорошего значения показателя, есть рекомендации:

1. Минимизируйте количество блокирующих отрисовку загрузок внешних скриптов и стилей;
2. Включайте кэширование ресурсов в браузере;
3. Сжимайте ресурсы — это касается скриптов, стилей, HTML-кода и графики;
4. Оптимизируйте загрузку JavaScript-а таким образом, чтобы он не приводил к модификации структуры страницы в процессе загрузки.

4. Время загрузки достаточной части контента (First Meaningful Paint)

Этот параметр показывает время, по истечении которого становится виден основной контент страницы. Как сказано в документации, метрика отмечает время, когда посетитель сайта «чувствует», что основной контент сайта загружен.

5. Время окончания работы ЦП (First CPU Idle)

Этот параметр указывает на время, когда процессор пользовательского компьютера практически завершил отрисовку страницы и находится в ожидании пользовательского ввода. При этом:

• Не все элементы страницы могут быть полностью интерактивны;
• Страница реагирует на действия пользователя за адекватное время.

6. Приблизительное время задержки при вводе (Estimated Input Latency)

Данная характеристика показывает время в миллисекундах, которое занимает реакция приложения на действия пользователя в течение самых занятых 5 секунд загрузки страницы. Речь идёт в частности о времени выполнения всех JavaScript-обработчиков, а также о времени на итоговую отрисовку результата действия.

Если время реакции превышает 50 мс, пользователям может показаться, что ваше приложение работает с задержками.

Рекомендации по улучшению показателей

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

Задайте правила эффективного использования кеша для статических объектов

Под статические объекты попадает большинство внешних скриптов, которые вы ставите на сайт: Яндекс.Метрика, Google Tag Manager, Google Analytics, онлайн-чаты, скрипты обратного звонка, пиксели ретаргетинга и так далее.

Производители всех этих скриптов стараются сделать время кэширования своих скриптов минимальным, для того чтобы иметь возможность быстро обновлять код таких скриптов. Скрипт не кэшируется в браузере и загружается заново при каждом новом посещении страницы.

Фактически теперь владелец сайта должен с умом подходить к вопросу о том, какие скрипты размещать на своём сайте и не вставлять на сайт всё подряд.

Используйте современные форматы изображений

Рекомендация гласит, что вместо форматов JPEG и PNG, которые в основном используются на сайтах, следует использовать более современные JPEG 2000 (JP2), JPEG XR и WebP.

Ситуация в данный момент такова, что:

• JPEG 2000 поддерживается в Safari и iOS Safari
• JPEG XR поддерживается только в IE 10+ и Edge
• WebP — практически все Chrome и Opera, Firefox 65+, Edge 18+, Android Browser

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

Сложность внедрения: высокая.

Настройте подходящий размер изображений

Логичное требование: если на сайт ваше изображение выводится в совсем небольшом размере, необходимо, чтобы исходный файл соответствовал этим размерам.

Сложность внедрения: низкая.

Устраните ресурсы, блокирующие отображение

CSS и JavaScript-файлы, подключаемые в шапке сайта, препятствуют загрузке контента страницы. Необходимо настроить загрузку только необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов.

Сложность внедрения: средняя.

Уменьшите размер кода HTML, CSS, JS / Используйте сжатие ресурсов

Также логичное требование: чем меньше исходный код ресурсов передаётся по сети, тем быстрее загружается ваш сайт тем выше оценка.

Сложность внедрения: средняя.

Настройте показ всего текста во время загрузки веб-шрифтов

Если вы используете на сайте нестандартные шрифты, обеспечьте отображение текстов ещё до полной загрузки файлов шрифта.

Сложность внедрения: средняя.

Сократите время выполнения кода JavaScript / Минимизируйте работу в основном потоке

Разработчику сайта следует добиться оптимальности выполнения JavaScript-кода сайта. Для среднего размера сайтов это не самая простая работа, поскольку она требует последовательного анализа и рефакторинга кода.

Сложность внедрения: высокая.

Что делать прямо сейчас?

В первую очередь — не паниковать. Действительно у ряда сайтов отличные показатели скатились до состояния «ниже среднего», однако бросаться всё переделывать прямо сейчас — рано. Новая версия только опубликована, часто глючит, работает нестабильно, в неё, вероятно, ещё будут вноситься некоторые изменения.

Проверить показатели своего сайта. Показатели многих сайтов серьёзно поменялись: даже если у вас всё было хорошо, перепроверьте свой сайт.

Запланировать последовательное улучшение работы сайта. Не пытайтесь улучшать всё подряд, начинайте с тех страниц, куда больше всего приходят к вам из поиска: товарная карточка, главная страница, категория товаров в каталоге.

Необходимо думать не столько о производительности сервера или CMS, сколько о скорости отрисовки страницы в браузере и реакции сайта на действия пользователя. Это неминуемо должно приводить вас к упрощению структуры страницы.