TryQuickToolBox

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

Web2026-11-09TryQuickToolBox

Вы создали современное веб-приложение, но пользователи жалуются на медлительность. Поисковые рейтинги тоже могут пострадать. Core Web Vitals (CWV) — это метрики Google для оценки пользовательского опыта: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) и Cumulative Layout Shift (CLS). Это руководство покажет, как точно их измерять и эффективно улучшать.

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

Core Web Vitals — это три метрики, количественно оценивающие ключевые аспекты пользовательского опыта:

Эти метрики измеряются в полевых условиях (от реальных пользователей) и в лабораторных условиях (в контролируемой среде). Важны оба подхода.

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

Для диагностики проблем нужны как полевые, так и лабораторные данные.

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

Полевые данные отражают реальный опыт пользователей на разных устройствах и сетях. Используйте следующие источники:

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

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

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

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

Лабораторные инструменты имитируют загрузку в контролируемой среде, что делает их отличными для отладки и интеграции в CI.

Лучшая практика: используйте лабораторные данные для выявления исправлений, а полевые — для проверки их влияния.

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

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

  1. Оптимизируйте ресурс LCP: сжимайте изображения (используйте WebP/AVIF), предоставляйте адаптивные размеры с помощью srcset и предзагружайте изображение LCP, если оно критично.
  2. Устраните блокирующие рендеринг ресурсы: встраивайте критический CSS, откладывайте некритический CSS и JavaScript.
  3. Улучшите время ответа сервера (TTFB): используйте CDN, включите кэширование и оптимизируйте запросы к бэкенду.
  4. Сократите рендеринг на стороне клиента: для SPA рассмотрите серверный рендеринг (SSR) или статическую генерацию для начального представления.

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

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

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

INP измеряет задержку между взаимодействием пользователя и следующей отрисовкой. Длинные задачи и тяжёлый JavaScript — частые виновники.

  1. Разбивайте длинные задачи: используйте setTimeout, requestIdleCallback или API scheduler, чтобы уступить главному потоку.
  2. Оптимизируйте обработчики событий: применяйте debounce или throttle для дорогих обработчиков; избегайте layout thrashing.
  3. Сократите время выполнения JavaScript: разделяйте код, применяйте tree-shaking и откладывайте некритические скрипты.
  4. Используйте веб-воркеры для ресурсоёмких вычислений.

Пример: уступка главному потоку:

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // ... do some work
  await yieldToMain();
  // ... continue
}

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

CLS возникает, когда элементы неожиданно смещаются. Предотвратите это:

Пример: резервирование места для рекламы:

<div>
  <!-- ad loads here -->
</div>

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

Производительность — это не разовое исправление. Интегрируйте измерения в свой рабочий процесс:

Для быстрой проверки запустите свою страницу через PageSpeed Insights; он объединяет лабораторные и полевые данные.

FAQ

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

LCP: хорошо ≤2,5 с, требует улучшения ≤4 с, плохо >4 с. INP: хорошо ≤200 мс, требует улучшения ≤500 мс, плохо >500 мс. CLS: хорошо ≤0,1, требует улучшения ≤0,25, плохо >0,25.

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

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

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

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

Готовы проанализировать производительность вашего сайта? Используйте наш анализатор логов Nginx, чтобы выявить медленные ответы сервера, влияющие на TTFB и LCP.