Основные веб-показатели: LCP, FID и CLS
Разберитесь, что измеряют Largest Contentful Paint, First Input Delay и Cumulative Layout Shift и почему Google использует их как сигналы ранжирования.
«Основные веб-показатели: LCP, FID и CLS» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Почему важна производительность
Медленные страницы приводят к потере пользователей. Google сделал производительность фактором ранжирования: сайты с низкими показателями основных веб-метрик занимают более низкие позиции в результатах поиска. Помимо оптимизации для поисковых систем, каждые 100 мс задержки заметно снижают конверсию и вовлечённость.
Три основных показателя веб-производительности
Google измеряет три показателя пользовательского опыта: LCP (скорость загрузки), FID (интерактивность) и CLS (визуальная стабильность). Для каждого существуют пороги «Хорошо», «Требуется улучшение» и «Плохо».
Largest Contentful Paint (LCP)
LCP измеряет момент, когда крупнейший видимый элемент содержимого (изображение, постер видео или текстовый блок) завершает отрисовку. Хороший результат: менее 2,5 с. Плохой результат: более 4 с. Оптимизируйте показатель, предварительно загружая главные изображения, уменьшая количество ресурсов, блокирующих отрисовку, и используя быстрый CDN.
First Input Delay (FID) и INP
FID измеряет задержку между первым взаимодействием пользователя (щелчком или касанием) и ответом браузера. Хороший результат: менее 100 мс. В 2024 году FID заменил показатель времени от взаимодействия до следующей отрисовки (INP), который измеряет все взаимодействия, а не только первое.
Совокупное смещение макета (CLS)
CLS измеряет неожиданные смещения макета во время загрузки страницы. Хороший показатель: менее 0,1. Плохой: более 0,25. Причиной могут быть изображения без указанных размеров, шрифты, загружающиеся с задержкой, и рекламные блоки, добавленные после первой отрисовки.
Измерение CWV в браузере
Используйте пакет npm web-vitals, чтобы собирать метрики реальных пользователей и отправлять их в конечную точку аналитики.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Исправление LCP: предварительная загрузка главного изображения
Укажите браузеру загрузить главное изображение заранее, до разбора остального HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Исправление CLS: резервирование места
Всегда задавайте width и height для изображений и встраиваемых элементов, чтобы браузер зарезервировал место до загрузки ресурса. Используйте CSS-свойство aspect-ratio для адаптивных контейнеров.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Исправление INP: разделение длительных задач
Длительные задачи JavaScript блокируют главный поток и задерживают реакцию на нажатия. Разбивайте работу на части с помощью scheduler.yield() или setTimeout, чтобы браузер мог отрисовывать содержимое и реагировать на ввод.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Лабораторные и полевые данные
Лабораторные данные (Lighthouse) — это синтетическая проверка в контролируемой среде. Полевые данные (CrUX, RUM) собираются у реальных пользователей на реальных устройствах. Полевые данные служат источником истины для ранжирования в поиске.
Бюджеты производительности
Задавайте явные ограничения: например, LCP менее 2 с, пакет JavaScript менее 200 КБ. Контролируйте их в CI с помощью Lighthouse CI или @bundle-analyzer, чтобы сборки завершались с ошибкой при ухудшении производительности.
Быстрая проверка
Какой показатель Core Web Vitals измеряет неожиданные визуальные скачки во время загрузки страницы?
Итоги: Core Web Vitals
LCP: скорость загрузки самого крупного элемента, целевое значение — менее 2,5 с. INP (ранее FID): отзывчивость, целевое значение — менее 200 мс. CLS: визуальная стабильность, целевое значение — менее 0,1. Измеряйте показатели с помощью пакета web-vitals в рабочей среде; используйте Lighthouse в CI. Для SEO важны полевые данные, а не лабораторные.
Часто задаваемые вопросы
Урок «Основные веб-показатели: LCP, FID и CLS» бесплатный?
Да — полный текст урока «Основные веб-показатели: LCP, FID и CLS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основные веб-показатели: LCP, FID и CLS»?
Разберитесь, что измеряют Largest Contentful Paint, First Input Delay и Cumulative Layout Shift и почему Google использует их как сигналы ранжирования. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Основные веб-показатели: LCP, FID и CLS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основные веб-показатели: LCP, FID и CLS
- Аудиты и оценка Lighthouse
- Оптимизация изображений: ленивая загрузка и формат WebP
- Разделение кода и ленивые маршруты