Как читать профайлы в DevTools
Кадр на 834 мс в Chrome DevTools — это не просто число, это остановившийся поток, который пользователь физически почувствовал. Этот интерактивный гайд учит правильно читать это число.
«Reading a Performance Profile» — практический гайд по Performance-панели DevTools — каждая иллюстрация интерактивна, построена вокруг реального захвата CSR login SPA с JS-gated LCP. Несколько вещей, которые стоит взять себе, даже если ты уже открываешь DevTools каждый день:
→ **Цвет = тип работы, не файл.** Пять категорий: Scripting (жёлтый), Rendering (фиолетовый), Painting, Loading, System/Idle. Сплошной жёлтый flame chart значит CPU-bound на JS — ещё до того, как ты вообще кликнул
→ **Self time против total time — главная игра.** Толстый бар с толстым чайлдом почти не имеет self time — виноват чайлд, не родитель. Именно поэтому Bottom-up (сортировка по self time) выявляет реальных виновников, скрытых в самых широких барах flame chart
→ **CPU-bound или network-bound — одна проверка.** Сопоставь main thread с network-треком. Thread простаивает, пока что-то грузится — проблема сети. Thread занят, пока ничего не грузится — проблема CPU. Два совершенно разных фикса
→ **Insights ранжирует по оценке экономии** — LCP by phase, render-blocking requests, forced reflow, duplicated JS. Десять проверок по приоритету, первый проход по незнакомому трейсу — это чеклист, а не охота
→ **Таблицы сигнатур имён фреймов и доменов.** invokeTask · runTask — Zone.js change detection. fbq · fbevents — Meta Pixel. mbox · at.js — Adobe Target, часто блокирующий рендер. Умение узнавать стек по виду — большая часть скорости диагностики
Пре-флайт — то, что большинство пропускает и зря: CPU throttle 4–6×, network throttle под реальное соединение, чистый/incognito профиль. Запиши на своём быстром дев-машине без тротлинга — и пропустишь тот самый джанк, который чувствуют твои пользователи.
Полный интерактивный гайд 👇 https://perf.reviews/profile-guide
