Ускорение сайта: как улучшить Core Web Vitals

Каким бы красивым ни был сайт, если он грузится медленно, большинство посетителей уходят. По данным Google, 53% пользователей покидают сайт, загружающийся дольше 3 секунд, а скорость — прямой фактор ранжирования. В этом руководстве понятно объясняем Core Web Vitals и техники, которые реально работают.

Что такое Core Web Vitals?

Три ключевые метрики пользовательского опыта, которые Google представил в 2020 году и учитывает в ранжировании с 2021 года. Они основаны на данных реальных пользователей.

1. LCP — Largest Contentful Paint

Время появления самого крупного видимого элемента (обычно главного изображения или заголовка).

• Хорошо: до 2,5 секунды
• Требует улучшения: 2,5–4 секунды
• Плохо: более 4 секунд

Главные факторы: тяжёлые изображения, медленный сервер и блокирующие JavaScript/CSS.

2. INP — Interaction to Next Paint

Скорость реакции страницы на действия (клик, касание, ввод). В 2024 году заменил FID.

• Хорошо: до 200 мс
• Требует улучшения: 200–500 мс
• Плохо: более 500 мс

Ухудшают его длинные задачи JavaScript, тяжёлые сторонние скрипты и неэффективные обработчики событий.

3. CLS — Cumulative Layout Shift

Показывает, насколько «прыгают» элементы при загрузке.

• Хорошо: до 0,1
• Требует улучшения: 0,1–0,25
• Плохо: более 0,25

Причины: изображения без размеров, динамически вставляемый контент и поздно загружаемая реклама.

Где измерять

Google PageSpeed Insights — лабораторные и реальные данные (CrUX), бесплатно.

Google Search Console → отчёт Core Web Vitals — реальный опыт по группам URL.

WebPageTest — водопадные диаграммы, видео, многошаговые тесты.

Chrome DevTools → Lighthouse — мгновенные замеры при локальной разработке.

Как улучшить LCP

Современные форматы изображений

Перевод JPEG и PNG в WebP или AVIF обычно уменьшает вес на 30–50%.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

В Next.js компонент <Image> делает это автоматически.

Предзагрузка главного изображения

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

Сокращение времени ответа сервера (TTFB)

• Статическая генерация (SSG) или ISR вместо рендеринга на каждый запрос
• CDN, чтобы контент отдавался с ближайшего сервера
• VPS или облако, если ресурсов не хватает

Критический CSS в HTML

Встраивание стилей первого экрана в HTML ускоряет отрисовку; Critical или Critters автоматизируют это.

Как улучшить INP: меньше JavaScript

Дробите длинные задачи

Задачи дольше 50 мс блокируют взаимодействие. Делите работу через setTimeout(..., 0) или scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // Каждые 50 элементов даём основному потоку передышку if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

Убирайте лишние сторонние скрипты

Чаты, рекламные сети, аналитика и соцкнопки дорого обходятся INP. Регулярно проверяйте Google Tag Manager.

Разделение кода в React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>Загрузка…</div>, }); ``

Как свести CLS к нулю

Указывайте размеры изображений

``html <img src="product.jpg" alt="Фото товара" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

Избегайте FOUT/FOIT со шрифтами

Используйте font-display: optional или swap и предзагружайте шрифты:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

Заглушки для динамического контента

``css .content-area { min-height: 120px; / резервирует место до загрузки / } ``

Автоматические оптимизации в Next.js

На сайте на Next.js это работает «из коробки»:

| Возможность | Что даёт | |---|---| | Компонент <Image> | Автоматически WebP/AVIF, lazy loading, размеры | | <Script strategy="lazyOnload"> | Откладывает некритичные скрипты | | Статическая генерация (SSG) | Минимизирует TTFB | | Оптимизация шрифтов | Самостоятельный хостинг, стратегия swap | | Автоматическое разделение кода | Каждая страница грузит только свой JS |

Об этом мы также писали в статье о стоимости корпоративного сайта.

С чего начать

1. Оптимизация изображений — на многих сайтах сама по себе улучшает LCP на 30–40%.

2. Удаление неиспользуемого JavaScript — инструмент Coverage в Chrome DevTools.

3. Меньше блокирующих ресурсов — async/defer или критический CSS в HTML.

4. Проверка сервера — на виртуальном хостинге при TTFB выше 800 мс стоит сменить хостинг.

5. Аудит сторонних скриптов — раздел «Сторонний код» в PageSpeed Insights.

Вывод: скорость — необходимость

Работа над Core Web Vitals — обязательная основа для позиций, удовлетворённости и конверсии. Относитесь к ней как к постоянному циклу измерений и улучшений.

Хотите узнать состояние Core Web Vitals вашего сайта или заказать профессиональную оптимизацию? Свяжитесь с нами — проведём бесплатный предварительный анализ.