618 слов | 4 минуты
Google PageSpeed Insights — как улучшить оценку
Запустили PageSpeed — получили 34 балла на мобильных. Что это значит, на что смотреть в первую очередь и как реально улучшить показатели — разберём по порядку.
Что такое PageSpeed Insights
PageSpeed Insights — инструмент Google который анализирует скорость загрузки страницы и выдаёт рекомендации. Данные берутся из двух источников:
- Лабораторные данные — результат одного запуска в контролируемых условиях (Lighthouse)
- Полевые данные (CrUX) — реальная статистика загрузки у пользователей Chrome за последние 28 дней
Если у вас мало трафика — полевых данных может не быть. Ориентируйтесь на лабораторные.
Ключевые метрики
LCP — Largest Contentful Paint
Время до отображения самого крупного видимого элемента страницы (обычно это главное изображение или заголовок).
| Значение | Оценка |
|---|---|
| До 2.5 сек | Хорошо |
| 2.5–4 сек | Требует улучшения |
| Более 4 сек | Плохо |
Что чаще всего тормозит LCP:
- Большое изображение без оптимизации
- Изображение загружается через CSS (background-image) — браузер обнаруживает его позже
- Медленный сервер (высокий TTFB)
- Блокирующие CSS и JS в
<head>
Как улучшить:
- Оптимизируйте главное изображение, добавьте
fetchpriority="high"на него - Добавьте
<link rel="preload">для главного изображения - Переведите изображение с CSS background на тег
<img>
CLS — Cumulative Layout Shift
Показывает насколько «прыгают» элементы страницы во время загрузки. Когда кнопка уезжает в момент когда вы нажимаете — это высокий CLS.
| Значение | Оценка |
|---|---|
| До 0.1 | Хорошо |
| 0.1–0.25 | Требует улучшения |
| Более 0.25 | Плохо |
Частые причины высокого CLS:
- Изображения без указания размеров
widthиheight - Реклама и баннеры которые загружаются и сдвигают контент
- Шрифты которые меняют размер текста после загрузки (FOUT)
- Динамически добавляемые элементы над контентом
Как исправить:
<!-- Всегда указывайте размеры изображений -->
<img src="photo.jpg" width="800" height="600" alt="...">
<!-- Резервируйте место для рекламы через CSS -->
.ad-container {
min-height: 250px;
}
INP — Interaction to Next Paint
Время отклика страницы на действия пользователя (клики, нажатия).
| Значение | Оценка |
|---|---|
| До 200 мс | Хорошо |
| 200–500 мс | Требует улучшения |
| Более 500 мс | Плохо |
Что влияет: тяжёлый JavaScript, долгие обработчики событий, блокировка основного потока.
FCP — First Contentful Paint
Время до появления первого элемента контента (текст, изображение). Не путайте с LCP — FCP это первый контент, LCP — самый крупный.
TTFB — Time To First Byte
Время до получения первого байта ответа от сервера. Показывает насколько быстро работает ваш сервер и бэкенд.
- До 800 мс — хорошо
- Более 1.8 сек — проблема на стороне сервера
Высокий TTFB лечится не оптимизацией фронтенда, а серверной оптимизацией: кэширование, быстрая база данных, более производительный хостинг.
Как читать отчёт PageSpeed
После запуска проверки вы увидите:
«Возможности» — конкретные улучшения с оценкой потенциальной экономии времени. Начните с тех где экономия максимальная.
«Диагностика» — дополнительные проблемы которые не дают прямой экономии но влияют на производительность.
«Пройденные проверки» — что уже хорошо, не трогайте.
Самые частые рекомендации и как их выполнить
«Уберите неиспользуемый JavaScript»
Подключённые скрипты которые не используются на этой конкретной странице.
Решение: загружайте скрипты только там где они нужны, используйте defer и async.
«Правильно задайте размеры изображений»
Изображение загружается большого размера, а показывается маленьким.
Решение: используйте атрибут srcset для адаптивных изображений:
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="...">
«Используйте форматы изображений нового поколения»
JPEG и PNG устарели. WebP на 25–35% легче, AVIF ещё легче.
Решение: конвертируйте изображения в WebP. В Apache можно настроить автоматическую отдачу WebP если браузер его поддерживает:
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
«Предварительно подключитесь к нужным источникам»
Браузер тратит время на установку соединения с внешними ресурсами (Google Fonts, CDN и т.д.).
Решение: добавьте preconnect в <head>:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
«Избегайте большого количества DOM-узлов»
Страница содержит более 1500–3000 DOM-элементов — браузер тратит больше памяти и времени на отрисовку.
Решение: используйте виртуализацию для длинных списков, загружайте контент порциями (infinite scroll, пагинация).
Реалистичные ожидания
Несколько важных моментов:
Оценка 100 — не цель. Многие отличные сайты работают на 60–80 баллах. Google использует Core Web Vitals (LCP, CLS, INP) как сигнал ранжирования — это важнее чем число в PageSpeed.
Мобильная оценка всегда ниже десктопной. PageSpeed симулирует медленное мобильное соединение (4G с имитацией задержки). Это нормально что мобильная оценка на 20–40 баллов ниже.
Внешние скрипты сложно оптимизировать. Пиксели Facebook, виджеты чата, аналитика — они замедляют сайт, но без них часто не обойтись. Загружайте их асинхронно и после основного контента.
Один тест — не показатель. Результат меняется в зависимости от нагрузки на серверы Google в момент проверки. Запустите 3–5 раз и смотрите среднее.
Если нужна помощь с оптимизацией скорости — обратитесь к нам. Проведём анализ PageSpeed и улучшим показатели вашего конкретного сайта.