Что такое PageSpeed и как он работает

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

PageSpeed выдает два типа данных: лабораторные и полевые.

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

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

В начале страницы PageSpeed Insights выдает общий счет производительности запуская инструмент lighthouse, который собирает и анализирует полевые данные.

Отчет Lighhouse можно смотреть в инструментах разработчика в браузере, в консоли, или просто установив расширение для Chrome.

Пример отчета для сайта wp-best.ru. Лучше его делать в инкогнито режиме, потому что может конфликтовать с другими установленными расширениями и выдать некорректные данные.

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

Когда PageSpeed Insigths анализирует адрес страницы, он также анализирует полевые данные из отчетов CrUX (Chrome User Experience Report) — реального пользовательского взаимодействия.

Метрики производительности, ориентированные на пользователя

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

Поэтому в реальности скорость загрузки больше похожа на график количества обращений (пользователей) к шкале времени загрузки.

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

Поэтому, производительность это не только время/скорость загрузки, но то, как пользователь воспринимает её.

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

Первая отрисовка (FP/FCP/FMP)

First Paint — время, когда браузер начинает производить любую отрисовку на экране.

First Contentful Paint — начало появления содержания DOM элементов.

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

First Meaningful Paint — первая полезная загрузка. Эту метрику сложнее определить, но владельцы сайтов обычно сами понимают, какие элементы (первостепенные элементы) нужно представить в первую очередь. Благодаря им, пользователь вообще может не заметить отложенную загрузку остальной части страницы.

Длительное исполнение

Браузер исполняет JavaScript в одном потоке, а все генерируемые пользователем события ставятся в очередь.

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

Время до взаимодействия (TTI/FID)

 Time to interactive (TTI) — время, когда страница визуально отобразилась и способна отвечать на действия пользователя.

First Input Delay (FID) — время между началом выполнения пользователем каких-то действий и готовностью браузера на них отвечать.

Приложение может быть не готово отвечать по двум причинам:

  • необходимые javascript компоненты еще не загрузились;
  • длительное исполнение кода блокирует основной поток.

Как PageSpeed классифицирует страницы по скорости

PSI делит полевые данные на три группы по производительности: быстрая, средняя, низкая.

Быстрая производительность — FCP [0, 1000ms],  FID [0, 50ms]

Средняя — FCP[1000ms, 2500ms], FID [50ms, 250ms] 

Низкая —  FCP [2500ms], FID [250ms]

Распределение FCP/FID по шкале отмечено также цветами: зеленый (быстрая), оранжевый (средняя), красный (низкая). Метрики показывают производительность страниц из анонимных отчетов пользователей (CRUX) за 30 дней.

Как улучшить метрики FP, FCP, FMP, TTI, FID

Уменьшить время до FCP (первой отрисовки контента) можно за счет удаления/откладывания загрузки скриптов и стилей. В идеале, включить в раздел <head> только код, который необходим для FMP (первой полезной отрисовки).

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

 Чтобы устранить задержку во взаимодействии (TTI, FID), мы также должны максимально сократить исполняемый код на странице, потому что браузер обрабатывает его в очереди.

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

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

Оптимизация WordPress для PageSpeed

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

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

Автооптимизатор (типа Autoptimize), сборщик скриптов и стилей с возможностью откладывания загрузки, тоже может иногда дать только частично удовлетворительный результат.

Любой функциональный современный шаблон, с конструктором, слайдером, десятком активных плагинов, может подключать на страницу сотни килобайт скриптов и стилей!

Как можно максимально увеличить результат, обращая внимание на самые значимые параметры в расчете?

Для этого нужно знать формулу. В интернете мало информации по этой теме, но мне удалось найти очень толковую и подробную статью о расчете и составлении оценки PageSpeed Insights.

Рекомендую прочитать — The Science Behind Google PageSpeed Insights: How It Works & What It Actually Measures.

Расчет показателя PSI на примере блога

Сайт wp-best работает на быстрой и легкой теме Astra, без дополнительных скриптов, чатов и т.д. Поэтому мне повезло получить высокий показатель > 85.

В формировании показателя участвуют 5 важных метрик. Счет берем по соответствию значений из таблицы Lighthouse v3 Score Weighting.

ПоказательВесЗначениеСчетВес * Счет
Time to Interactive (TTI)53,990450
Speed Index43,990360
First Contentful Paint (FCP)32,580240
First CPU Idle23,590180
First Meaningful Paint (FMP)12,98080
Итого:151310

1310 / 15 = 87,3333333 (с округлением 87)

Более подробную информацию о расчете и о параметрах можно брать из документации Lighthouse. Scoring.

В таблице (на вкладке Score calculator) можно подставлять свои предполагаемые значения и наблюдать изменения показателя.

Вооружен знаниями, значит готов делать соответствующие изменения.

1
Оставить комментарий

avatar
1 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
1 Авторы комментариев
Александр Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Александр
Гость

Спасибо за статью. Очень полезная!

Пролистать наверх