Браузер и фронтенд-рантайм
Core Web Vitals: почини проваленную страницу статьи
Читать про фазы LCP и ловушку гидрации для INP — не то же самое, что вытащить реальную страницу из красного. Собери медиа-страницу статьи, которая проваливает все три vitals, инструментируй её полевым RUM, затем почини каждую по доминирующей фазе и части — доказывая каждый шаг измерениями.
Преврати ментальную модель юнита в воспроизводимый цикл: подключи web-vitals RUM с атрибуцией, читай доминирующую фазу/часть для каждой метрики, применяй точечный фикс, защищай выигрыши throttled CI-гейтом и проверяй числами до/после под реалистичным throttling.
Возьми server-rendered страницу статьи, которая проваливает LCP, INP и CLS (свою или описанный ниже стартер), и приведи все три под пороги good на симулированном p75 — LCP ≤2.5 с, INP ≤200 мс, CLS ≤0.1 — доказывая каждый шаг атрибутированными измерениями, а не оценками.
- Таблица до/после по всем трём метрикам: LCP (с разбиением на четыре фазы), INP (с разбиением на три части), CLS (с вкладчиками худшего session window) — измеренные под идентичным throttling, не оценки.
- Каждый фикс обоснован атрибуцией: ты называешь доминирующую фазу/часть, на которую он нацелен, и показываешь сжатие этой фазы/части в перемеренном RUM-логе (не предполагаешь).
- Все три метрики ложатся под пороги good на симулированном p75 — LCP ≤2.5 с, INP ≤200 мс, CLS ≤0.1 — и CI-гейт проходит на починенной сборке и проваливается, если ты заново внесёшь любую регрессию.
- Абзац-описание одного компромисса, на который ты наткнулся, где фикс одной vital угрожал другой (например резерв места под рекламу vs кандидат LCP, или инлайненный CSS vs TTFB) и как ты измерил чистый эффект по всем трём.
- Добавь инструментацию soft-navigation: если поток комментариев или похожих статей делает клиентскую смену маршрута, захвати LCP/INP для soft navigation через записи soft-navigation PerformanceObserver или RUM-метки и покажи vitals смены маршрута рядом с числами первой загрузки.
- Собери RUM-дашборд, сегментирующий p75 по классу устройства и стране, и покажи регрессию по классу устройства, которую один прогон в лабе пропустил бы.
- Подключи LoAF к атрибуции INP, чтобы медленное взаимодействие называло точный скрипт (файл:строка), доминировавший в медленном кадре, затем почини этот скрипт и перемерь.
- Добавь сверку синтетика-vs-field: собери и числа из лабы, и p75 из CrUX (или симулированного field), объясни разрыв и подгоняй профиль throttling в CI, пока лаба не предскажет field в пределах задокументированной тобой толеранции.
Это цикл, который ты гоняешь на каждом реальном инциденте vitals: сначала инструментируй полевым RUM с атрибуцией, читай доминирующую фазу (LCP) и часть (INP) и худшее session window (CLS), чини каждую по тому, что называет атрибуция — а не по удобному фиксу — защищай выигрыши throttled CI-гейтом и проверяй числами до/после под идентичным throttling. Поскольку три делят бюджет, ты меряешь все вокруг каждого изменения. Сделав это раз на игрушечной странице статьи, ты превращаешь production-версию в мышечную память.