Вопрос с собеседования · Frontend

Что такое Core Web Vitals и как их улучшить?

MiddleПроизводительность
Ещё спрашивают так:
  • Что такое LCP, INP и CLS?
  • Как ускорить загрузку страницы?
Коротко

Три метрики Google, измеряемые на реальных пользователях: LCP — когда отрисован главный элемент (хорошо ≤ 2,5 с), INP — задержка реакции на действия пользователя (≤ 200 мс), CLS — сдвиги вёрстки при загрузке (≤ 0,1). LCP улучшают быстрым ответом сервера, приоритетом главной картинки и меньшим блокирующим JS/CSS; INP — дроблением долгих задач и лёгкими обработчиками; CLS — явными размерами картинок и зарезервированным местом под динамический контент.

  • Оценивается 75-й перцентиль пользователей, а не среднее
  • Lighthouse — лабораторный замер; правду показывают данные реальных пользователей (CrUX, web-vitals)
  • Метрики влияют на ранжирование в поиске Google

А ещё INP заменил FID в 2024 году: учитывается задержка всех взаимодействий, а не только первого

Подробно

LCP (Largest Contentful Paint):

  • ответ сервера: кэш, CDN, SSR или статическая генерация;
  • главная картинка: fetchpriority="high", без loading="lazy", современный формат, правильный размер;
  • меньше блокирующего CSS и JS на критическом пути, предзагрузка шрифтов.

INP (Interaction to Next Paint):

  • долгие задачи (> 50 мс) дробить, отдавать управление браузеру;
  • тяжёлые вычисления — в Web Worker;
  • не перерисовывать большие деревья на каждый ввод (React: useTransition, мемоизация, виртуализация);
  • меньше стороннего JS.

CLS (Cumulative Layout Shift):

  • width/height или aspect-ratio у картинок и видео;
  • место под рекламу, баннеры, подгружаемые блоки;
  • font-display и подбор запасного шрифта по метрикам.

Что хотят услышать

  • Что измеряет каждая метрика и пороги.
  • Конкретные способы улучшения каждой.
  • Разница лабораторных и полевых данных.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗CLS измеряет время ответа сервера, LCP — число запросов на странице
  • ✗Core Web Vitals меряются только в Lighthouse на машине разработчика, а не у реальных пользователей
  • ✗INP — размер JavaScript-бандла, CLS — время до первого байта
  • ✓LCP — главный контент, INP — отклик на действия, CLS — сдвиги вёрстки; по реальным пользователям

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования