Network и производительность

Что это такое

Панель Network показывает хронологический журнал каждого запроса, сделанного страницей: что запрошено, кто запросил, когда запрос начался, сколько занял, какого размера был и что вернулось. Панель Performance записывает работу браузера как временную шкалу, отделяя сетевую активность от задач главного потока, рендеринга и вёрстки. Вместе они отвечают на вопрос «что заняло так долго».

Почему это важно

Почти все медленные страницы медленны по одной из нескольких причин, и обе панели называют причину за секунды. Запрос, начавшийся поздно, потому что его блокировало что-то другое; ресурс, куда больший, чем нужно; скрипт, державший главный поток полсекунды, пока пользователь пытался кликнуть, — каждый из них невидим в исходнике и очевиден в записи. Без них работа над производительностью превращается в догадки, а на догадках команды начинают откладывать скрипты, которые никогда не были проблемой.

Ключевые идеи

Читайте waterfall по времени старта, а не по размеру

Позиция запроса на шкале часто важнее его размера: большое изображение, стартующее параллельно со всем остальным, стоит меньше, чем маленький скрипт, который загружается первым и блокирует остальное, — поэтому ищите запросы, начавшиеся поздно из-за цепочки зависимостей, и ресурсы, которые мешали отрисовке, пока загружались.

index.html   ████
app.css          ██          ← блокирует отрисовку, стартует после HTML
hero.avif           ████     ← обнаружен последним, но это элемент LCP
app.js               ██████  ← разобран и выполнен после того, как отрисовка уже могла случиться

Проверяйте размер, формат и кэш

Для каждого большого ответа спросите, есть ли формат меньше, подогнан ли размер изображения под занимаемое им место и позволило бы хешированное имя файла держать его в кэше вместо повторной загрузки. Панель показывает и переданный размер, и статус кэша — именно там находится неожиданная повторная загрузка.

Главный поток — там, где теряются взаимодействия

В записи производительности дорожка главного потока показывает задачи блоками. На задаче длиннее примерно 50 миллисекунд погибает Interaction to Next Paint, потому что ввод, пришедший во время неё, не может быть обработан, пока она не закончится. Разворачивание блока показывает имена функций и их self-time, чего обычно достаточно, чтобы найти виновника.

Различайте вёрстку, отрисовку и скрипт

Запись помечает события вёрстки и отрисовки наравне с выполнением скрипта. Если вёрстка появляется снова после каждой записи стиля, это признак чтения свойства вёрстки внутри цикла, заставляющего пересчитывать её, а время скрипта, доминирующее во взаимодействии, — признак того, что обработчик делает слишком много синхронно.

Ограничивайте скорость и тестируйте холодный путь

Запись на неограниченной машине с тёплым кэшем измеряет машину, а не продукт. Используйте предустановки ограничения CPU и сети, отключите кэш для теста загрузки и помните, что первый визит переживает большинство новых пользователей.

Перезаписывайте после каждого изменения

Запись служит доказательством для одного состояния кода. Если оставить её открытой во время правки, получится сбивающая картина двух сборок; запишите снова и сравните две шкалы бок о бок.

Практика

Найдите запрос, задерживающий первую отрисовку

Запишите холодную загрузку с включённым ограничением скорости и определите каждый запрос, который блокирует отрисовку, и момент, когда произошла первая отрисовка. Затем найдите самый большой ответ.

Готово, когда: вы можете назвать ресурс, который блокирует первую отрисовку, и ресурс, дольше всех добиравшийся, и сказать, какой из них важнее для интересующей вас метрики.

Найдите самое медленное взаимодействие

Запишите, выполняя основное взаимодействие на странице — открытие меню, отправку формы, — и разверните самую длинную задачу, которая за ним следует.

Готово, когда: вы можете назвать функцию, съевшую больше всего self-time, и сказать, чем была эта задача — скриптом, вёрсткой или отрисовкой.

Частые ошибки

• Запись без ограничения скорости — всё выглядит быстрым, и проблема не видна; исправить: используйте предустановки CPU и сети и отключите кэш для холодной загрузки.
• Сортировка списка запросов только по размеру — маленький скрипт, который блокирует отрисовку, может стоить больше большого изображения; исправить: читайте waterfall по времени старта и ищите, что блокировало что.
• Оставленная старая запись при правке кода — шкала больше не описывает текущую сборку; исправить: перезаписывайте после каждого изменения.
• Отношение к каждому запросу как к необходимому — сторонние скрипты и дубликаты библиотек прячутся на виду; исправить: спросите, зачем нужен каждый ответ.
• Взгляд только на общее время — пользователь переживает первую отрисовку и первое взаимодействие, а не событие load; исправить: найдите момент появления контента и момент, когда ввод получил ответ.

Что читать дальше

• Elements и стили (02-frontend/27-browser-devtools/01-elements-and-styles) — другая половина того же инструмента: структура и стили, а не тайминги.
• Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — показатели, которые этими панелями объясняют.
• Lighthouse (02-frontend/31-lighthouse) — автоматизированное резюме, когда полная запись даёт больше деталей, чем нужно.