PageSpeed Insights: как читать отчёт и что исправлять для идеальной скорости сайта
Скорость загрузки страницы — один из ключевых факторов ранжирования в Google и Яндекс. Инструмент PageSpeed Insights от Google помогает оценить производительность сайта и выявить узкие места. Но многие владельцы сайтов сталкиваются с проблемой: отчёт выглядит как набор непонятных метрик и рекомендаций. В этой статье разберём, как правильно читать отчёт PageSpeed Insights, какие показатели действительно важны и что нужно исправлять, чтобы получить зелёную оценку и удержать пользователя.
По нашему опыту (280+ проектов), даже незначительные задержки в загрузке могут стоить до 20% конверсии. Например, интернет-магазин мебели после оптимизации по отчёту PageSpeed Insights получил +340% трафика за 6 месяцев. А автосервис — +280% заявок. Всё начинается с анализа.
Что такое PageSpeed Insights и как он работает
PageSpeed Insights — это бесплатный сервис Google, который анализирует скорость загрузки страницы на мобильных и десктопных устройствах. Он использует данные из Chrome UX Report (CrUX) — реальные метрики пользователей, и лабораторные тесты на симулированном устройстве.
Инструмент выдаёт оценку от 0 до 100, где:
- 90–100 — зелёная зона (хорошо)
- 50–89 — жёлтая зона (требует улучшения)
- 0–49 — красная зона (плохо)
Оценка — это не просто цифра. Она основана на шести метриках: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Cumulative Layout Shift (CLS), Speed Index (SI) и Time to Interactive (TTI).
Как читать отчёт PageSpeed Insights: пошаговый разбор
Когда вы вводите URL в поле и нажимаете «Анализировать», сервис показывает два отчёта: для мобильных устройств и для десктопа. Мы рекомендуем начинать с мобильной версии — именно её чаще всего проверяет Google.
Верхняя часть: оценка и метрики
Сразу под заголовком вы видите общую оценку и цветовую индикацию. Ниже — блок с метриками. Каждая метрика имеет своё значение и цвет:
| Метрика | Что измеряет | Хорошее значение |
|---|---|---|
| FCP (First Contentful Paint) | Время до появления первого текста или изображения | Менее 1.8 с |
| LCP (Largest Contentful Paint) | Время загрузки самого большого элемента (изображение, видео, блок) | Менее 2.5 с |
| TBT (Total Blocking Time) | Общее время, когда страница не реагирует на действия пользователя | Менее 200 мс |
| CLS (Cumulative Layout Shift) | Визуальная стабильность (сдвиги элементов при загрузке) | Менее 0.1 |
| Speed Index | Как быстро заполняется содержимое страницы | Менее 3.4 с |
| TTI (Time to Interactive) | Когда страница становится полностью интерактивной | Менее 3.8 с |
Если какая-то метрика в красной зоне — это сигнал к действию. Вагиз Хасанов рекомендует не пытаться улучшить всё сразу. Сначала исправьте LCP и CLS — они чаще всего влияют на пользовательский опыт.
Раздел «Возможности» (Opportunities)
Ниже метрик расположен список рекомендаций. Каждая рекомендация имеет примерную экономию времени (в секундах). Например: «Удаление неиспользуемого CSS сэкономит 1.2 с». Это лабораторные данные, но они дают понимание, где копать.
Примеры типичных рекомендаций:
- Использовать эффективное кэширование
- Сжать изображения
- Удалить неиспользуемый JavaScript и CSS
- Включить сжатие текста (gzip)
Раздел «Диагностика» (Diagnostics)
Здесь перечислены проблемы, которые не влияют на оценку напрямую, но могут замедлять сайт. Например, слишком большой DOM-дерево или медленный ответ сервера (TTFB).
Полевые данные (Field Data) vs Лабораторные данные
В отчёте есть два типа данных:
- Полевые данные — реальная скорость для пользователей за последние 28 дней. Если данных мало, сервис пишет «Недостаточно данных». Это важнее лабораторных тестов.
- Лабораторные данные — симуляция на устройстве (Moto G4, Chrome, эмуляция сети 3G). Они показывают, как сайт работает в идеальных условиях.
Если полевые данные плохие — сайт действительно тормозит у реальных посетителей. Если лабораторные плохие, а полевые хорошие — возможно, у вас мощный хостинг и быстрые пользователи, но есть проблемы с кодом.
Что исправлять в первую очередь: 5 главных проблем
На основе анализа сотен проектов мы выделили 5 наиболее частых проблем, которые дают максимальный прирост скорости.
1. Изображения: сжатие и формат
Изображения — самый частый виновник медленной загрузки. PageSpeed Insights рекомендует:
- Использовать современные форматы: WebP, AVIF
- Сжимать изображения без потери качества (например, через TinyPNG или Squoosh)
- Загружать изображения в размере, который реально отображается на странице (не 2000px, если блок 300px)
- Добавлять lazy loading (отложенную загрузку) для изображений ниже сгиба
Пример: интернет-магазин мебели после сжатия всех изображений и перевода в WebP сократил время LCP с 4.2 с до 2.1 с. Трафик вырос на 340% за 6 месяцев.
2. JavaScript и CSS: удаление неиспользуемого кода
Многие сайты загружают тонны JavaScript и CSS, которые не используются на конкретной странице. PageSpeed Insights показывает, какие файлы можно удалить или отложить.
Как исправить:
- Используйте инструменты вроде PurifyCSS или Unused CSS для удаления лишних стилей
- Разделите код на критический (для первого экрана) и некритический (загружать после)
- Отложите загрузку JavaScript с помощью атрибутов defer или async
3. Кэширование и сжатие
Браузерное кэширование позволяет сохранять статические файлы (CSS, JS, изображения) на устройстве пользователя. При повторном посещении страница загружается мгновенно.
Настройка:
- Установите срок жизни кэша для статики (например, 1 год для изображений, 1 месяц для скриптов)
- Включите сжатие gzip или Brotli на сервере
- Используйте CDN для раздачи контента
4. Медленный ответ сервера (TTFB)
Time to First Byte (TTFB) — время, через которое сервер начинает отдавать первый байт данных. Если TTFB больше 600 мс, это проблема хостинга или архитектуры.
Что делать:
- Перейти на более быстрый хостинг (VPS или выделенный сервер)
- Использовать PHP 8+ (если сайт на CMS)
- Оптимизировать базу данных (индексы, запросы)
- Включить кэширование страниц (например, через Varnish)
5. Рендеринг блокирующие ресурсы
Это скрипты и стили, которые блокируют отрисовку страницы. PageSpeed Insights показывает их в разделе «Устраните ресурсы, блокирующие отрисовку».
Решение:
- Inline-критический CSS (стили для первого экрана) прямо в HTML
- Отложить загрузку некритического CSS
- Использовать preload для важных ресурсов
Как улучшить оценку PageSpeed Insights: пошаговый план
Мы подготовили чек-лист, который поможет пройти аудит и получить зелёную оценку.
Шаг 1: Проверьте текущую скорость
Откройте PageSpeed Insights, введите URL своего сайта и нажмите «Анализировать». Сохраните скриншот отчёта — он понадобится для сравнения.
Шаг 2: Исправьте изображения
- Сожмите все изображения (JPG/PNG) до минимума
- Конвертируйте в WebP (используйте плагины для CMS или серверные модули)
- Добавьте lazy loading (атрибут loading=»lazy» для img)
- Убедитесь, что изображения не больше, чем нужно
Шаг 3: Оптимизируйте код
- Удалите ненужные плагины и скрипты
- Объедините CSS и JS файлы (минификация)
- Отложите загрузку JavaScript (defer/async)
- Добавьте критический CSS в head
Шаг 4: Настройте кэширование и сжатие
- Включите gzip/Brotli на сервере
- Установите заголовки Expires и Cache-Control
- Используйте CDN (Cloudflare, KeyCDN)
Шаг 5: Проверьте хостинг
- Убедитесь, что TTFB < 300 мс
- Обновите PHP до последней версии
- Включите кэширование на уровне сервера
Шаг 6: Повторный аудит
Через 1-2 дня после внесения изменений снова запустите PageSpeed Insights. Сравните результаты. Если оценка выросла — вы на правильном пути. Если нет — проверьте, не добавили ли вы новые скрипты или изображения.
Часто задаваемые вопросы
1. Почему PageSpeed Insights показывает разные результаты для мобильных и десктопов?
Для мобильных устройств используется эмуляция медленного соединения (3G) и слабого процессора (Moto G4). Десктоп тестируется на быстром канале. Если мобильная версия плохая, а десктопная хорошая — проблема в адаптации или тяжёлых ресурсах.
2. Какой показатель PageSpeed Insights самый важный?
Для пользователя — LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift). LCP показывает, как быстро загружается основной контент. CLS — насколько стабильно выглядит страница. Google использует эти метрики в Core Web Vitals.
3. Можно ли получить 100 баллов в PageSpeed Insights?
Технически да, но часто это требует жертв: удаление всех скриптов аналитики, шрифтов, сложных анимаций. Для реального бизнеса 90-95 баллов — отличный результат. Вагиз Хасанов рекомендует не гнаться за 100, а сфокусироваться на пользовательском опыте.
4. Как часто нужно проверять скорость сайта?
Минимум раз в месяц, а также после каждого обновления дизайна, добавления нового функционала или смены хостинга. Используйте PageSpeed Insights, GTmetrix, Lighthouse в Chrome DevTools.
5. Влияет ли PageSpeed Insights на позиции в поиске?
Да, скорость загрузки — один из факторов ранжирования. Но не единственный. Если сайт медленный, но контент уникальный и полезный, он может быть выше в выдаче, чем быстрый, но пустой сайт. Оптимизация скорости должна быть частью общей SEO-стратегии.
Заключение
PageSpeed Insights — мощный инструмент, который помогает понять, как сайт работает в реальных условиях. Главное — не просто смотреть на оценку, а анализировать метрики и рекомендации. Исправляйте проблемы по порядку: изображения, код, кэширование, хостинг. Это даст максимальный прирост скорости.
По нашему опыту (280+ проектов), после комплексной оптимизации средний прирост трафика составляет 150-200%, а конверсия растёт на 30-50%. Если хотите получить такую же динамику — начните с аудита.
Получить бесплатный SEO-аудит → seo-rezult.ru
Читайте по теме:
Скорость сайта и Core Web Vitals →
