Как пользоваться PageSpeed Insights: пошаговая инструкция по проверке сайта

PageSpeed Insights — инструмент для проверки производительности веб-страниц. Он позволяет проанализировать конкретный URL, посмотреть показатели загрузки на мобильных устройствах и компьютерах, выявить технические проблемы и получить рекомендации по их устранению.
В этой инструкции разберём, как запустить проверку в PageSpeed Insights, где найти основные метрики, как изучить диагностические отчёты и использовать результаты для постановки задач разработчику.

Шаг 1. Откройте PageSpeed Insights и запустите проверку

Перейдите на страницу PageSpeed Insights. В поле ввода укажите полный адрес страницы, которую необходимо проверить, и нажмите кнопку «Анализировать».
Инструмент начнёт тестирование указанного URL. После завершения проверки появится отчёт с показателями производительности и техническими рекомендациями.
Важно учитывать, что анализ выполняется для конкретной страницы, а не для всего сайта. Если необходимо проверить интернет-магазин, отдельно протестируйте главную страницу, категорию каталога и карточку товара.

Шаг 2. Сравните мобильную и десктопную версии

В верхней части отчёта доступны две вкладки: «Мобильные устройства» и «Компьютер». Переключаясь между ними, можно сравнить результаты тестирования одной страницы в разных условиях.
Начните с мобильной версии. Посмотрите итоговую оценку производительности и обратите внимание на показатели, выделенные предупреждающими цветами.
Затем откройте вкладку «Компьютер» и сравните результаты. Если оценки существенно отличаются, изучите рекомендации для каждой версии отдельно.
Для оценки производительности используется шкала от 0 до 100 баллов.

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

Шаг 3. Изучите данные реальных пользователей

В начале отчёта может отображаться раздел с оценкой фактического пользовательского опыта. Он формируется на основе статистики браузера Chrome за последние 28 дней.
Если данных достаточно, инструмент показывает значения основных метрик и результат проверки Core Web Vitals.
Для анализа используются три показателя:

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

Шаг 4. Разберите лабораторные показатели Lighthouse

Ниже располагается блок диагностики производительности, полученный при моделировании загрузки страницы.
В нём отображается итоговая оценка и несколько метрик, характеризующих процесс загрузки.
First Contentful Paint (FCP) показывает время появления первого содержимого на странице. Если значение высокое, необходимо изучить ресурсы, задерживающие первоначальную отрисовку.
Largest Contentful Paint (LCP) отражает время отображения крупнейшего видимого элемента. При неудовлетворительном результате проверьте, какой элемент определяется как LCP и какие ресурсы влияют на его загрузку.
Speed Index характеризует скорость визуального появления содержимого. Чем ниже значение, тем быстрее страница заполняется элементами.
Total Blocking Time (TBT) показывает суммарное время блокировки основного потока браузера длительными задачами. Высокое значение часто связано с выполнением JavaScript.
Cumulative Layout Shift (CLS) отражает неожиданные смещения элементов при загрузке.
Для каждого показателя инструмент отображает значение и цветовую оценку. На этом этапе необходимо определить, какие метрики требуют внимания в первую очередь.

Шаг 5. Откройте визуализацию загрузки страницы

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

Шаг 6. Изучите раздел рекомендаций

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

Нажмите на интересующую рекомендацию, чтобы раскрыть подробности.
В зависимости от типа проблемы инструмент может показать затронутые файлы, объём ресурсов, оценку потенциальной экономии и дополнительные сведения.

Шаг 7. Проверьте проблемные изображения

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

Шаг 8. Найдите JavaScript, который замедляет страницу

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

Шаг 9. Проверьте CSS и блокирующие ресурсы

Найдите рекомендации, связанные с таблицами стилей и ресурсами, задерживающими отображение страницы.
Раскройте соответствующие пункты и изучите список файлов.
Если инструмент сообщает о неиспользуемом CSS, необходимо определить, какие стили действительно не применяются на проверяемой странице.
Если обнаружены блокирующие ресурсы, следует проверить порядок их подключения и возможность изменения способа загрузки.
Не рекомендуется удалять CSS или JavaScript исключительно на основании автоматического отчёта. Сначала необходимо убедиться, что изменения не нарушат оформление и функциональность других страниц.

Шаг 10. Проанализируйте серверные и сетевые задержки

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

Шаг 11. Просмотрите успешные проверки

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

Шаг 12. Составьте список задач по результатам аудита

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

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

Шаг 13. Повторно проверьте страницу после исправлений

После выполнения технических работ вернитесь в PageSpeed Insights и повторите анализ того же URL.
Сравните показатели до и после изменений. Для удобства результаты можно сохранить в отдельной таблице.

Учитывайте, что результаты лабораторного тестирования могут колебаться. Для более объективного сравнения полезно выполнить несколько проверок в сопоставимых условиях.
Полевые данные обновляются по мере накопления статистики за скользящий 28-дневный период, поэтому изменения в них могут отображаться не сразу.

Заключение

PageSpeed Insights позволяет последовательно проверить производительность конкретной страницы: от общей оценки до анализа отдельных файлов и технических рекомендаций.
Для проведения аудита достаточно указать URL, сравнить мобильную и десктопную версии, изучить Core Web Vitals, открыть диагностические разделы и зафиксировать обнаруженные проблемы.
Главный результат проверки — не только оценка в баллах, но и конкретный перечень технических задач с указанием проблемных ресурсов. Повторный анализ после исправлений помогает определить, какие изменения действительно улучшили показатели страницы.