TryQuickToolBox

Core Web Vitals: измеряем и улучшаем веб-производительность

Web2026-10-16TryQuickToolBox

Вы создали быстрый сайт, но пользователи все еще жалуются на медленную работу. Или, возможно, ваши позиции в SEO упали после обновления Google. Виноваты могут быть Core Web Vitals — набор метрик, которые Google использует для оценки реального пользовательского опыта. Игнорирование их может навредить как удовлетворенности пользователей, так и видимости в поиске.

В этом руководстве вы узнаете, что такое Core Web Vitals, как их точно измерять и какие практические шаги предпринять для улучшения каждой метрики. Мы сосредоточимся на трех текущих метриках: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) и Cumulative Layout Shift (CLS).

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

Core Web Vitals — это подмножество Web Vitals, которые Google считает важными для обеспечения отличного пользовательского опыта. Они количественно оценивают, как быстро загружается контент, насколько отзывчива страница на взаимодействия и насколько она визуально стабильна.

Google использует эти метрики как сигнал ранжирования, но что важнее, они отражают реальные проблемы пользователей. Медленный LCP раздражает пользователей, ожидающих контент; высокий INP заставляет страницу казаться «тормозной»; высокий CLS вызывает ошибочные клики и раздражение.

Три основные метрики Core Web Vitals

Эти пороги основаны на полевых данных реальных пользователей, а не на лабораторных тестах. Google оценивает их на 75-м процентиле загрузок страниц, то есть 75% пользовательского опыта должны соответствовать порогу «хорошо».

Как измерять Core Web Vitals

Вам нужны как лабораторные, так и полевые данные. Лабораторные инструменты имитируют одну загрузку страницы в контролируемых условиях, в то время как полевые данные (Real User Monitoring, RUM) фиксируют реальный пользовательский опыт на разных устройствах и сетях.

Лабораторные инструменты

Полевые инструменты

Вот как использовать библиотеку web-vitals для вывода метрик в консоль:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Используйте navigator.sendBeacon() или fetch() для отправки данных
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
  fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Для быстрой проверки без программирования вы можете использовать онлайн-инструменты, которые анализируют данные о производительности. Например, если у вас есть логи сервера, Nginx Log Analyzer поможет выявить медленные ответы, которые могут влиять на LCP.

Улучшение Largest Contentful Paint (LCP)

LCP часто является наиболее важной метрикой для оптимизации. На него влияют время ответа сервера, время загрузки ресурсов и клиентский рендеринг.

Оптимизация ответа сервера

Оптимизация ресурсов

Устранение ресурсов, блокирующих рендеринг

CSS и JavaScript в <head> блокируют рендеринг. Встройте критический CSS и загружайте остальное асинхронно. Для JavaScript используйте defer или async.

Улучшение Interaction to Next Paint (INP)

INP измеряет время от взаимодействия пользователя до следующей отрисовки. На него влияют выполнение JavaScript, обработка событий и работа по рендерингу.

Сокращение времени выполнения JavaScript

Оптимизация обработки событий

Улучшение производительности рендеринга

Улучшение Cumulative Layout Shift (CLS)

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

Всегда указывайте атрибуты размера

Для изображений и видео задавайте атрибуты width и height или используйте CSS aspect-ratio. Это резервирует место и предотвращает сдвиги.

<img src="#" width="800" height="600" alt="Hero">

Резервируйте место для динамического контента

Используйте font-display swap

Пользовательские шрифты могут вызывать невидимый текст (FOIT) или сдвиги макета при загрузке. Используйте font-display: swap, чтобы сразу показывать запасной текст, и предзагружайте шрифты, чтобы сократить время подмены.

Собираем все вместе: практический рабочий процесс

  1. Измерьте: Начните с PageSpeed Insights, чтобы получить как лабораторные, так и полевые данные. Определите, какую метрику нужно улучшить.
  2. Диагностируйте: Используйте Lighthouse и панель Performance в Chrome DevTools, чтобы найти узкие места. Посмотрите на диаграмму водопада, активность главного потока и сдвиги макета.
  3. Оптимизируйте: Примените описанные выше методы, уделяя приоритет изменениям, влияющим на худшую метрику.
  4. Тестируйте: Повторно запустите лабораторные тесты, чтобы подтвердить улучшения. Разверните на промежуточной среде и используйте RUM для мониторинга полевых данных.
  5. Мониторьте: Настройте постоянный RUM с библиотекой web-vitals и оповещения о регрессиях. Используйте Search Console для отслеживания статуса Core Web Vitals.

Помните, что оптимизации могут иметь компромиссы. Например, ленивая загрузка изображений может улучшить начальную загрузку, но навредить LCP, если LCP-изображение загружается лениво. Всегда тестируйте с реальными пользователями.

FAQ

Каковы текущие пороги для Core Web Vitals?

Для LCP: хорошо — ≤2,5 с, требует улучшения — ≤4,0 с, плохо — >4,0 с. Для INP: хорошо — ≤200 мс, требует улучшения — ≤500 мс, плохо — >500 мс. Для CLS: хорошо — ≤0,1, требует улучшения — ≤0,25, плохо — >0,25. Эти пороги оцениваются на 75-м процентиле загрузок страниц.

Как часто нужно проверять Core Web Vitals?

Непрерывно мониторьте полевые данные с помощью RUM. Проверяйте Search Console ежемесячно для общих тенденций. Запускайте лабораторные тесты после значительных изменений кода или развертываний. Core Web Vitals могут меняться при обновлениях вашего сайта или сторонних скриптов.

Можно ли улучшить Core Web Vitals без разработчика?

Некоторые улучшения возможны с помощью плагинов или настроек (например, включение кэширования, оптимизация изображений). Однако значительные улучшения часто требуют изменений в коде, таких как встраивание критического CSS, отложенная загрузка JavaScript или реструктуризация загрузки ресурсов. Для INP и продвинутых оптимизаций LCP обычно нужна помощь разработчика.

Готовы проанализировать производительность вашего сервера? Попробуйте наш Nginx Log Analyzer, чтобы выявить медленные запросы, которые могут влиять на ваши Core Web Vitals.