Как провести аудит страницы при помощи PageSpeed Insights и ускорить ее

Пошаговый гайд по работе с бесплатным инструментом Google для вебмастеров и SEO-специалистов.

В сентябре этого года Google завершил апдейт под названием Page Experience, важными составляющими которого стал комплекс сигналов Core Web Vitals. Отныне официально скорость загрузки страницы и удобство взаимодействия с ней пользователя являются сигналами ранжирования.

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

Page Speed Insights (PSI) — бесплатный инструмент Google, который анализирует скорость загрузки веб-страницы на мобильных устройствах и компьютерах и дает рекомендации по ее ускорению.

PSI оценивает скорость загрузки на основании таких данных:

• Собственные данные, которые инструмент получает при имитации загрузки страницы. Имитация позволяет оценить реальную скорость загрузки и обнаружить проблемы, которые ее снижают. Недостаток — эксперимент проводится в управляемых условиях. Поэтому можно упустить факторы, негативно влияющие на процесс загрузки страницы реальным пользователем.
• Скорость загрузки страницы у реальных пользователей. Данные берутся из отчета об удобстве пользования браузером Chrome. Этот источник информации позволяет объективно оценить скорость загрузки страницы. Недостаток — доступ к ограниченному набору данных. Эксперимент с имитацией страницы позволяет получить больше данных о скорости сайта/веб-страницы.

Инструмент оценивает скорость загрузки страницы по 100-бальной шкале. Оценка формируется на основании результатов, полученных по данным наблюдений за последние 28 дней. Все загрузки веб-страницы принимаются за 100%. Далее инструмент отслеживает, какой процент загрузок страницы прошел быстро, какой со средней скоростью, а какой с низкой.

Например, в отчете обязательно оценивается два показателя — первая отрисовка контента (FCP) и первая задержка ввода (FID). Данные берутся из отчета об удобстве пользования браузером Chrome.

Критерии оценки:

• Страница загружается медленно. FCP — более 2500 мс, FID — более 250 мс.
• Средняя скорость загрузки. FCP — от 1000 до 2500 мс, FID — от 100 до 250 мс.
• Низкая скорость загрузки. FCP — от 0 до 1000 мс, FID — от 0 до 50 мс.

На основании анализа этих и других результатов инструмент дает общую оценку скорости работы страницы. Вот шкала оценки:

• 0-49 баллов. Если сайт получает такое количество баллов, то попадает в красную зону — страница загружается медленно.
• 50-89 баллов. Оранжевая зона — средняя скорость загрузки страницы.
• 90–100 баллов. Зеленая зона — высокая скорость загрузки страницы.

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

Переходим на страницу инструмента PageSpeed Insights. Вводим домен сайта и кликаем «Анализировать».

Для просмотра отчета по загрузке страницы на компьютере переходим на вкладку «Для компьютеров»:

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

Для просмотра отчета по загрузке страницы на мобильных устройствах переходим на вкладку «Для мобильных»:

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

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

Отчет PageSpeed Insights состоит из несколько блоков:

• Оценка пользовательского опыта на основании реального взаимодействия людей со страницей.
• Оценка скорости в результате имитации загрузки страницы.
• Карта эффективности.
• Рекомендации по ускорению работы страницы.

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

Разберем метрики и результаты по ним.

Первая отрисовка контента (FCP) — время с момента перехода пользователя на страницу до момента отрисовки первого бита контента из DOM. Это может быть любой контент на странице: текст, картинка, иконка и т. д.

В нашем отчете были получены такие результаты по показателю FCP:

• у 93% загрузок этой страницы хороший показатель FCP (меньше 1,8 секунды);
• у 5% загрузок этой страницы показатель FCP составляет от 1,8 до 3 секунд, поэтому его требуется улучшить;
• у 2% загрузок этой страницы фиксируется плохой показатель FCP — более 3 секунд, его также нужно улучшить.

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

В отчете мы получили такие результаты по FID:

• у 97% загрузок хороший показатель по FID — менее 100 мс.
• у 3% загрузок показатель FID составляет от 100 до 300 мс. Это средний показатель, требуется его улучшить.

Плохой показатель по FID не был зарегистрирован за последние 28 дней.

Отрисовка крупного контента (LCP) — время, которое требуется браузеру на отображение самого крупного видимого элемента на странице.

Результаты по LCP:

• у 95% загрузок хороший результат — меньше 2,5 секунд.
• у 4% средний результат — от 2,5 до 4 секунд.
• у 1% плохой результат — более 4 секунд.

Накопительный сдвиг макета (CLS) — показатель оценивает визуальную стабильность сайта. Учитывает суммарное смещение всех элементов, происходящее вне зависимости от действий посетителя страницы.

Результаты по CLS:

• у 100 % загрузок этой страницы хороший показатель CLS — меньше 0,1.

По результатам наблюдений PSI делает выводы о том, что за последние 28 дней страница соответствует требованиям Core Web Vitals. Вот шкала соответствия:

В нашем примере при 95% случаев загрузки страницы показатель LCP был меньше 2,5 секунд, в 97% случаев FID — менее 100 мс, в 100% случаев показатель CLS меньше 0,1.

Это данные по конкретному URL. Для получения оценки по сайту в целом надо установить галочку напротив опции «Показать данные об источнике»:

После этого инструмент покажет оценку всего сайта по рассмотренным выше четырем показателям:

Оценка по всему источнику ниже, чем по рассмотренной выше веб-странице. В выводе сказано, что источник не отвечает требованиям Core Web Vitals.

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

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

Вот какие результаты были получены в отчете по имитации загрузки страницы:

Анализ проводится по шести показателям. Четыре показателя (FCP, LCP, FID, CLS) мы уже рассмотрели выше. Поэтому расшифровывать будем только новые метрики.

Первая отрисовка контента (FCP). В отчете этот показатель составляет 2,7 секунды. Показатель средний, поэтому напротив него стоит оранжевый квадрат.

Индекс скорости загрузки (SI) отражает, сколько времени потребуется браузеру на то, чтобы отобразить весь контент на странице. В примере SI составляет 3,9 секунды. Это средний показатель, поэтому он отмечен оранжевым квадратом.

Отрисовка крупного контента (LCP) занимает 5 секунд. Это низкая скорость, поэтому напротив стоит красный треугольник.

Время загрузки для взаимодействия (TTI) — сколько времени потребуется странице для полного взаимодействия с пользователем. Страница считается интерактивной, если реагирует на действия пользователя в течение 50 мс, а на странице отображается весь контент, который измеряется с помощью показателя FCP.

В отчете TTI составило 9,5 секунды. Это означает, что страница медленно загружается для взаимодействия. Поэтому напротив этого показателя стоит красный треугольник. Быстрая загрузка занимает от 0,5 до 2 секунд.

Время блокировки ввода (TBT) — время между отрисовкой первых элементов до момента, когда можно взаимодействовать со страницей.

Считается, что если время выполнения задачи занимает более 50 мс, то она выполняется долго. Поэтому оптимальный показатель TBT составляет 50 мс. В отчете показатель TBT составляет 650 мс — и вновь красный треугольник.

Накопительный сдвиг макета (CLS) равен нулю. Это оптимальное значение, поэтому напротив стоит зеленый кружок.

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

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

Для получения более подробной информации кликаем на «Открыть карту эффективности»:

В открывшемся окне отобразятся все подвязанные к веб-странице ресурсы, которые уменьшают производительность при загрузке. К таким ресурсам относятся счетчики Яндекс.Метрики, Google Analytics, Facebook и т. д.

В таблице указан размер установленного скрипта и доля использования:

На основании полученных результатов PSI предоставляет рекомендации. Их внедрение, по мнению Google, ускорит работу страницы. Реализовать все рекомендации в полном объеме или выбрать самые критичные — зависит от наличия у вас времени, квалифицированных специалистов в штате и особенностей CMS вашего сайта.

На страницу выведены все рекомендации по улучшению производительности. Но при необходимости можно посмотреть результаты аудита в разрезе определенных показателей — FCP, LCP, TBT, CLS:

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

Рекомендации поделены на несколько блоков.

1. Оптимизация. Советы направлены на повышение производительности страниц. Исправление обнаруженных проблем повышает оценку PSI по скорости загрузки. Каждая возможность обозначена определенным знаком: красный треугольник означает, что выявленная проблема приводит к сильному снижению скорости страницы; оранжевый квадрат — загрузка протекает со средней скоростью из-за обнаруженных неполадок.

В примере ниже инструмент рекомендует удалить неиспользуемый JavaScript код. Прогнозируется, что его удаление позволит сэкономить 2,29 секунды времени. Также рекомендуется устранить ресурсы, блокирующие отображение, удалить неиспользуемый код CSS, использовать современные форматы изображений и т. д.

Для просмотра более подробных рекомендаций разворачиваем список напротив выбранной проблемы. Например, посмотрим, какие проблемы обнаружил инструмент с JavaScript кодом во время аудита:

В рекомендациях указано, где надо удалить неиспользуемый код для ускорения страницы:

Или вот рекомендации по использованию современных форматов изображений. После загрузки картинок в форматах WebP и AVIF можно будет увеличить скорость страницы на 0,15 секунды.

2. Диагностика. В этом блоке перечисляются проблемы, исправление которых повысит производительность сайта. В примере инструмент рекомендует настроить показ текста во время загрузки веб-шрифтов, уменьшить влияние стороннего кода, что повысит скорость на 450 мс, сократить размер структуры DOM и т. д.

Раскроем рекомендации инструмента относительно правил эффективного использования кеша для статистических объектов. Всего найдено 156 ресурсов, в которых PSI рекомендует сократить размер структуры. Внедрение этих рекомендаций позволит быстрее загружаться странице при повторных посещениях.

3. Успешные аудиты. В этом блоке перечислен список успешно пройденных аудитов. Всего их 18. Например, настроен подходящий размер изображений, уменьшен размер кода JavaScript, включено сжатие текста и т. д.

PageSpeed Insights обнаруживает неочевидные проблемы с сайтом и подсказывает, как их исправить. Однако основная задача специалиста по SEO или вебмастера должна заключаться не в достижении оценки 90–100 баллов, а в устранении причин, снижающих производительность страницы.

Есть несколько мероприятий, которые помогут ускорить загрузку:

• Смена хостинга. В некоторых ситуациях сайт грузится медленно не из-за внутренних проблем, а из-за низкой производительности хостинга. Лучше отдавать предпочтение серверам, которые находятся в крупных постоянно обслуживаемых дата-центрах и предоставляют круглосуточную техническую поддержку.
• Оптимизация CSS и JavaScript. Для улучшения производительности сайта часто требуются работы по уменьшению размера шрифта и удалению ненужных фрагментов кода.
• Оптимизация изображений. Сюда относятся мероприятия по подбору оптимального формата, веса, высоты и ширины изображений.
• Оптимизация текста. Важно настроить серверное ПО так, чтобы данные проходили предварительную архивацию. Это позволит сократить сетевой трафик и ускорить процесс получения информации с сервера.