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

Главная » Оптимизация WordPress для Google PageSpeed

Что такое 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 Авторы комментариев
Александр Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Александр
Гость

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

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