Оптимизация PageSpeed: пошаговое руководство
Что такое PageSpeed и почему он важен
PageSpeed Insights — инструмент Google, который оценивает скорость загрузки сайта по шкале от 0 до 100. Оценка выше 90 считается хорошей, 50–89 — средней, ниже 50 — плохой. Скорость загрузки напрямую влияет на конверсию: каждая секунда задержки снижает конверсию на 7%.
Google учитывает Core Web Vitals (основные метрики скорости) при ранжировании. Медленный сайт теряет позиции в поисковой выдаче.
Core Web Vitals: три ключевых метрики
LCP (Largest Contentful Paint)
Время отрисовки самого крупного элемента в видимой области. Должно быть менее 2,5 секунд. Обычно это hero-изображение или заголовок. Для улучшения: оптимизируйте изображения, используйте CDN, настройте серверное кэширование.
INP (Interaction to Next Paint)
Время отклика на действия пользователя (клик, тап, нажатие клавиши). Должно быть менее 200 мс. Для улучшения: минимизируйте JavaScript, разбейте длинные задачи, используйте Web Workers.
CLS (Cumulative Layout Shift)
Визуальная стабильность — насколько элементы «прыгают» при загрузке. Должно быть менее 0,1. Для улучшения: задавайте размеры изображений и видео, используйте font-display: swap, избегайте динамической вставки контента.
Пошаговая оптимизация
Шаг 1: Оптимизация изображений
Изображения — главная причина медленной загрузки. Конвертируйте в формат WebP, сжимайте без потери качества, используйте lazy loading для изображений ниже первого экрана.
Шаг 2: Минификация CSS и JavaScript
Удалите пробелы, комментарии и неиспользуемый код. В WordPress используйте плагины Autoptimize или WP Rocket. Перенесите некритичный CSS в отдельные файлы, критичный — инлайните в <head>.
Шаг 3: Серверное кэширование
Настройте кэширование на стороне сервера: Redis/Memcached для объектного кэша, статический HTML-кэш для страниц. В WordPress — WP Super Cache или WP Rocket.
Шаг 4: Браузерное кэширование
Настройте заголовки Cache-Control для статических ресурсов (CSS, JS, изображения) на длительный срок (1 год). Используйте версионирование файлов для сброса кэша при обновлениях.
Шаг 5: Оптимизация шрифтов
Подключайте только нужные начертания. Используйте font-display: swap. Хостите шрифты локально вместо Google Fonts. Предзагружайте шрифты через <link rel="preload">.
Шаг 6: Оптимизация хостинга
Используйте PHP 8.x, NVMe-диски, HTTP/2. Если shared-хостинг не справляется — переходите на VPS. Включите Gzip/Brotli-сжатие.
Инструменты диагностики
- PageSpeed Insights — pagespeed.web.dev — основной инструмент от Google
- GTmetrix — gtmetrix.com — детальный водопадный анализ загрузки
- WebPageTest — webpagetest.org — тестирование из разных точек мира
- Chrome DevTools → Lighthouse — встроенный аудит в браузере
- Chrome DevTools → Network — анализ каждого запроса
Чек-лист оптимизации PageSpeed
- Изображения в WebP, сжаты, с lazy loading
- CSS и JS минифицированы
- Критичный CSS инлайнится в head
- Серверное кэширование включено
- Браузерное кэширование настроено
- Gzip/Brotli-сжатие активно
- Шрифты оптимизированы
- PHP обновлён до 8.x
- Неиспользуемые плагины удалены
- CDN подключен (для высокого трафика)
Хотите ускорить свой сайт? Обратитесь к нам — проведём аудит скорости и оптимизируем до 90+ баллов.
Какой балл PageSpeed считается нормальным?
Для мобильной версии 70+ — хороший результат, 90+ — отличный. Для десктопа 90+ — норма. Важно: не гонитесь за 100 баллами ценой функциональности. Лучше 85 баллов с рабочим сайтом, чем 100 без аналитики и интерактивных элементов.
PageSpeed показывает разные результаты — почему?
PageSpeed тестирует сайт с реального сервера Google. Результаты зависят от текущей загрузки вашего сервера, расположения тестового центра, кэширования. Проведите 3–5 тестов и ориентируйтесь на среднее значение.
Влияет ли скорость загрузки на позиции в Яндексе?
Да. Яндекс учитывает скорость загрузки как фактор ранжирования. В Яндекс.Вебмастере есть раздел «Диагностика → Скорость сайта» с рекомендациями по оптимизации.