Производительность веба
Core Web Vitals, lab и field-данные, частые причины и их решения.
Обновлено
Что такое производительность веба
Производительность — это как быстро пользователь видит контент, как быстро страница реагирует на его действия и насколько стабилен макет. Это важно напрямую: каждая лишняя секунда загрузки теряет пользователей и понижает позицию в Google.
Оптимизируют не «на глаз». Сначала измеряют, находят причину, затем исправляют — именно в таком порядке.
Что измерять: Core Web Vitals
| Метрика | Вопрос | Хорошо | Плохо |
|---|---|---|---|
| LCP — Largest Contentful Paint | сколько ждать главный элемент (hero-картинку, заголовок)? | ≤ 2.5 с | > 4 с |
| INP — Interaction to Next Paint | как быстро страница реагирует на клик / клавишу? | ≤ 200 мс | > 500 мс |
| CLS — Cumulative Layout Shift | насколько «прыгает» контент при загрузке? | ≤ 0.1 | > 0.25 |
Между ними — зона «needs improvement». Шаги отрисовки описаны в уроке Как браузер отрисовывает страницу.
Где измерять
| Тип | Инструменты | Что показывает |
|---|---|---|
| lab (симуляция) | Lighthouse, DevTools → Performance | воспроизводимые результаты на вашей машине — для отладки |
| field (реальные пользователи) | Vercel Speed Insights, CrUX, PageSpeed Insights | что чувствуют реальные люди на своих телефонах — именно это важно |
Частые причины и решения
Высокий LCP
| Причина | Решение |
|---|---|
| большая hero-картинка грузится поздно | next/image с priority (или fetchpriority="high"), AVIF/WebP, правильный размер — см. Оптимизация изображений |
| медленный сервер | кэш ('use cache', CDN), статическая / PPR-страница |
| шрифты блокируют текст | next/font (self-hosted, font-display: swap) |
| много JS до контента | Server Components, контент рендерится на сервере |
Высокий INP
| Причина | Решение |
|---|---|
| тяжёлый JS блокирует поток при клике | разделить работу, перенести вычисления на сервер или в Web Worker |
| большие перерисовки в React | см. Производительность в React, useTransition |
| огромный бандл | code splitting, next/dynamic, меньше библиотек |
Высокий CLS
| Причина | Решение |
|---|---|
| изображения без размеров | width + height (или aspect-ratio) — браузер резервирует место |
| шрифты меняют размер текста | next/font (автоматически подстраивает запасной шрифт) |
| баннеры / реклама вставляются над контентом | заранее зарезервированное место |
| скелетон другого размера, чем контент | скелетон тех же размеров |
Правила с наибольшим эффектом
- Отправляйте меньше JavaScript — Server Components по умолчанию,
'use client'как можно ниже. - Изображения: размеры, современный формат,
lazyниже первого экрана,priorityдля главного. - Кэшируйте всё, что можно: CDN,
'use cache', ассеты с хэшем. - Измеряйте на телефоне, а не на своём рабочем ноутбуке.
Коротко
- LCP (загрузка), INP (отзывчивость), CLS (стабильность) — с чёткими порогами.
- Lab — для отладки, field — для реальности.
- Меньше JS, правильные изображения, кэш, зарезервированные размеры.