Как провести аудит страницы при помощи PageSpeed Insights и ускорить ее
Пошаговый гайд по работе с бесплатным инструментом Google для вебмастеров и SEO-специалистов
В сентябре этого года Google завершил апдейт под названием Page Experience, важными составляющими которого стал комплекс сигналов Core Web Vitals. Отныне официально скорость загрузки страницы и удобство взаимодействия с ней пользователя являются сигналами ранжирования.
Узнать, насколько быстро грузится веб-страница и как ее ускорить, можно с помощью бесплатного инструмента от Google — PageSpeed Insights. Рассказываем, что он собой представляет и как с ним работать.
PageSpeed Insights: что это за инструмент и как он работает
Page Speed Insights (PSI) — бесплатный инструмент Google, который анализирует скорость загрузки веб-страницы на мобильных устройствах и компьютерах и дает рекомендации по ее ускорению.
PSI оценивает скорость загрузки на основании таких данных:
Инструмент оценивает скорость загрузки страницы по 100-бальной шкале. Оценка формируется на основании результатов, полученных по данным наблюдений за последние 28 дней. Все загрузки веб-страницы принимаются за 100%. Далее инструмент отслеживает, какой процент загрузок страницы прошел быстро, какой со средней скоростью, а какой с низкой.
Например, в отчете обязательно оценивается два показателя — первая отрисовка контента (FCP) и первая задержка ввода (FID). Данные берутся из отчета об удобстве пользования браузером Chrome.
На основании анализа этих и других результатов инструмент дает общую оценку скорости работы страницы. Вот шкала оценки:
PSI оценивает работу сайта сразу на компьютерах и мобильных устройствах и предоставляет отчеты с оценкой скорости загрузки и рекомендациями по ее ускорению отдельно для ПК и мобильных. Оба отчета содержат идентичную информацию.
Как работать с PageSpeed Insights: пошаговая инструкция
Оцениваем уровень оптимизации в баллах
Переходим на страницу инструмента PageSpeed Insights. Вводим домен сайта и кликаем «Анализировать».
Для просмотра отчета по загрузке страницы на компьютере переходим на вкладку «Для компьютеров»:
Скорость загрузки десктопной версии страницы инструмент оценил в 97 баллов. Это высокий уровень оптимизации.
Для просмотра отчета по загрузке страницы на мобильных устройствах переходим на вкладку «Для мобильных»:
Скорость загрузки мобильной версии оценена в 53 балла. Это средний уровень оптимизации, требуются мероприятия по ускорению работы страницы.
Ниже рассмотрим отчет по скорости загрузки мобильной версии страницы.
Нет времени и ресурсов на аудит и техническую оптимизацию сайта? Поможет PromoPult! В модуле SEO все работы выполняются в срок и по чек-листу. Можно доверить специалистам комплексную оптимизацию или часть работ взять на себя. В системе много бесплатных инструментов, понятные отчеты, готовые для внедрения рекомендации. Возможно продвижение в рассрочку.
Получаем скорость загрузки по данным наблюдений
Отчет PageSpeed Insights состоит из несколько блоков:
Оценка скорости загрузки по данным наблюдений отражает опыт взаимодействия со страницей пользователей через браузер Chrome. Анализ проводится по четырем метрикам. Справа можно посмотреть, как отображается страница сайта после полной загрузки.
Разберем метрики и результаты по ним.
Первая отрисовка контента (FCP) — время с момента перехода пользователя на страницу до момента отрисовки первого бита контента из DOM. Это может быть любой контент на странице: текст, картинка, иконка и т. д.
В нашем отчете были получены такие результаты по показателю FCP:
Первая задержка ввода (FID) обозначает, сколько времени прошло с момента первого взаимодействия пользователя с сайтом до момента отклика страницы. Например, пользователь кликнул по ссылке. Оценивается, сколько времени понадобилось браузеру на то, чтобы ответить на это взаимодействие.
В отчете мы получили такие результаты по FID:
Плохой показатель по FID не был зарегистрирован за последние 28 дней.
Отрисовка крупного контента (LCP) — время, которое требуется браузеру на отображение самого крупного видимого элемента на странице.
Накопительный сдвиг макета (CLS) — показатель оценивает визуальную стабильность сайта. Учитывает суммарное смещение всех элементов, происходящее вне зависимости от действий посетителя страницы.
По результатам наблюдений 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, включено сжатие текста и т. д.
PSI обнаружит проблемы и посоветует, как их исправить
PageSpeed Insights обнаруживает неочевидные проблемы с сайтом и подсказывает, как их исправить. Однако основная задача специалиста по SEO или вебмастера должна заключаться не в достижении оценки 90–100 баллов, а в устранении причин, снижающих производительность страницы.
Есть несколько мероприятий, которые помогут ускорить загрузку:
Что на самом деле влияет на результат Google PageSpeed Insights и к чему приведет выполнение всех его рекомендаций
Статья написана с целью помощи в спорах о зеленой зоне PageSpeed между клиентами и разработчиками, которые порождаются как минимум некорректной трактовкой результатов сервиса. Я постарался кратко и наглядно изложить суть.
Для начала развею миф о том, что оценка сервиса — это скорость загрузки.
Нет, это не скорость загрузки, это итоговый результат исходя из многих параметров, одним из которых является скорость.
Результаты продемонстрирую на примере анализа сайта midapro.shop
В ходе проверок сайта обратил внимание на очень интересный момент.
Сервис выдает все время разные результаты. Посмотрим на скриншоты ниже.
Через полминуты, запустил тест снова, ничего не меняя на сайте.
Согласно шкале, мобильный результат во втором случае почти догнал среднюю зону, чего совсем не скажешь о первом тесте.
Проведем тест еще раз.
Если компьютерная версия примерно стоит на месте, то результаты мобильной версии расходятся до неприличного. Уже после таких данных, лично у меня появились очень большие сомнения по поводу достоверности данных.
Но пойдем дальше, проверим, что скажет сам браузер о скорости загрузки.
Согласно данным в “Инспекторе разработчика” в браузере,
сайт прогрузился за 2.3 секунды, за 3.3 секунды завершилась загрузка всей страницы:
При том, что на странице 4 слайдера, крупные баннера и легкая анимация.
Посмотрим подробные данные от pagespeed.
Гуглу подошла наша скорость загрузки, даже не смотря на итоговую оценку, время загрузки отмечена зеленым цветом.
Однако для мобильной версии, он насчитал 8.7 секунд.
Откуда он берет эти данные, вопрос хороший, т.к. засекая реально скорость загрузки,
с телефона 8 секунд не удалось достичь никогда.
Далее перейдем к рекомендациям. Что советует сделать гугл, чтоб уменьшить скорость загрузки?
Мы видим перечисление шрифтов, файлов, отвечающих за внешний вид и за работу слайдеров и программной логики для взаимодействия пользователя с сайтом.
Попробуем выполнить рекомендацию.
Скриншоты сайта до изменений и после.
Думаю комментировать не нужно, что гугл рекомендует удалить жизненно важные файлы для сайта. Да, действительно они влияют на скорость загрузки, но по такой логике можно вообще сайт удалить, оставив лишь логотип и номер телефона.
Посмотрим как изменился результат после выполнения рекомендаций.
Стало конечно лучше, грузиться то теперь нечему, кроме картинок.
Но есть рекомендации и по ним.
Гугл рекомендует отказаться от формата jpg, но давайте рассмотрим его предложение. В этот раз не будем мучать сайт, а просто посмотрим на поддержку браузерами форматов, которые предлагаются. Воспользуемся сервисом caniuse.com
Как видно первый формат, не поддерживает ни один браузер, кроме Safari.
Второй формат не поддерживает вообще никто.
Третий формат не поддерживается в Safari.
О выводах судить только вам, лично у меня цензурных слов на эту рекомендацию вряд ли хватит.
Далее гугл рекомендует снова что-то удалить..
… при этом еще ниже в разделе “Успешные аудиты” он говорит, что код CSS и JS оптимален и все лишнее удалено.
Это уже противоречие самому себе в открытом виде.
Под конец я вернул сайт в изначальное состояние и провел тест в четвертый раз:
На что похожи эти результаты снова сказать сложно… что-то между 2 и 3 тестом.
По тестированию скорости загрузки используя секундомер, через 3G, скорость загрузки сайта составляла 3 секунды.
Вывод
Тестировать через этот сервис можно, некоторые рекомендации могут быть полезными.
Ориентироваться на результат и уж тем более гнаться за зеленой зоной бесполезно.
Зеленая зона возможна при отказе от использования cms(движка/админки сайта), при отказе от использования видео, особенно youtube, и использования множества больших изображений.
Ну и напоследок, протестируем сайт компании Google.
Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске
Материал, перевод которого мы сегодня публикуем, посвящён рейтингу скорости сайтов, который можно вычислить с помощью Google PageSpeed Insights.
Ни для кого не секрет то, что скорость сайта в наше время стала одной из его важнейших характеристик. Чем быстрее сайт загружается и готовится к работе — тем выше может быть доход, который он приносит своему владельцу. Ускорение сайта означает снижение числа пользователей, которые, едва зайдя на этот сайт, покидают его, устав ждать загрузки его материалов. Особую значимость быстродействию сайта придаёт тот факт, что теперь показатели Google PageSpeed используются как один из факторов ранжирования сайтов в результатах поиска. В результате сегодня многие организации уделяют скорости своих сайтов самое пристальное внимание.
Изменения в алгоритмах ранжирования сайтов
В прошлом году компания Google внесла два серьёзных изменения в алгоритмы поискового индексирования и ранжирования сайтов.
Для того чтобы понять то, как эти изменения воздействуют на наши проекты в плане оптимизации их производительности, нам нужно разобраться с технологиями, лежащими в основе оценки скорости сайтов. PageSpeed 5.0 представляет собой полностью пересмотренную версию этой системы. Теперь в её основе лежат Lighthouse и CrUX (Chrome User Experience Report).
Это обновление, кроме того, принесло и новый алгоритм оценки, который значительно усложняет задачу получения высокого балла в PageSpeed.
Что изменилось в PageSpeed 5.0?
До версии 5.0 инструмент PageSpeed проверял страницу, анализируя её соответствие набору эвристических правил. Если на странице присутствовали большие несжатые изображения — PageSpeed мог посоветовать веб-разработчику сжать эти изображения. Нет заголовков Cache? Система могла посоветовать их добавить.
К этим проверкам страницы были привязаны рекомендации. Следование рекомендациям могло привести к улучшению производительности страницы. Но эвристические правила были довольно-таки поверхностными, они не были нацелены на исследование того, какие впечатления вызовут у реального посетителя сайта загрузка и рендеринг страницы.
В PageSpeed 5.0 страницы загружаются в настоящий браузер Chrome, которым управляет Lighthouse. Lighthouse записывает показатели, полученные из браузера, применяет к ним модель балльных оценок и выводит общую оценку производительности. Рекомендации по улучшению производительности приводятся на основании баллов, набранных исследуемой страницей по отдельным показателям.
В Lighthouse, как и в PageSpeed, есть система оценки производительности сайтов. В PageSpeed 5.0 оценка производительности берётся непосредственно из Lighthouse. Оценка производительности, выводимая PageSpeed, теперь является той же самой оценкой, что выдаёт Lighthouse.
Оценка производительности, выводимая PageSpeed, основана на оценке, формируемой Lighthouse
Теперь, когда мы знаем о том, откуда берётся оценка PageSpeed, давайте поговорим о том, как эта оценка вычисляется, и о том, что можно предпринять для улучшения скорости сайта.
Что такое Google Lighthouse?
Lighthouse — это опенсорсный проект, которым занимается специальная команда, выделенная из числа разработчиков Google Chrome. За последние пару лет Lighthouse стал стандартным бесплатным инструментом для анализа производительности сайтов.
Lighthouse использует средства Chrome по удалённой отладке (Chrome Remote Debugging Protocol) для чтения сведений о сетевых запросах, для измерения производительности JavaScript-кода, для проверки соблюдения стандартов доступности содержимого страницы. Этот инструмент измеряет временные показатели, ориентированные на особенности восприятия страницы пользователями. Среди них, например, First Contentful Paint (Время загрузки первого контента), Time to Interactive (Время загрузки для взаимодействия) и Speed Index (Индекс скорости загрузки).
Если вы интересуетесь Lighthouse — взгляните на этот материал из официального репозитория проекта, посвящённый общему описанию его архитектуры.
Вычисление оценки производительности сайта в Lighthouse
В ходе исследования производительности страницы Lighthouse записывает множество метрик, ориентированных на оценку того, что видит, и что испытывает пользователь, работая со страницей. Вот шесть показателей, используемых для вывода общей оценки производительности:
Следуя этому алгоритму и рассматривая данные, используемые для вычисления показателя TTI, можно заметить, что если страница смогла стать «интерактивной», пригодной для взаимодействия с пользователем, за 2.1 секунды, то показатель TTI окажется равным 92/100.
После того, как будет вычислен каждый из показателей, ему назначается определённый вес, который используется как модификатор при расчёте общего показателя. Вот веса, назначаемые различным метрикам.
| Метрика | Вес |
| Time to Interactive (TTI) | 5 |
| Speed Index | 4 |
| First Contentful Paint | 3 |
| First CPU Idle | 2 |
| First Meaningful Paint | 1 |
| Estimated Input Latency | 0 |
Веса указывают на то, какое воздействие каждый из показателей оказывает на впечатления мобильного пользователя от работы со страницей.
В будущем этот набор может быть расширен путём включения в него показателей, взятых из набора данных Chrome User Experience Report, связанных с восприятием сайтов пользователями.
Возможно, вам интересно будет узнать о том, как использование весов влияет на итоговую оценку производительности. Если это так — взгляните на эту таблицу, созданную командой Lighthouse. Проанализировав её, можно лучше понять этот процесс.
Фрагмент таблицы, демонстрирующей расчёт оценки производительности страниц
Если в примере, приведённом выше, изменить показатель interactive (это — то, что мы называем здесь TTI) с 5 секунд до 17 секунд (то есть — до уровня глобального среднего показателя TTI для мобильных страниц), то оценка страницы упадёт до 56% (то есть — она получит 56 баллов из 100 возможных).
В результате можно сделать вывод о том, что наибольшее влияние на итоговую оценку сайта оказывает метрика TTI. Из этого следует то, что для получения высокой оценки PageSpeed странице необходимо демонстрировать достойный показатель TTI.
Улучшение TTI
Если в общих чертах рассматривать проблему улучшения TTI, то можно сказать, что существуют два фактора, которые чрезвычайно сильно влияют на этот показатель:
Везде, где это возможно, уберите неиспользуемый JavaScript-код, или постарайтесь, чтобы страница загружала бы только те скрипты, которые используются на этой странице. Выполнение этой рекомендации может означать избавление от старых полифиллов или замену сторонних библиотек на более компактные и более современные альтернативы.
Важно помнить о том, что то, что называют «ценой JavaScript», это не только время, необходимое на загрузку кода. Браузеру нужно распаковать, распарсить, скомпилировать и, в итоге, выполнить загруженный JavaScript-код. Выполнение всех этих операций может занять заметное время. Особенно — на мобильных устройствах.
Среди эффективных мер по уменьшению объёма JS-кода, используемого страницами, можно отметить следующие:
Мониторинг TTI
Для того чтобы успешно исследовать то, как ваш сайт воспринимают пользователи, просматривающие его, мы рекомендуем использовать системы мониторинга производительности сайтов наподобие Calibre. В частности, речь идёт о том, что сайты испытывают минимум на двух устройствах — на быстром настольном компьютере и на мобильном телефоне, производительность которого находится на уровне медленных устройств среднего класса.
При таком подходе у вас будут данные и для наилучшего варианта работы с вашим сайтом, и для наихудшего. Вам при этом придётся свыкнуться с тем, что посетители вашего сайта не пользуются такими же мощными устройствами, какими пользуется ваша команда.
Тщательное ручное профилирование
Для того чтобы извлечь максимум пользы из профилирования производительности JS-кода тестовые страницы испытывают на специально замедленных мобильных устройствах. Если у вас в ящике стола валяется старый телефон — реализация этой идеи может дать ему замечательную вторую жизнь.
Хорошим заменителем реальных устройств являются возможности инструментов разработчика Chrome. Вот материал, посвящённый профилированию React-приложений с использованием этих инструментов.
Другие метрики
Такие метрики, как Speed Index, First Contentful Paint и First Meaningful Paint, основаны на том, как браузер визуализирует страницу. На них влияют факторы, похожие на те, о которых мы уже говорили. Воздействие на эти факторы часто ведёт к улучшению всех этих показателей.
Объективно говоря, улучшать эти метрики проще, чем TTI. Дело в том, что базой для их вычисления служит скорость рендеринга страниц браузером. Эти метрики можно улучшить, точно следуя рекомендациям, выдаваемым после анализа страниц с помощью Lighthouse.
Если вы ещё не выполняете предварительную загрузку шрифтов или не оптимизируете страницу с учётом особенностей критически важных запросов — то вы вполне можете начать улучшение показателей рендеринга своего сайта именно с этих двух направлений. В этом материале можно найти подробные сведения о том, как браузер загружает и выводит критически важные ресурсы, используемые при формировании веб-страниц.
Итоги: о наблюдении за сайтами и о внесении в их работу ощутимых улучшений
Обновлённая поисковая консоль Google, Lighthouse и PageSpeed Insights — это отличные средства, которые позволяют мгновенно оценить общие показатели производительности сайта. Однако они не очень хорошо подходят для команд, которым необходимо непрерывно отслеживать и улучшать производительность их проектов.
Непрерывный мониторинг производительности — это важнейшая деталь рабочего процесса, нацеленного на постоянное поддержание производительности сайта на высоком уровне. При таком подходе команда разработчиков проекта мгновенно узнаёт о проблемах с производительностью. При ручном тестировании производительности возможен неожиданный разброс результатов. В результате без создания специализированного тестового окружения оказывается почти невозможным проведение испытаний производительности сайта с использованием разных устройств, или с имитацией других изменяющихся параметров систем потенциальных пользователей.
Скорость страниц стала важнейшим фактором в SEO-ранжировании страниц. Особенно сильно это заявление звучит в наши дни, когда почти 50% веб-трафика создают мобильные устройства.
Для того чтобы ваш сайт не потерял бы позиции в поисковой выдаче, постарайтесь использовать современные версии инструментов для анализа производительности его важнейших страниц и поддерживайте его скорость на устраивающем вас уровне.
Уважаемые читатели! Оптимизируете ли вы свои веб-проекты с учётом улучшения показателей, влияющих на оценки, выставляемые Google PageSpeed?
