Что можно узнать из вкладки Network в Chrome

Nov 14, 2025 · 4 min read

Что можно узнать из вкладки Network в Chrome

Вкладка Network в Chrome раскрывает причины медленной работы вашего сайта. Даже если код идеален, одно изображение большого размера или медленный API-эндпоинт могут разрушить пользовательский опыт. Понимание этой панели превращает вас из человека, который гадает о проблемах производительности, в специалиста, который диагностирует их с точностью.

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

Диаграмма waterfall визуализирует время запросов, где цвета кодируют критически важные данные о производительности
TTFB свыше 200 мс указывает на узкие места на стороне сервера, требующие оптимизации бэкенда
Регулирование скорости сети имитирует реальные условия для выявления скрытых проблем производительности
Фильтры запросов и экспорт HAR обеспечивают продвинутую отладку и анализ производительности

Понимание анализа Network Waterfall

Диаграмма waterfall в панели Network инструментов разработчика Chrome рассказывает историю каждой миллисекунды загрузки вашей страницы. Каждая горизонтальная полоса представляет путь запроса от инициации до завершения. Цвета не декоративны — они кодируют критически важную информацию о времени.

Зелёные сегменты показывают время ожидания (TTFB - Time to First Byte), указывая, сколько времени требуется серверу для ответа. Синий цвет представляет время загрузки контента. Когда преобладает зелёный, узким местом является сервер. Когда доминирует синий, вы имеете дело с большими ресурсами или ограничениями пропускной способности.

Современные браузеры выполняют несколько запросов одновременно, создавая параллельные полосы в waterfall. HTTP/2-соединения усиливают эту параллелизацию, позволяя десяткам запросов использовать одно соединение. Обратите внимание на ступенчатые паттерны — они выявляют цепочки зависимостей, где один ресурс блокирует другой, часто указывая на возможности реструктуризации стратегии загрузки.

Различие между узкими местами TTFB и времени загрузки

Отладка производительности веб-приложений начинается с определения, откуда исходит медлительность — от сервера или от сети. Кликните на любой запрос и изучите вкладку Timing. Если “Waiting (TTFB)” превышает 200 мс, исследуйте бэкенд — вероятно, требуется оптимизация запросов к базе данных, логики API или конфигурации сервера.

Длительное время загрузки указывает на другие решения. JavaScript-бандл размером 5 МБ может загружаться мгновенно на вашем оптоволоконном соединении, но ползти по мобильным сетям. Колонка Size показывает как переданный размер (сжатый), так и фактический размер (несжатый). Когда эти числа значительно различаются, вы успешно используете сжатие. Когда они похожи, включение gzip или Brotli может драматически улучшить производительность.

Накладные расходы соединения отображаются в разбивке времени как DNS Lookup, Initial Connection и SSL-согласование. Посетители впервые испытывают все три; возвращающиеся посетители обычно пропускают их благодаря повторному использованию соединения. Несколько запросов к одному домену должны использовать общие соединения — если этого не происходит, вы тратите round trips впустую.

Использование регулирования скорости сети для реального тестирования

Гигабитное соединение вашей машины разработки маскирует проблемы производительности. Регулирование скорости сети (Network throttling) в Chrome имитирует реалистичные условия. Выберите “Slow 3G” или “Fast 4G” из выпадающего списка throttling, чтобы испытать ваш сайт так, как его видят мобильные пользователи.

Регулирование выявляет конкуренцию за ресурсы. Когда пропускная способность становится дефицитной, колонка Priority становится критичной. Браузеры назначают приоритет Highest ресурсам, блокирующим рендеринг, High — видимым изображениям и Low — контенту ниже видимой области. Неправильные приоритеты — например, пиксель отслеживания с приоритетом High — тратят драгоценную раннюю пропускную способность.

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

Отладка HTTP-запросов и API-ответов

Панель Network в Chrome DevTools превосходна в отладке HTTP-запросов. Неудачные запросы отображаются красным, немедленно привлекая внимание. Кликните на один из них, чтобы проверить заголовки, выявляя ошибки CORS, сбои аутентификации или некорректно сформированные запросы.

Вкладка Response показывает фактический вывод сервера — бесценно, когда API возвращают сообщения об ошибках в телах ответов, несмотря на статус-коды 200. Вкладка Preview отображает JSON-ответы в читаемых, сворачиваемых деревьях, делая сложные API-ответы навигируемыми.

Инициаторы запросов раскрывают причинно-следственную связь. Наведите курсор на колонку Initiator, чтобы увидеть полный call stack. Это отслеживает проблемы до их источника — та ошибка 404 может исходить от стороннего скрипта, а не от вашего кода.

Фильтрация и изоляция конкретных ресурсов

Поле Filter принимает сложные запросы. Введите larger-than:100k, чтобы найти раздутые ресурсы. Используйте -domain:yourdomain.com для изоляции сторонних запросов. Регулярные выражения типа /\.(jpg|png|gif)/ группируют связанные ресурсы.

Фильтрация Fetch/XHR изолирует API-вызовы от загрузки ассетов — необходимо при отладке логики приложения в противовес проблемам производительности. Функция поиска (Cmd+F) ищет по всем телам ответов и заголовкам — идеально для поиска мест утечки конфиденциальных данных или отслеживания конкретных API-ответов.

Практические инсайты производительности

Вкладка Coverage (доступна через меню DevTools) накладывает сетевые данные на статистику использования кода. Тот JavaScript-бандл размером 2 МБ может использовать только 30% своего кода при начальной загрузке — явный сигнал к внедрению code splitting.

Экспорт HAR (HTTP Archive) захватывает целые сетевые сессии для анализа в специализированных инструментах типа WebPageTest или для обмена с членами команды. Кликните правой кнопкой на любой запрос и выберите “Copy as cURL”, чтобы воспроизвести точные запросы в терминале или Postman.

Заключение

Вкладка Network в Chrome превращает загадочные проблемы производительности в действенные инсайты. Освойте диаграмму waterfall, поймите разбивку времени и используйте регулирование для просмотра вашего сайта через соединения ваших пользователей. Эти навыки отделяют разработчиков, которые надеются, что их сайты быстры, от тех, кто точно знает, почему они быстры — или нет.

FAQ

Transferred size показывает сжатые данные, отправленные по сети, в то время как resource size — это размер несжатого файла. Большая разница указывает на хорошее сжатие. Похожие значения предполагают, что вам следует включить сжатие gzip или Brotli на вашем сервере.

Используйте строку фильтра с -domain:yourdomain.com для изоляции сторонних запросов. Сортируйте по времени или размеру, чтобы найти худших нарушителей. Проверьте представление waterfall, чтобы увидеть, блокируют ли эти скрипты загрузку критических ресурсов.

Нулевой TTFB обычно означает, что ресурс был обслужен из кеша — либо кеша браузера, либо service worker. Проверьте колонку Size на индикаторы disk cache или memory cache, чтобы подтвердить, что ресурс не был получен из сети.

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.