Как измерить производительность в браузере и определить причины просадки
Что проверяют
Умеете ли вы идти от симптома к причине: сначала цифры, потом профиль, потом гипотеза, а не сразу «минифицируем бандл». Следом обычно спрашивают, чем лабораторные замеры отличаются от данных реальных пользователей и какая метрика пострадала в вашем случае.
Как отвечать
Начните с метрик, которые сейчас действительно используются:
- LCP: когда отрисовался крупнейший элемент первого экрана, хорошо до 2,5 с;
- INP: задержка отклика на действия пользователя, хорошо до 200 мс. В 2024 году она заменила FID в Core Web Vitals;
- CLS: сдвиги вёрстки, хорошо до 0,1;
- TTFB и FCP: вспомогательные, помогают понять, виноват сервер или клиент.
Дальше два источника данных. Полевые: библиотека web-vitals или PerformanceObserver отправляют метрики в аналитику, смотрят 75-й перцентиль. Лабораторные: Lighthouse и панель Performance в DevTools.
Причину ищут в Performance с включённым замедлением CPU, иначе на мощном ноутбуке проблема не видна. На дорожке Main найдите долгие задачи дольше 50 мс, они отмечены красным, и разверните flame chart: что внутри, скрипт, пересчёт стилей или Layout. Предупреждение о forced reflow значит, что код читает размеры сразу после изменения DOM. Для просадки, которая растёт со временем, снимите два heap snapshot во вкладке Memory и сравните. В React полезен Profiler из React DevTools, он покажет лишние перерисовки. Свои участки кода размечайте performance.mark() и performance.measure(), они видны в том же профиле. Для причин плохого INP у реальных пользователей есть Long Animation Frames API.
Где спотыкаются
Называют TTI и FID как актуальные метрики. FID заменён на INP, TTI убран из Lighthouse, и это сразу выдаёт устаревшую подготовку.
Считают оценку Lighthouse истиной. Это один прогон в искусственных условиях, а жалуются пользователи на слабых телефонах, и это видно только по полевым данным.
Перечисляют оптимизации вслепую: CDN, defer, сжатие картинок. Без профиля вы не знаете, что просадку вызвала, например, таблица на тысячу строк без виртуализации.