Скорость — это деньги, и это не метафора
Amazon когда-то посчитал: каждые 100 мс задержки загрузки стоят 1% продаж. Google установил прямую связь между скоростью страниц и позициями в поиске. Исследования показывают: пользователи покидают сайт, если он не загрузился за 3 секунды, — и это на мобильных. В 2026 году медленный сайт — это не только плохой UX, это прямая потеря органического трафика и конверсии.
Что такое Core Web Vitals
Core Web Vitals — набор метрик от Google, оценивающих реальный пользовательский опыт загрузки страницы. С 2021 года они официально влияют на ранжирование в поиске.
LCP (Largest Contentful Paint)
Время отрисовки самого крупного видимого элемента на странице (обычно hero-изображение или заголовок). Хорошее значение — до 2.5 секунды. Основные проблемы: неоптимизированные изображения, медленный сервер, блокирующий рендеринг CSS/JS.
INP (Interaction to Next Paint)
Реакция страницы на действия пользователя: клик, нажатие клавиши. Заменил FID в 2024 году. Хорошее значение — до 200ms. Проблемы: тяжёлый JavaScript, блокирующий main thread.
CLS (Cumulative Layout Shift)
Насколько элементы «прыгают» по странице во время загрузки. Хорошее значение — до 0.1. Типичные причины: изображения без указанных размеров, динамически подгружаемый контент без резервирования места, веб-шрифты без fallback.
Как улучшить Core Web Vitals
Изображения
Самое большое влияние на LCP. Обязательно: формат WebP или AVIF вместо JPEG/PNG (30–50% экономии), атрибуты width и height для всех изображений (предотвращает CLS), lazy loading для изображений ниже линии сгиба, preload для hero-изображения.
JavaScript
Уменьшить размер JS-бандла: Code Splitting (загружать только то, что нужно на текущей странице), Tree Shaking (убрать неиспользуемый код), минификация. Переносить тяжёлые вычисления в Web Workers. Defer/async для некритического JS.
Сервер и кэширование
Time to First Byte (TTFB) — базовая метрика скорости сервера. CDN для статических ресурсов, HTTP/2 или HTTP/3, агрессивное кэширование статики (Cache-Control: max-age=31536000 для hashed assets), сжатие Gzip или Brotli.
Шрифты
Веб-шрифты часто блокируют рендеринг текста. Решение: font-display: swap, preconnect к CDN шрифтов, использование system fonts или self-hosted шрифтов с предварительной загрузкой.
Инструменты для измерения и анализа
- Google PageSpeed Insights — даёт оценку и конкретные рекомендации для реальных пользователей из CrUX.
- Google Search Console — раздел Core Web Vitals показывает проблемные страницы по реальным данным.
- WebPageTest — детальный waterfall-анализ загрузки с множеством параметров.
- Lighthouse — встроен в Chrome DevTools, удобен для локального анализа.
Вывод
Оптимизация скорости — это не разовая задача, а постоянный процесс. Но первый шаг — аудит текущего состояния через PageSpeed Insights и Search Console. Даже простые правки: оптимизация изображений, добавление CDN и правильный размер изображений — могут дать ощутимый прирост LCP и CLS за один спринт.