Метод трёх треков: чтение трасс и построение системы мониторинга

Джуниор-инженер оптимизирует обработчик «Добавить в корзину» — он уже занимает 12 мс, значительно ниже бюджета. INP остаётся на 480 мс. Второй инженер находит 900-миллисекундную задачу гидратации, начинающуюся перед каждым ранним тапом. Исправление обработчика оптимизировало то, что не было ограничением. Ограничением была задача, за которой тап стоял в очереди. Чтение трассы — это не знание того, что вещи медленны — это знание того, какой трек, в какой момент, был фактическим узким местом.

Метод трёх треков.

Трасса производительности DevTools страницы товара показывает три перекрывающихся трека на одной временно́й шкале: сетевой трек, трек основного потока и трек GPU/композитора. Сеньорный метод диагностики любой медленной страницы:

1. Найди симптом для пользователя. Поздний маркер LCP. Долгое взаимодействие в треке Interactions. Красный маркер сдвига макета.
2. Перейди к моменту, когда симптом произошёл, и спроси, какой трек был ограничением.
   • Поздний LCP + hero ещё на сетевом треке в момент LCP → проблема сети или обнаружения (поломка 1).
   • Поздний LCP + hero закончился рано + основной поток сплошной → блокирующий JS, задержка рендеринга элемента.
   • Медленное взаимодействие + долгая задача основного потока перекрывает его → гидратация или тяжёлый обработчик (поломки 3 и 5).
3. Назови ограничение как: «этот трек, в этот момент». Это исправимое утверждение. «Страница медленная» — нет.

Это превращает «страница медленная» в «основной поток был заблокирован задачей гидратации с 1.6 с до 2.5 с, и тап пользователя в 2.0 с стоял в очереди за ней». Это то, что можно починить.

Глубокое погружение в гидратацию — где встречаются пять уроков.

Гидратация — шарнир всей трассы, поэтому стоит ещё один проход. Это рекурсор React (урок 05), работающий в специальном режиме: вместо того, чтобы createRoot строил свежий DOM, hydrateRoot обходит дерево компонентов и принимает существующий серверный DOM. Фаза рендеринга выполняется — твои компоненты выполняются, дерево фибр строится — но фаза фиксации, вместо вставки узлов, прикрепляет обработчики событий и запускает эффекты.

Гидратация ограничена JS-бандлом: ничто не гидрируется, пока V8 (урок 03) не распарсил, скомпилировал и не начал выполнять этот бандл. Это одна или несколько задач на цикле событий (урок 01), и большая жадная гидратация — одна длинная задача, блокирующая ввод — которую Core Web Vitals (урок 07) записывает как плохой INP для любого взаимодействия в этом окне. И всё стоимость существует только потому, что страница была серверно-рендерена (урок 06) с самого начала. Гидратация — это где встречаются пять из семи браузерных уроков.

Глубокое погружение в первую отрисовку — ещё одно плотное пересечение.

Другое плотное пересечение — последовательность первой отрисовки. Конвейер рендеринга (урок 02) нуждается в DOM и CSSOM; DOM приходит из HTML-парсера, CSSOM из парсинга CSS — обе задачи основного потока (урок 01). JavaScript, который может модифицировать DOM перед первой отрисовкой, сначала должен быть распарсен и скомпилирован V8 (урок 03), и если этот JS блокирует рендеринг, отрисовка ждёт его. Стадия компоновки передаёт слои GPU. LCP (урок 07) срабатывает, когда наибольший элемент этой отрисовки приземляется.

Поэтому «первая отрисовка» — не один механизм — это конвейер рендеринга, парсер, V8 и композитор, скоординированные, с Core Web Vital, наблюдающим за результатом. Ни один слой не является островом; каждая реальная страница — весь стек сразу.

Финальная дисциплина — три хода.

Отступи от страницы и посмотри на метод сам. Сеньорный навык, который строит весь этот раздел — не запоминание восьми слоёв — это дисциплина диагностики. У неё три хода:

1. Измерь прежде чем трогать. Реальная трасса и полевой RUM, никогда угадывание, потому что симптом рутинно называет неправильный слой. Джуниор, оптимизировавший обработчик 12 мс, ничего не измерял — он угадывал.

2. Найди ограничение, а не ограничение. На перекрывающейся временно́й шкале всегда есть один трек, в один момент, который является фактическим узким местом — оптимизация чего-либо другого двигает число, которое не было проблемой. Задача гидратации 900 мс была ограничением; обработчик не был.

3. Исправь доминирующую причину, затем переизмерь. Потому что слои взаимодействуют, исправление в одном слое меняет бюджет в других, поэтому трасса после исправления — новый диагноз, а не подтверждение. Сжатие бандла меняет стоимость V8, которая меняет задачу гидратации, которая меняет профиль INP — новая трасса может обнаружить вторичное узкое место.

Джуниор-инженер оптимизирует то, что умеет оптимизировать; сеньор-инженер оптимизирует то, что трасса называет ограничением. Восемь слоёв — это карта; дисциплина — знание, что карта не говорит, где проблема — это делает измерение.

Наблюдаемость производства — превращение понимания в систему.

Ментальная модель конца в конец становится практикой производства через многоуровневую телеметрию, каждый слой наблюдает за границей, которой владеет:

• RUM с web-vitals захватывает LCP, INP и CLS с атрибуцией — LCP-элемент, INP-скрипт, источник CLS — так что регрессия называет свой собственный слой.
• Long Animation Frames (PerformanceObserver записи long-animation-frame) атрибутируют медленные кадры конкретным скриптам, ловя задачу гидратации и тяжёлые обработчики.
• Серверное трассирование наблюдает за TTFB и путём получения данных.
• Телеметрия сервис-воркера наблюдает за показателями попаданий в кеш и длительностью fetch-обработчика.
• Синтетические CI-ворота — регулируемая трасса Lighthouse или Playwright на каждый PR — ловят очевидные регрессии до слияния.

Поскольку медленная страница — проблема цепи, мониторинг должен охватывать каждое звено. И каждая метрика должна нести достаточно атрибуции, чтобы указывать обратно на слой, который сломался. Вот как понимание всей цепи перестаёт быть навыком отладки и становится системой, которая ловит поломку за тебя.