Timing в DevTools: Как увидеть, где именно тормозит система

Вкладка Network — это не просто список запросов, чтобы проверять статус-коды. Если посмотреть чуть выше, там есть «лесенки» и цветные полоски. Это визуализация того, как ваше приложение дышит в асинхронном режиме: где оно стоит в простое, где запросы летят пачкой, а где один ждет завершения другого.

Когда запрос длится вечность, важно не гадать «почему всё висит», а идти в подвкладку Timing. Она раскладывает жизнь одного реквеста на атомы:

— TTFB (Time to First Byte): Это время, которое прошло с момента отправки запроса до получения первого байта. Если здесь полоска длиной в километр — значит, ваш бэкенд «тупит». База данных долго отдает ответ, тяжелая логика на сервере или просто кривой код. Клиент и сеть тут ни при чем, это чистый косяк серверной части.
— Content Download: Если TTFB короткий, но общая загрузка долгая — значит, сервер отработал быстро, но вы пытаетесь пропихнуть в браузер JSON на 20 мегабайт или несжатую картинку. Сервер отдал данные, но они тупо медленно ползут по сети из-за своего веса.
— Queueing и Stalled: Иногда запрос даже не улетел, он стоит в очереди. Браузер ограничивает количество одновременных соединений к одному домену. Если вы наплодили 50 запросов одновременно, часть из них будет просто ждать «окна».

Для более глубокого копания есть вкладка Performance. Это такой Lighthouse на стероидах. Если на странице что-то дергается, лагает анимация или интерфейс «фризится» при клике — Performance покажет, какой именно кусок JavaScript в этот момент нагрузил процессор на 100%. Вы увидите, где скрипт заблокировал поток и не давал браузеру перерисовать кадр.

В большинстве типовых проектов вам не придется упарываться в микрооптимизации. Но если вы работаете в e-commerce или там, где важна конверсия, скорость — это база. Гугл до сих пор ранжирует быстрые сайты выше.

Хотя в эру LLM, когда ответы получают в чате, а не на сайтах, это может казаться пережитком, но инженер обязан знать, как работает его инструмент под капотом. Не понимать Timing в браузере — это как быть автомехаником и не уметь пользоваться манометром.

Если что-то всё ещё звучит запутанно — пиши вопросы в комментах, я обязательно отвечу. А если всё разложилось по полочкам — ставь 🔥, так я пойму, что пост был полезен

10МДК