TryQuickToolBox

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

Web2026-11-07TryQuickToolBox

Почему Core Web Vitals важны для вашего сайта

Вы, вероятно, слышали о Core Web Vitals (CWV) — метриках Google для оценки пользовательского опыта. Но если ваш сайт кажется медленным или подтормаживает, вы не одиноки. Многие разработчики испытывают трудности с преобразованием оценок CWV в конкретные исправления. Это руководство проведет вас через процесс измерения и улучшения каждой метрики с практическими шагами и фрагментами кода.

Core Web Vitals — это три конкретные метрики: Largest Contentful Paint (LCP) для производительности загрузки, First Input Delay (FID) для интерактивности и Cumulative Layout Shift (CLS) для визуальной стабильности. Google использует их в качестве сигналов ранжирования, поэтому их оптимизация приносит пользу как пользователям, так и SEO.

Понимание трех Core Web Vitals

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

Метрика Что измеряет Хорошо Требует улучшения Плохо
LCP Производительность загрузки ≤ 2.5с 2.5с – 4.0с > 4.0с
FID Интерактивность ≤ 100мс 100мс – 300мс > 300мс
CLS Визуальная стабильность ≤ 0.1 0.1 – 0.25 > 0.25

Примечание: FID заменяется на Interaction to Next Paint (INP) в марте 2024 года, но принципы оптимизации аналогичны. Здесь мы сосредоточимся на FID, так как он все еще широко упоминается.

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

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

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

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

Чтобы собирать полевые данные, подключите библиотеку web-vitals и отправляйте метрики в конечную точку аналитики:

<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';

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

onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>

Это дает вам реальные данные для дополнения лабораторных тестов.

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

LCP измеряет, когда самый большой элемент контента (изображение, текстовый блок или видео) становится видимым. Чтобы улучшить его, сосредоточьтесь на времени ответа сервера, загрузке ресурсов и ресурсах, блокирующих рендеринг.

1. Оптимизируйте время ответа сервера

2. Оптимизируйте изображения

Для быстрого сжатия изображений попробуйте наш Image Compressor.

3. Устраните ресурсы, блокирующие рендеринг

4. Предзагружайте важные ресурсы

Используйте <link rel="preload"> для ключевых ресурсов, таких как шрифты или главные изображения:

<link rel="preload" href="/hero.webp" as="image">

Улучшение First Input Delay (FID)

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

1. Разбивайте длительные задачи

Разделите длительный JavaScript на более мелкие части с помощью setTimeout или requestIdleCallback. Например:

function processItems(items) {
  if (items.length === 0) return;
  const item = items.pop();
  // Process item
  setTimeout(() => processItems(items), 0);
}

2. Оптимизируйте обработчики событий

3. Сократите время выполнения JavaScript

4. Используйте Web Workers для тяжелых задач

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

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* handle result */ };

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

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

1. Всегда указывайте ширину и высоту для медиа

Включайте атрибуты width и height для изображений и видео или используйте CSS aspect-ratio:

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

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

Для рекламы или встраиваемых элементов зарезервируйте место с помощью элемента-заполнителя или установите фиксированный размер.

3. Избегайте вставки контента над существующим контентом

Если вам нужно вставить баннер, используйте анимацию трансформации или наложение, которое не сдвигает макет.

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

Предотвратите невидимый текст и сдвиги макета из-за веб-шрифтов:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Мониторинг и непрерывное улучшение

Оптимизация Core Web Vitals — это не разовая задача. Настройте непрерывный мониторинг с помощью таких инструментов, как:

Регулярно просматривайте полевые данные и повторяйте исправления. В первую очередь сосредоточьтесь на метрике с наихудшей оценкой.

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

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

Core Web Vitals — это набор метрик, которые Google использует для измерения пользовательского опыта: LCP (загрузка), FID (интерактивность) и CLS (визуальная стабильность).

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

Отслеживайте полевые данные непрерывно через Search Console или RUM. Запускайте лабораторные тесты после значительных изменений и как минимум ежемесячно.

Влияет ли улучшение Core Web Vitals на SEO?

Да, Core Web Vitals являются сигналом ранжирования. Лучшие оценки могут улучшить видимость в поиске и удовлетворенность пользователей.

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