Блог / Статьи11 декабря 2018

Как проверить скорость загрузки сайта в новом PageSpeed Insights и сделать правильные выводы

Технологии развиваются стремительно: интернет сегодня заметно отличается от того, который был лишь несколько лет назад. Но что остается неизменным – так это значение скорости загрузки сайта для его эффективности. Компания Google тоже не стоит на месте: недавно они серьезно изменили свой инструмент PageSpeed Insights. Многих вебмастеров и владельцев бизнеса это озадачило: что делать теперь? Насколько поменялся подход к ускорению?

Ранее мы уже публиковали две статьи, посвященные этому популярному инструменту проверки скорости веб-страниц:

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

Теперь, когда прошло уже достаточно времени, и общая картина несколько прояснилась, пришло время разобраться: как анализировать сайт в актуальной версии инструмента? К каким рекомендациям нужно обязательно прислушаться, что можно проигнорировать и как не сделать хуже в стремлении улучшить свой веб-ресурс?

Особенности нового интерфейса PageSpeed Insights

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

  1. Оценка скорости загрузки. На первый взгляд – такая же, как раньше, от 0 до 100, но на самом деле изменилось практически все:
    • диапазоны шкалы, отвечающие «хорошим» и «плохим» оценкам (например, оценка «хорошо» теперь начинается от 90, а не от 80 баллов);
    • механизм подсчета итогового значения (теперь он основан на метриках Lighthouse);
    • фактические числа практически для всех сайтов.
  2. Данные наблюдений, или Field Data, они же – сведения из Отчета об удобстве пользования Chrome (CrUX).
    • Как и раньше, доступна только для сайтов, которые есть в базе CrUX.
    • Как и ранее, можно посмотреть усредненные показатели скорости по всем страницам ресурса (origin).
  3. Имитация загрузки страницы, или Lab Data. 6 метрик скорости, которых раньше не было в PageSpeed Insights.
    • Выражены в секундах.
    • Отображаются абсолютно для всех сайтов.
    • Получены в результате эмуляции инструментом Lighthouse.
    • Именно эти метрики (и только они) являются основой для расчета итоговой оценки сайта по 100-балльной шкале (пункт 1).
  4. Аудиты производительности Lighthouse (всего 22 штуки). Пришли на смену 10 правилам старого интерфейса. Разбиты на 3 секции:
    • «Оптимизация» – аудиты рекомендательного характера («исправьте это, и сайт предположительно загрузится на n секунд быстрее»);
    • «Диагностика» – констатации фактов («на сайте обнаружено …; возможно, это его замедляет»);
    • «Успешные аудиты» – по этим пунктам проблем на сайте не выявлено.

Несколько замечаний

  1. Еще раз напомним, что оценка по стобалльной шкале, которая выводится вверху отчета, касается лишь той страницы, адрес которой вы ввели в строку инструмента, и не дает представлений о производительности всего сайта. Чтобы оценить свой сайт более глобально, вам стоит проверить несколько типовых страниц, например, в интернет-магазине – главную, страницу категории, карточку товара, страницу контактов, информацию о доставке и т.д.
  2. Оценки в новой версии не так стабильны, как в старой, по крайней мере пока что. Несколько проверок одной и той же страницы зачастую дают различные результаты: по нашим наблюдениям, разброс доходит до 5-7 пунктов, а возможно и более. Поэтому, чтобы избежать погрешностей и получить более точное представление об оптимизации, лучше проверять каждую страницу хотя бы 2-3 раза. Учтите, что данные отчета кэшируются на 30 секунд, поэтому между проверками должно пройти по крайней мере полминуты.

Что можно узнать из секции «Данные наблюдений»?

Если ваш сайт посещает достаточно много пользователей Google Chrome, то в этом разделе вы увидите наглядные диаграммы. Зеленым, желтым и красным на них показаны проценты от общего числа пользователей, у которых указанная метрика оценена как «быстро», «средне» или «медленно» соответственно. Число над графиком показывает среднее значение метрики по всем посетителям, оно также окрашено в соответствующий цвет.

  • Метрика FCP (First Contentful Paint, Время загрузки первого контента) отображает момент, когда пользователь видит хотя бы один содержательный элемент страницы. Этот показатель важен тем, что посетитель в этот момент отмечает: сайт действительно грузится, работает. Человек с меньшей вероятностью покинет ресурс, если число находится в пределах нормы.
  • First Input Delay (FID, Первая задержка ввода) показывает время между первым взаимодействием пользователя со страницей (например, нажатием на кнопку) и ответом сайта на него. Этот параметр описывает интерактивность ресурса: при его слишком большом значении посетители будут чувствовать, что сайт «тормозит», работает с задержкой.

Данные, которые вы видите в этом разделе, очень ценны тем, что они отображают скорость сайта у вашей реальной аудитории. Так, например, в условиях 3G-соединения ваши страницы могут работать немного медленно, но если большинство пользователей заходит на сайт с компьютера или использует Wi-Fi на мобильных устройствах, то они могут и не заметить никаких проблем.

Таким образом, если по «Данным наблюдений» вы видите отличные оценки, а по 100-балльной шкале попадаете в «желтую» зону, то, скорее всего, пытаться «дожать» оценку до «зеленой» не имеет смысла.

Как анализировать метрики из секции «Имитация загрузки страницы»?

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

Пример раздела «Имитация загрузки страницы»

В первую очередь стоит понять: в новой версии PageSpeed Insights изменились акценты при анализе сайтов. Ранее на оценку влияло преимущественно время отрисовки страницы: быстро или медленно появляется контент на экране пользователя. Отсюда возникали ситуации, когда можно было добиться высоких и даже максимальных оценок, перенеся большинство скриптов в самый низ страницы. Контент отображается быстро, старый PageSpeed Insights не видит никаких проблем, для пользователя на первый взгляд тоже все хорошо, пока он не начнет нажимать на кнопки или другие интерактивные элементы: скрипты, отвечающие за их работоспособность, загружаются при таком сценарии после всего остального содержимого. Этот факт отмечен и в официальной справке PageSpeed Insights.

 

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

 

Теперь же оценки инструмента включают в себя не только собственно скорость загрузки, но и показатели интерактивности страницы, ее готовности отвечать на запросы пользователя. Именно за интерактивность отвечают такие метрики, как Время окончания работы ЦП (First CPU Idle) и Время загрузки для взаимодействия (Time to Interactive). Согласно таблице от создателей инструмента, первая из них имеет вес 2 при подсчете, тогда как вторая – вес 5, что является максимумом, то есть она вносит самый большой вклад в итоговую оценку.

Чтобы понять, как та или иная метрика влияет на общую производительность вашего сайта, вы можете воспользоваться калькулятором. Сохраните копию таблицы на свой Google Диск: после этого вы сможете заменять приведенные в таблице значения на те, что получили при проверке собственного сайта, и редактировать их. Обратите внимание, что числа нужно вводить в миллисекундах. Таким путем можно легко понять, как повлияет на итоговую оценку, например, уменьшение показателя First Meaningful Paint на 0,5 секунды.

Образец скопированного калькулятора. Рамкой выделены значения, которые можно редактировать; справа от них – рассчитанная итоговая оценка по 100-балльной шкале

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

  1. Время загрузки первого контента (First Contentful Paint). «Красные» цифры в этой графе часто говорят о том, что на странице есть ресурсы, тормозящие отрисовку. Улучшить этот показатель можно, оптимизировав доставку файлов JavaScript и CSS. Кроме того, здесь может помочь включение кэширования ресурсов и сжатия в формате GZip.
  2. Время загрузки достаточной части контента (First Meaningful Paint). Проблемы с этим показателем обычно свидетельствуют о недостаточной оптимизации загрузки контента на первом экране (above-the-fold content). Настроив Critical Rendering Path, то есть установив правильную последовательность загрузки необходимых ресурсов, вы, скорее всего, улучшите эту метрику.
  3. Индекс скорости загрузки (Speed Index). На это число влияет, в основном, тот же Critical Rendering Path, что и в предыдущем пункте, а также оптимизация размера ресурсов: сжатие рисунков, минификация HTML, JS и CSS.
  4. Время окончания работы ЦП (First CPU Idle). Факторы, влияющие на этот показатель, схожи с предыдущим пунктом: оптимизация последовательности загрузки файлов и их размера. Однако, здесь важно уже не время отрисовки контента, а готовность страницы отвечать на действия пользователя, поэтому вклад оптимизации тех или иных ресурсов может отличаться.
  5. Время загрузки для взаимодействия (Time to Interactive). Этот показатель зависит от целого комплекса факторов, но важнейшую роль для него играет оптимизация JavaScript, поскольку именно работоспособность скриптов очень важна для готовности страницы ко взаимодействию с пользователем.
  6. Приблизительное время задержки при вводе (Estimated Input Latency). Хотя данный параметр не учитывается при расчете общей оценки сайта, его также желательно оптимизировать. На него влияет оптимизация рендеринга страницы путем правильной организации CSS-файлов и разгрузки основного потока. Подробнее прочитать об этом можно в руководстве от Google.

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

Советы из секций «Оптимизация» и «Диагностика»: нужно ли к ним прислушиваться?

Принцип организации этих секций в целом остался похожим на старый раздел с рекомендациями: каждый из советов можно развернуть и просмотреть более подробные сведения. Основная разница с предыдущим интерфейсом заключается в том, что для правил из раздела «Оптимизация» теперь показывается потенциальная экономия в первую очередь по времени загрузки, оцененная в секундах. Красные цифры и шкала означают замечания, на которые стоит обратить внимание в первую очередь, тогда как желтый цвет – менее существенные.

Важно отметить: данные, представленные в этих разделах, не имеют прямого влияния на подсчет оценки скорости сайта по 100-балльной шкале. Выполнение представленных советов по оптимизации улучшит ваш сайт лишь гипотетически, а оценки экономии в секундах или килобайтах рассчитаны приблизительно. Поэтому не стоит слепо выполнять эти рекомендации, и тем более не стоит ориентироваться только на них, игнорируя данные вышестоящих секций.

 

Рассмотрим пример отчета выше. На скриншоте видно, что у сайта «отличная» общая оценка скорости; все метрики из раздела «Имитация загрузки страницы» показывают хорошие или средние значения. При этом первый совет, который мы видим в секции «Оптимизация» – использовать современные форматы изображений – показывает предположительную экономию в 10,8 секунды. Взглянем еще раз на показатели скорости загрузки: через 4,7 секунды страница уже полностью готова ко взаимодействию, то есть «ускорить» ее на 10,8 секунды никак не получится. Это число явно преувеличено и связано, скорее всего, с большим количеством изображений на странице, которые, однако, грузятся достаточно быстро.

Таким образом, к рекомендациям аудитов стоит прислушиваться, однако с определенной долей скепсиса. Они однозначно помогают понять, что именно нужно сделать с вашим сайтом для ускорения, но при их анализе всегда стоит сверяться с «Имитацией загрузки страницы» и «Данными наблюдений» (если они есть), чтобы не сделать лишней работы, которая окажется в итоге практически бесполезной.

Подводя итог: как же анализировать сайт?

  • Проверьте типовые страницы, каждую по несколько раз, и посмотрите глобальные оценки производительности. Если все в «зеленой зоне», то, скорее всего, не стоит беспокоиться.
  • Просмотрите «Данные наблюдений», если они доступны, сравните информацию с общей оценкой. Если у подавляющего большинства пользователей сайт загружается быстро, то все в порядке.
  • Проанализируйте метрики «Имитации загрузки страницы». Если не все они «зеленые», попробуйте понять, какая является наиболее «проблемной».
  • Посмотрите советы «Оптимизации» и «Диагностики», но не паникуйте, если что-то отображается красным: возможно, они не совсем верны. Сверяйтесь с остальными данными.
  • Попробуйте разобраться, какой объем работы нужно выполнить: например, только сжать изображения, или же оптимизировать размещение на странице скриптов, стилей, форматирование кода. Во втором случае, скорее всего, понадобится участие разработчиков.

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

КОММЕНТАРИИ
КОММЕНТИРОВАТЬ
ВОЙТИ
  • Facebook
  • Twitter
  • Google
ЭТОТ САЙТ ИСПОЛЬЗУЕТ COOKIES
Мы используем cookies для анализа трафика, обеспечения функций социальных сетей и работы системы комментирования на сайте. Список устанавливаемых cookies находится на этой странице. Согласны ли вы на установку cookie?