Что такое 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 сообщает, что они блокируют загрузку контента. Мы идем, откладываем их загрузку в подвал, но при этом у пользователя почему-то визуально долгое представление о загрузке. Он не может начать работать с элементами, потому что полезная часть не загрузилась, или из-за задержки в браузере (который занят исполнением кода).

Поэтому спасает только (и только!) чистка кода. Это удаление плагинов, исключение ресурсов из шаблона.
к содержанию ↑

Почему я использую GTMetrix в работе

Сервис GTMetrix показывает фактическое время, историю и очередность загрузки всех элементов, как в браузере (waterfall). Предлагаемые им рекомендации всегда имеют значение, и ими просто удобно пользоваться.

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

PageSpeed выдает данные из пользовательского отчета (CRUX), они требуют более подробного анализа и часто больший объем для исполнения. И требования не всегда согласуются с вариантом развития и наполнения сайта.

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

Оптимизация сайта на WordPress для PageSpeed Insights включает много техник: чистка и профилирование кода, сжатие, конкатенация скриптов и стилей, откладывание загрузки, ленивая загрузка, использование прогрессивных форматов изображений, подключение прокси CDN, и другие. О каждой из них я написал отдельные статьи, которые вы можете посмотреть в категории Скорость загрузки.

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

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

avatar
  Подписаться  
Уведомление о