Что такое Page Speed
Page Speed (скорость страницы) — общий термин для обозначения времени загрузки веб-страницы и её отдельных компонентов. Включает несколько метрик: Time to First Byte (TTFB), First Contentful Paint (FCP), Largest Contentful Paint (LCP) и другие.
Google включил скорость загрузки в алгоритм ранжирования ещё в 2010 году для десктопа, и в 2018 году — для мобильных устройств (Speed Update). В 2021 году Core Web Vitals — более конкретные метрики скорости — стали официальными факторами ранжирования.
Зачем важна Page Speed
SEO-ранжирование: медленные сайты получают пониженные позиции при прочих равных условиях.
Конверсия: по данным Google, каждые 0.1 секунды задержки снижают конверсию на 1%. Amazon: 100 мс задержки = -1% продаж.
Поведенческие факторы: 53% мобильных пользователей покидают сайт если загрузка занимает более 3 секунд.
Индексирование: быстрые сайты получают больший краулинговый бюджет — поисковик успевает проиндексировать больше страниц.
Ключевые метрики скорости
| Метрика | Хорошо | Описание |
|---|---|---|
| TTFB | до 800 мс | Время до первого байта от сервера |
| FCP | до 1.8 с | Первый контентный элемент |
| LCP | до 2.5 с | Крупнейший видимый элемент |
| TBT | до 200 мс | Блокировка основного потока |
| CLS | до 0.1 | Визуальная стабильность |
Как улучшить скорость страницы
Оптимизация изображений
Изображения — главная причина медленной загрузки:
<!-- Ленивая загрузка -->
<img src="photo.jpg" loading="lazy" alt="Описание" width="800" height="600" />
<!-- Современные форматы -->
<picture>
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="Описание" />
</picture>
- Используйте WebP или AVIF (20-50% меньше чем JPEG)
- Указывайте width и height для предотвращения CLS
- Lazy loading для изображений ниже fold
Кеширование
# Nginx — кеш статики на год
location ~* \.(js|css|png|jpg|ico|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Минификация ресурсов
# Минификация CSS и JS уменьшает размер на 15-30%
npm run build # Next.js минифицирует автоматически
CDN (Content Delivery Network)
CDN раздаёт статические ресурсы с серверов близких к пользователю. Cloudflare, Fastly, StackPath снижают время загрузки на 30-70% для геодистрибутированных пользователей.
Сжатие данных
# Gzip
gzip on;
gzip_types text/css application/javascript application/json;
# Brotli (лучше Gzip)
brotli on;
brotli_types text/css application/javascript;
Критический CSS
<!-- Встраиваем критический CSS в head -->
<style>
/* Только то что нужно для первого экрана */
body { font-family: sans-serif; margin: 0; }
header { background: #333; color: white; }
</style>
<!-- Остальной CSS загружаем асинхронно -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
Проверка скорости на reChecker
Используйте Полную проверку сайта для комплексного анализа производительности. Инструмент покажет:
- Core Web Vitals (LCP, INP, CLS)
- Время ответа сервера (TTFB)
- Размер страницы и количество запросов
- Рекомендации по оптимизации
FAQ
PageSpeed Insights и реальные данные — одно и то же? Нет. PageSpeed Insights показывает два набора данных: лабораторные (Lighthouse, контролируемые условия) и полевые (CrUX, реальные пользователи за 28 дней). Для SEO важны полевые данные.
Минимальный балл PageSpeed для хорошего SEO? Google не раскрывает пороговые значения. Ориентир: 75+ для мобильных и 85+ для десктопа. Но важнее конкретные метрики CWV (LCP, INP, CLS), а не общий балл.
Сколько времени занимает улучшение скорости? Базовые оптимизации (сжатие, кеш, форматы изображений) дают результат сразу после деплоя. Поисковик учтёт улучшения через 28 дней (цикл обновления данных CrUX).