Как создать быстрый сайт: измеримый подход
Как улучшить Core Web Vitals без потери визуального качества — измерения, бюджеты и правильная стратегия рендеринга.
Скорость — это не функция, а бюджет. Фраза «давайте ускорим сайт» сама по себе ничего не значит: пока не определено, что именно измеряется, на каком устройстве и при каком соединении, любое улучшение остаётся догадкой.
Сначала измеряй, потом оптимизируй
Оценка Lighthouse — это отправная точка, а не цель. Без данных реальных пользователей (RUM) лабораторные измерения могут вводить в заблуждение. Три метрики, которые мы отслеживаем:
- LCP (Largest Contentful Paint) — когда появился основной контент
- INP (Interaction to Next Paint) — скорость отклика на действия пользователя
- CLS (Cumulative Layout Shift) — насколько «прыгала» вёрстка
Целевые значения: меньше 2,5 с, 200 мс и 0,1 соответственно.
Задайте бюджет производительности
Решите заранее, насколько «тяжёлой» может быть страница. Пример бюджета:
| Ресурс | Бюджет |
|---|---|
| JavaScript (gzip) | 150 КБ |
| Изображения (первый экран) | 200 КБ |
| Веб-шрифты | 2 семейства, 100 КБ |
| Итого первая загрузка | 500 КБ |
Когда бюджет превышен, вместо добавления новой функции нужно что-то убрать. Без этого правила любой проект со временем замедляется.
Выберите правильную стратегию рендеринга
В Next.js разные страницы одного сайта могут использовать разные стратегии:
// Маркетинговая страница — генерируется при сборке, отдаётся с CDN
export const dynamic = 'force-static'
// Статья блога — генерируется при сборке, пересобирается при изменении контента
export const revalidate = false // + on-demand revalidatePath()
// Панель управления — свежая при каждом запросе
export const dynamic = 'force-dynamic'Правило простое: любая страница, которая не обращается к базе данных, должна быть статической. Это одновременно снижает и задержку, и стоимость инфраструктуры.
Наибольший выигрыш — на изображениях
На большинстве сайтов изображения составляют 60% общего веса. Обычно достаточно трёх шагов:
- Современный формат (WebP или AVIF)
- Правильный размер — не вставляйте изображение шириной 2000px в блок на 400px
loading="lazy"для всего, что вне первого экрана
Вывод
Скорость — это не разовая оптимизация, а бюджет, который постоянно приходится защищать. Измеряйте, устанавливайте границы и убирайте лишнее при их превышении. Быть быстрым без потери визуального качества возможно — но только если вы знаете, что измеряете.