Веб-производительность (Core Web Vitals)

Что это такое

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

Почему это важно

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

Что в этом треке

Показатели Core Web Vitals (02-frontend/26-web-performance-core-web-vitals/01-the-core-web-vitals) — что измеряет каждый показатель, его порог и что обычно мешает его выдержать.
Измерение и диагностика (02-frontend/26-web-performance-core-web-vitals/02-measuring-and-diagnosing) — лабораторные и полевые инструменты и то, как найти конкретную причину, а не гадать.

Предварительные требования

JavaScript (02-frontend/06-javascript)
Каскадные таблицы стилей (CSS) (02-frontend/05-css)

Что читать дальше

Lighthouse (02-frontend/31-lighthouse) — инструмент, который прогоняет лабораторный аудит и выдаёт отчёт для чтения.
Инструменты разработчика в браузере (02-frontend/27-browser-devtools) — здесь находится конкретный медленный запрос или долгая задача.
Адаптивные изображения (02-frontend/07-responsive-images) — самая частая причина плохого largest-contentful-paint.