Скорость страницы (Page Speed): что это и как улучшить

Что такое 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).