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

Уже давно не секрет, что скорость сайта стала одной из самых важных характеристик. Чем быстрее сайт загружается - тем выше может быть доход, который он приносит своему владельцу. Повышение скорости загрузки сайта означает снижение количества пользователей, которые сразу же покидают этот сайт, устав ждать пока он загрузится. Особое значение быстродействию сайта придает то, что теперь показатели Google PageSpeed используются для оценки ранжирования сайтов в результатах поиска.

С помощью бесплатного инструмента Google PageSpeed Insight мы можем узнать, насколько быстро загружается веб-страница нашего сайта и как ее ускорить. А теперь рассмотрим что это за сервис такой и как с ним можно работать.

Принцип работы PageSpeed Insights

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

Данные, на которых основывается PSI при оценке скорости загрузки:

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

Измеряется скорость загрузки страницы по 100-бальной шкале. Благодаря данным за последние 28 дней наблюдений, формируется результативная оценка. На следующем шаге инструмент отслеживает, какой процент загрузки страницы прошел быстро, какой со средней скоростью, а какой медленно.

Отчет содержит два показателя - первую отрисовку контента (FCP) и первую задержку ввода (FID). Используются данные, полученные из отчета об удобстве пользования браузером Chrome.

Оценка формируется из критериев:

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

Данный инструмент оценивает скорость работы страницы на основании анализа этих и других результатов.

Шкала оценки:

• 0-49 баллов. Сайт находится в красной зоне. Критически медленная загрузка.
• 50-89 баллов. Оранжевая зона. Сайт загружается со средней скоростью.
• 90-100 баллов. Зеленая зона. Быстрая загрузка, хорошая работа сайта.

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

Пошаговая инструкция работы с PageSpeed Insights

Заходим на PageSpeed Insights. Для начала анализирования вводим домен сайта и нажимаем «Анализировать».

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

И здесь, промотав страницу ниже, видим баллы оценки скорости загрузки страницы:

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

Чтобы увидеть отчет скорости загрузки страницы на мобильных устройствах, переходим на вкладку «Мобильные устройства».

Инструмент оценивает скорость загрузки страницы в 25 баллов. Что является очень низким показателем. Необходимо проводить мероприятия по ускорению скорости работы страницы.

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

По результатам наблюдений получаем максимальную скорость, с которой загружается сайт

Данные, которые входят в отчет:

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

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

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

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

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

По показателю First Contentful Paint (FCP) мы получили следующие результаты:

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

Первую задержку ввода (First Input Delay) называют временем от начала взаимодействия пользователя с сайтом до момента, когда страница откликнулась. В данном случае результат начинает зависеть от того, сколько времени потребовалось браузеру на то, чтобы ответить пользователю.

По показателю First Input Delay (FID) мы получили следующие результаты:

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

Отрисовка большого контента Largest Contentful Paint — время, необходимое браузеру для отображения самого крупного видимого элемента на странице.

По показателю Largest Contentful Paint (LCP) мы получили следующие результаты:

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

Уровень визуальной стабильности сайта оценивается по шкале Cumulative Layout Shift (Накопительный сдвиг макета). Отображаются данные по суммарному смещению всех элементов, которое происходит независимо от действий посетителей страницы.

По показателю Cumulative Layout Shift (CLS) мы получили следующие результаты:

• у 88% загрузок этой страницы хороший показатель CLS — меньше 0,1;
• у 7% загрузок страницы - средние показатели (требуется доработка);
• у 5% - плохие показатели, которые следует исправить.

Инструмент Page Speed Insights выносит окончательный вердикт, что в результате проверки страницы по основным показателям за последние 28 дней Core Web Vitals - проверка не пройдена.

Чтобы увидеть отчет по производительности всего сайта, следует нажать на "Источник" — кнопку, расположенную возле поля ввода адреса страницы сайта.

Оценка результатов имитации загрузки страниц

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

Отчет имитации загрузки показывает следующие результаты:

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

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

Индекс скорости загрузки (Speed Index) показывает, сколько времени потребуется браузеру для отображения всего контента на странице. Мы видим показатель в 8,8 секунды. Это плохой показатель, поэтому он имеет красный маркер.

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

Время загрузки для взаимодействия (Time to Interactive) — сколько времени потребуется странице для полного взаимодействия с пользователем.

Как правило, страницы считаются интерактивными в случае реакции на действие пользователя за 50 мс, а на странице отображается весь контент. Этот показатель измеряется с помощью показателя FCP.

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

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

В случае, если время выполнения задачи превышает 50 мс, то она выполняется очень долго. Именно поэтому оптимальным показателем TBT является 50 мс. В отчете показатель TBT составляет 5 110 мс — естественно, что получаем красный маркер.

Накопительный сдвиг макета (Cumulative Layout Shift) равен 0,086. Этот показатель является оптимальным, поэтому рядом с ним стоит зеленый маркер.

Результаты тестирования могут изменяться. Много факторов влияет на выводы о производительности сайта, в том числе изменения маршрутизации интернет-трафика и тестирование на различных устройствах.

Проводим анализ карты эффективности

Впоследствии в PSI представляется поэтапный ход отрисовки страницы с момента первого взаимодействия посетителя с браузером. Теперь, для того чтобы получить более подробное сведения, кликаем на «Открыть карту эффективности»

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

В таблице указаны объёмы установленных скриптов и доли их использования.

Какие меры необходимо принять для улучшения?

Согласно извлечённым результатам PSI дает предложения по улучшению производительности. Google считает их внедрение необходимым для пользователей и ускорения работы сайта.

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

• First Contentful Paint (Первая отрисовка контента);
• Largest Contentful Paint (Отрисовка крупного контента);
• Total Blocking Time (Время блокировки ввода);
• Cumulative Layout Shift (Накопительный сдвиг макета).

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

Рекомендации подразделяются на следующие блоки:

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

В примере ниже инструмент рекомендует заменить изображения на современный формат. Сказано, что данное действие сэкономит 41,1 секунды. Далее рекомендуется настроить эффективную кодировку изображений и т.д. Для того чтобы получить наиболее подробную информацию по данной проблеме, развернем перечень напротив проблемы.

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

Диагностика. Указывается список проблем и их решения, которые улучшат производительность ресурса. В примере инструмент рекомендует предотвратить чрезмерную нагрузку на сеть, настроить показ всего текста во время загрузки шрифтов, уменьшить влияние стороннего кода (что повысит скорость загрузки страницы на 3 780 мс) и т.д.

Изучим подробнее пункт про сокращение времени выполнения кода JavaScript. Исправление обнаруженных проблем только данного пункта позволит сократить время на анализ, компиляцию и выполнение скриптов JS, что приведет к ускорению загрузки страниц сайта на 7,5 секунд.

Успешные аудиты. Этот блок включает список всех успешно проработанных аудитов. В нашем примере их 15 штук. Из них: отложена загрузка изображений, уменьшен размер кода CSS и JavaScript и т.д.

PSI выявит проблемы и предложит способы их устранения

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

Можно выполнить ряд мер, которые посодействуют ускорению загрузки:

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

Заключение

Сервис Google PageSpeed Insights - полезный инструмент, но следует помнить о том что, в основном, это средство предназначено для SEO аудита с точки зрения быстроты производительности сайта.

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

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