Браузер и фронтенд-рантайм
Всё вместе: диагностируй и почини дёрганую страницу end-to-end
Читать про эстафету — не то же самое, что вытащить реальную страницу из uncanny valley. Возьми медленную, дёрганую server-rendered страницу, пройди всю цепочку с trace и RUM, чини доминирующую причину на каждом слое в порядке рычага и доказывай каждый ход числами до/после — это цикл, который ты будешь гонять в каждом реальном инциденте производительности.
Преврати дисциплину капстоуна в воспроизводимый инженерный цикл: измерь до того, как трогать, найди узкий трек в узкий момент, почини доминирующую причину вдоль пути рендеринга, перемерь и вшей понимание в мониторимую систему, которая ловит следующую регрессию.
Возьми намеренно медленную, дёрганую server-rendered страницу (свою или по стартовому паттерну ниже) с плохими LCP, INP и CLS и приведи все три Core Web Vitals к 'good' на полевом p75 — доказывая каждый шаг через DevTools trace и RUM, не отказываясь от SSR.
- Таблица до/после на полевом p75: LCP, INP, CLS плюс TTFB и длительность длинной задачи гидратации — измеренные при том же throttling, не оценённые.
- Все три Core Web Vitals достигают 'good' на p75: LCP ≤ 2.5 с, INP ≤ 200 мс, CLS ≤ 0.1.
- Пара аннотированных trace (до/после), показывающая узкий трек в моменты LCP и первого тапа и явно более короткую длинную задачу гидратации после фикса.
- Абзац на каждый фикс: слой, на который он нацелен, метрика, которую он сдвинул, и почему он встал именно туда в порядке рычага — TTFB и стоимость гидратации до микрооптимизации обработчика.
- CI-гейт зелёный на починенной ветке и наглядно падает, когда вводится регрессия (например, возврат lazy hero или eager тяжёлого острова).
- Добавь on-call runbook: chain-walk triage по trace, таблицу симптом-в-слой, пять канонических поломок с их фиксами и чек-лист верификации.
- Стримь оболочку через React Server Components и Suspense, чтобы первая отрисовка опережала полные данные, и измерь влияние на LCP и INP против baseline с гидратацией все-сразу.
- Закали service worker: ассеты с content-hash, кэши с тегом версии, очищаемые в activate, network-first навигация и kill switch — затем симулируй плохой деплой и покажи, что вернувшиеся пользователи не заперты.
- Добавь наблюдение Long Animation Frame в RUM и подтверди, что доминирующий скрипт INP, названный в поле, совпадает с длинной задачей, которую ты починил в лабе — замыкая петлю между полем и лабой.
Это цикл, который ты будешь гонять в каждом реальном инциденте производительности фронтенда: сними trace и полевой RUM сначала, прочитай как три трека, чтобы найти узкое место в важный момент, почини доминирующую причину вдоль пути рендеринга в порядке рычага — TTFB, затем discovery LCP, затем стоимость гидратации, затем детерминизм CLS, затем обработчик — перемерь после каждого хода, потому что слои взаимодействуют, и вшей RUM плюс CI-гейт, чтобы следующая регрессия ловилась до того, как её почувствуют пользователи. Сделать это однажды на намеренно сломанной странице — вот что превращает production-версию в мышечную память.