TryQuickToolBox

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

Web2026-11-05TryQuickToolBox

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

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

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

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

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

Вы можете измерять CWV двумя способами: в лаборатории (синтетическое тестирование) и в полевых условиях (мониторинг реальных пользователей). Оба полезны, но Google использует для ранжирования полевые данные.

Полевые данные: мониторинг реальных пользователей (RUM)

Полевые данные поступают от реальных пользователей. Лучший источник — Chrome User Experience Report (CrUX), который лежит в основе отчёта Core Web Vitals в Google Search Console. Вы также можете использовать библиотеку web-vitals, чтобы собирать собственные RUM-данные и отправлять их в аналитическую конечную точку.

Чтобы просмотреть данные CrUX для вашего сайта, используйте PageSpeed Insights или CrUX API. Они показывают распределение LCP, INP и CLS для вашего источника.

Лабораторные данные: синтетическое тестирование

Лабораторные инструменты имитируют загрузку страницы в контролируемой среде. Они отлично подходят для отладки и интеграции в CI/CD. Популярные варианты:

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

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

LCP обычно является наиболее важной метрикой для исправления. Самый крупный элемент часто представляет собой главное изображение, заголовок или постер видео. Чтобы улучшить LCP:

  1. Оптимизируйте изображения: сжимайте изображения, используйте современные форматы, такие как WebP или AVIF, и предоставляйте адаптивные размеры с помощью srcset. Инструменты, такие как Image Compressor, могут помочь уменьшить размер файла без потери качества.
  2. Предзагрузите ресурс LCP: добавьте <link rel="preload"> для главного изображения или шрифта, чтобы начать загрузку раньше.
  3. Устраните ресурсы, блокирующие рендеринг: встройте критический CSS, отложите некритический CSS и загружайте JavaScript асинхронно.
  4. Используйте CDN: обслуживайте ресурсы из сети доставки контента, чтобы снизить задержку.
  5. Агрессивно кэшируйте: устанавливайте длительные сроки кэширования для статических ресурсов с помощью заголовков Cache-Control.

Пример предзагрузки изображения LCP:

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

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

INP измеряет, насколько быстро страница реагирует на ввод пользователя. Высокий INP часто возникает из-за длительных задач JavaScript, блокирующих основной поток. Чтобы улучшить INP:

Вы можете измерить INP в полевых условиях с помощью библиотеки web-vitals:

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // Отправить в вашу аналитическую конечную точку
});

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

CLS возникает, когда элементы неожиданно смещаются во время загрузки. Распространённые причины: изображения без размеров, реклама, встраиваемые элементы и веб-шрифты, вызывающие FOIT/FOUT. Чтобы улучшить CLS:

Пример резервирования места с помощью CSS aspect-ratio:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-container iframe {
  width: 100%;
  height: 100%;
}

Инструменты и рабочий процесс для непрерывного мониторинга

Улучшение CWV — это не разовая задача. Настройте непрерывный мониторинг:

Для быстрой проверки используйте инструмент HTML to Image, чтобы делать визуальные снимки вашей страницы на разных этапах, помогая вручную обнаруживать сдвиги макета.

Часто задаваемые вопросы

Каковы текущие пороговые значения Core Web Vitals?

Хорошо: LCP ≤ 2,5 с, INP ≤ 200 мс, CLS ≤ 0,1. Требует улучшения: LCP ≤ 4 с, INP ≤ 500 мс, CLS ≤ 0,25. Плохо: выше этих значений.

Как часто обновляются данные CrUX?

Данные CrUX обновляются ежедневно, но 28-дневное скользящее окно означает, что изменения требуют времени для отражения. Для более быстрой обратной связи используйте собственный RUM.

Можно ли улучшить Core Web Vitals без изменения дизайна?

Да. Многие улучшения носят технический характер: сжатие изображений, предзагрузка, отложенная загрузка скриптов и резервирование места. Они часто не влияют на внешний вид.

Готовы оптимизировать изображения для лучшего LCP? Попробуйте наш бесплатный Image Compressor, чтобы уменьшить размеры файлов, сохраняя качество.