Разбираемся с панелью Performance в Chrome DevTools ⏱️

Джоан Леон выкатила интерактивный гайд по панели Performance, который отлично раскладывает по полочкам весь процесс отладки.

Что внутри разбора:

Цветовая кодировка: наглядная расшифровка того, за что отвечают цвета (скрипты, рендеринг, отрисовка, загрузка и простой).
Анатомия запросов: как устроена полоса сетевого запроса и как читать две оси флеймчарта (время vs глубина вызовов).
Self time vs Total time: разница между чистым временем работы самой функции и суммарным временем вместе со всеми её дочерними вызовами.
Метрики и фазы: 4 фазы LCP, поиск сдвигов лейаута (CLS), диагностика INP, слой композитинга и порядок поиска узких мест.
Шпаргалки: удобные таблицы с типичными функциями и запросами, которые чаще всего забивают Main Thread.