Когда говорят о производительности сайта, часто вспоминают время загрузки или размер бандла. Но это технические метрики. Они не всегда отражают то, что чувствует пользователь. Web Vitals измеряют именно пользовательский опыт: как быстро появляется контент, как быстро сайт реагирует на действия, насколько стабильна вёрстка.

Web Vitals - это набор ключевых метрик, которые Google использует для оценки пользовательского опыта. Они показывают не то, что происходит под капотом, а то, что видит и чувствует человек, который открыл сайт. Разница принципиальная: можно иметь быстрый сервер, но медленный рендеринг, или маленький бандл, но долгие вычисления.

❗️LCP (largest contentful paint) - когда появляется самый крупный контент. Это не первая отрисовка, а момент, когда пользователь видит основное содержимое страницы. Если LCP больше 2.5 секунды, пользователь уже ждёт и начинает думать, что что-то не так. Хорошее значение - до 2.5 секунды. Проблема часто не в сервере, а в том, что крупное изображение или блок контента загружается слишком долго, или JavaScript блокирует рендеринг.

❗️INP (interaction to next paint) - задержка между действием пользователя и визуальным откликом. Это не первое взаимодействие, а средняя задержка по всем взаимодействиям. Если INP больше 200 миллисекунд, интерфейс кажется вялым. Пользователь кликает, а ничего не происходит - это именно то, что измеряет INP. Хорошее значение - до 200 миллисекунд. Проблема часто в том, что обработчики событий выполняются слишком долго, или JavaScript блокирует основной поток.

❗️CLS (cumulative layout shift) - насколько «прыгает» вёрстка при загрузке. Это не одно смещение, а сумма всех смещений элементов. Если CLS больше 0.1, пользователь видит, как контент «дергается» - изображения появляются и сдвигают текст, реклама вставляется и меняет расположение элементов. Хорошее значение - до 0.1. Проблема часто в том, что не указаны размеры изображений, или контент вставляется динамически без резервирования места.

Есть и другие метрики, которые дополняют картину. FCP (first contentful paint) - когда появляется первый контент, даже если это не основной. TTFB (time to first byte) - время ответа сервера. TBT (total blocking time) - сколько времени поток был заблокирован JavaScript. Но Core Web Vitals - это именно LCP, INP и CLS, потому что они напрямую связаны с тем, что видит и чувствует пользователь.

❕Эти метрики измеряют не техническую скорость, а воспринимаемую. Можно оптимизировать сервер и уменьшить бандл, но если крупный контент появляется поздно, интерфейс не реагирует на клики, а вёрстка прыгает - пользователь всё равно будет считать сайт медленным. Web Vitals как раз про это ощущение ❕

И ещё один момент ☝️

Показатели сильно зависят от условий. На локальном хосте с быстрым соединением и мощным устройством метрики могут быть отличными, а в проде из разных точек мира, на разных устройствах и с разным качеством сети - совсем другими. Синтетические тесты в DevTools показывают одну картину, реальные пользователи видят другую. Поэтому и нужен комплексный анализ: синтетические измерения для разработки плюс реальные данные от пользователей, чтобы понимать ситуацию вживую.

Когда мы смотрим на LCP, INP и CLS, мы видим то же самое, что видит человек, который открыл сайт. Но когда пишем в резюме про улучшение показателей, стоит задуматься: где именно смотрели? В DevTools на локальном хосте? А что конкретно измеряли и в каких условиях? Тема сложнее, чем кажется на первый взгляд. #performance #оптимизация #браузер #сайт