Как эффективно использовать Network в Chrome DevTools
Недавно я уже рассказывала о наборе инструментов DevTools, встроенных в Google Chrome. И о их полезных фишках, которые не на поверхности. Таких довольно много, поэтому продолжу. Расскажу об эффективном использовании вкладки Network в меню инструмента. Для SEO-специалистов и не только.
Как запустить Network в DevTools
Напомню, есть несколько способов открыть DevTools:
- кликнуть правой кнопкой мыши на элемент на странице и выбрать «Просмотреть код»;
- Command + Option + C или Command + Option + I для Mac OS;
- Ctrl + Shift + C или Ctrl + Shift + I для Windows, Linux, Chrome OS;
- F12 также для Windows.
Вкладка Network помогает выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, какие ошибки есть в коде.
При первом открытии она может оказаться пустой — тогда просто перезагрузите страницу.
Каждая строка в журнале Network — это ресурс. Все они перечислены в хронологическом порядке (по умолчанию). Верхний обычно является основным HTML-документом. Нижний — то, что было запрошено последним.
Каждый столбец — информация о ресурсе. Основные данные по умолчанию:
- Status — код ответа;
- Type — тип ресурса;
- Initiator — что вызвало запрос ресурса. Щелкнув на ссылку в столбце Initiator, вы перейдете к исходному коду, вызвавшему запрос;
- Size — размер ресурса;
- Time — как долго длился запрос;
- Waterfall — графическое представление различных этапов запроса.
Наведите курсор на диаграмму, чтобы увидеть этапы загрузки.
Функционал вкладки Network
Работать в Network удобно, если хорошо знать ее возможности.
1. Столбцы сетевого журнала можно настраивать. Есть много дополнительных столбцов с полезной информацией, а неиспользуемые вы можете скрыть.
Для настройки кликните правой кнопкой мыши на заголовок таблицы сетевого журнала и выберите дополнительный столбец или отключите ненужный.
2. Можете фильтровать данные в журнале с помощью панели инструментов Filter.
Допустим, нас интересует только информация по файлам с расширением .svg.
Инструмент Filter поддерживает множество различных типов фильтрации. Можно использовать не только отдельные слова, но и регулярные выражения и свойства.
3. Кроме того, вы можете фильтровать данные по типу ресурса, используя на панели нужный функционал отбора.
4. Пока открыт DevTools, он будет записывать сетевую активность в журнал. Это не всегда нужно, запись можно отключить, если нажать красный переключатель.
5. Обычно сетевое подключение компьютера быстрее, чем у мобильных устройств пользователей. Меню Throttling позволяет регулировать скорость подключения, чтобы понять, сколько времени нужно для загрузки страницы на мобильном устройстве.
6. При повторных посещениях браузер часто использует некоторые файлы из своего кеша, что ускоряет загрузку. Если же хотите увидеть, как посетитель воспринимает загрузку страницы впервые, включите Disable Cache.
7. Для сохранения данных в журнале необходимо включить Preserv log.
8. Если нажмете на шестеренку, в панели появятся дополнительные функции:
- Group by frame — разбивает ресурсы на четкие группы в зависимости от домена или типа;
- Capture screenshots — позволяет делать скриншоты страницы в ходе ее загрузки;
- Use large request rows — добавляет дополнительную информацию о файлах в таблицу;
- Show overview — позволяет скрывать и показывать графическую информацию о загрузке страницы.
Но чем эти опции полезны именно SEO-специалисту?
Проверка ответа сервера
Можно сделать проверку ответа сервера из панели Chrome DevTools:
- Откройте целевую страницу.
- Ctrl+Shift+C/Command+Option+C или F12.
- Вкладка Network.
- Обновите страницу (Ctrl+F5/Command+R).
- Найдите основной URL (адрес страницы, которую мы изучаем). В колонке Status можно увидеть ответ сервера для данной страницы.
Например, нам нужно узнать ответ сервера для страницы:
Таким образом можно быстро проанализировать ответ сервера страницы и ее отдельных элементов. Увидеть, например, «битые» картинки.
Просмотр заголовков HTTP
Изначально ход проверки такой же, как и в случае с ответом сервера.
Но после пятого пункта появится шестой:
- на панели справа (с более подробной информацией) можно увидеть, какие заголовки HTTP настроены сейчас.
Их правильная оптимизация поможет ускорить работу веб-сервера и уменьшить расход краулингового бюджета на ресурсы, которые не нужно повторно скачивать. Функционал консоли позволяет сделать быструю проверку подобных заголовков, не уходя с сайта.
Смена User-Agent
Если вы хотите просматривать свой сайт так же, как это делает Google, переключите пользовательский агент на тот, который использует Google.
- Заходите в дополнительные настройки DevTools.
- Выбираете Network Conditions.
- Внизу панели появится рабочее прострaнcтво с нужным функционалом.
- Снимаете флажок Select automatically и выбираете, например, Googlebot Smartphone.
- Перезагружаете страницу.
Вы можете проанализировать, как определенный браузер видит ваш сайт и выявить проблемы, если они есть.
Определение ресурсов, блокирующих рендеринг
Используйте данные о времени загрузки ресурсов на панели Network, чтобы определить, какие ресурсы JS и CSS загружаются до DOM и потенциально блокируют его. Фильтруя данные по CSS и JS, можно вычислить проблемные ресурсы.
Блокировка скриптами и по стилям загрузки — одна из наиболее распространенных проблем со скоростью страницы. Их поиск и анализ ее улучшит или увеличит.
Проверка времени загрузки страницы и ее отдельных элементов
Когда во вкладке Network подгружается информация по странице, можно узнать данные по скорости загрузки каждого отдельного ресурса на ней и общего времени загрузки всей страницы.
Панель Network чаще всего используют для анализа корректности загрузки и выгрузки ресурсов. Если вы ищете способы повысить производительность загрузки, не начинайте с этой панели. Есть много типов проблем с производительностью, не связанных с сетевой активностью. Начните с панели Perfomance, потому что она дает вам целевые предложения по улучшению вашей страницы.
Выводы
- Панель Network в Chrome DevTools можно настроить «под себя». Например, скрыть неиспользуемые столбцы сетевого журнала, фильтровать данные, в том числе по типу ресурса, отключать запись сетевого журнала или регулировать скорость подключения.
- Для SEO-специалиста инструмент полезен, в первую очередь, тем, что позволяет сделать проверку ответа сервера или просмотреть заголовки HTTP.
- Чтобы увидеть, как ваш сайт просматривает Google, вы можете сменить пользовательский агент.
- Можете также определить ресурсы, блокирующие рендеринг или проверить время загрузки страницы.
Таким образом, при эффективном использовании панель Network дает немало возможностей для SEO-оптимизации сайта.
Комментарии:
Покажем, как продвигать сайты, продающие детскую обувь...
23 07 2026 1:18:47
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
22 07 2026 0:58:20
В мае прошлого года Google анонсировал выход нового Core Web Vitals. Что это и как будет работать рассмотрим в статье...
21 07 2026 12:58:12
Всё о вебхуках. Как настроить механизм получения уведомлений о событиях с помощью функций обратных вызовов....
20 07 2026 14:56:11
Какими бывают формы подписки и как их используют бренды...
19 07 2026 11:21:34
Чтобы обезопасить себя и своих клиентов, используйте технологию 3D Secure. Больше рекомендаций — в статье....
18 07 2026 6:14:15
Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...
17 07 2026 8:24:27
![[SEO настоящего] под микроскопом](/marketing-raw/img/223.php.jpg "[SEO настоящего] под микроскопом")
[SEO 2.0] — это продукт для бизнеса от Netpeak, он включает в себя принципиально новый подход к продвижению сайтов....
16 07 2026 6:55:45
Создатель студии рисованных видео Денис Довгаль — о тактике видеомаркетинга и жизни в стиле «цифровых кочевников»....
15 07 2026 6:36:21
То, чего нет в справке — подробный обзор отчетов Google ***ytics: в режиме реального времени, по аудитории, источникам трафика, поведению, конверсии. Узнать больше!...
14 07 2026 2:23:21
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
13 07 2026 22:52:42
Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...
12 07 2026 9:37:55
Лафхаки для маркетологов и владельцев сайтов на Prom...
11 07 2026 23:56:53
Эта история о том, как за два года комплексный подход к поисковому продвижению (SEO на этапе разработке сайта и дальнейшие действия по оптимизации) помог увеличить рост бесплатного трафика на 463% или Что делать, если SEO не приносит результаты сразу...
10 07 2026 7:35:58
Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...
09 07 2026 2:26:32
Участники Netpeak Cluster поделились своими инсайтами....
08 07 2026 8:50:39
А ещё Netpeak Cluster стал инструментом и у нас появился хаб знаний на YouTube....
07 07 2026 11:32:32
Отрывок из книги «Статистика: базовый курс в комиксах» Грейди Клейн и Алана Дебни...
06 07 2026 14:47:42
Автор книги о вирусном маркетинге «Заразительный. Психология сарафанного радио» Йона Бергер пришел к выводу, что у виральности всего шесть принципов....
05 07 2026 17:51:15
SMM от Netpeak — это разработки стратегий продвижения, механики конкурсов, медиапланирование и постоянная интеpaктивная связь с клиентом с помощью «Личного кабинета»....
04 07 2026 3:19:59
Те самые проблемы, если бизнес пришел к вам за услугой, но ему не нужен маркетинг в интернете. Мнения экспертов интернет-маркетинга....
03 07 2026 18:14:32
Удача и везение — не случайность. Это выбор. Любопытные эксперименты профессора Ричарда Вайсмена инсайде...
02 07 2026 17:14:59
Как создать и внедрить баннеры об использовании куки-файлов с помощью Google Tag Manager и OneTrust...
01 07 2026 6:15:41
Всем, кто собирается перейти на Single Page Application, но переживает, что они поссорятся с поисковыми системами. Правильно переживаете!...
30 06 2026 0:45:44
Какие рассылки можно отправить покупателю, если у вас есть только данные из карточки товара...
29 06 2026 2:27:42
Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....
28 06 2026 13:28:38
Как изменилось агентство Netpeak c августа по октябрь? Читайте о семи главных нововведениях и улучшениях в работе с клиентами....
27 06 2026 22:22:53
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
26 06 2026 7:16:40
От идеи для стартапа до плана развития и масштабирования бизнеса. Познавательные, полезные каналы, которые помогут реализовать смелые бизнес-цели. Узнать больше!...
25 06 2026 19:19:15
Заработок в четверть миллиона. Как многофункциональная SEO-платформа Serpstat из Netpeak Group стала самым продаваемым продуктом на AppSumo — пошаговая история-инструкция...
24 06 2026 7:25:19
Список рекомендаций для SMM-специалистов. Статья будет полезна SMM-менеджерам, проектным менеджерам, а также владельцам бизнеса, которые предпочитают самостоятельно ставить комaнде задачи и отслеживать выполнение целей....
23 06 2026 11:55:45
Хотите качественно руководить рекламной кампанией в Facebook? Как подключиться к API Facebook и получение статистики в R — рассказывает Алексей Селезнев....
22 06 2026 20:12:24
Шаги, которые необходимо выполнить для правильного сбора и анализа данных сайта...
21 06 2026 4:24:49
Процесс привлечения сторонних ресурсов отнимает основную часть времени у большинства основателей стартапов. Читайте руководство, которое поможет сделать этот процесс во время серии А более эффективным....
20 06 2026 5:16:26
Андреас Рётль о продвижении Journi: как трое выпускников Стэнфордского университета создали приложение для сторителлинга с 25 000 пользователями в 100 странах....
19 06 2026 9:27:40
Сначала учитесь, а потом идите в бизнес и предпринимательство. Бизнес — это игра, в которую играют пару тысяч лет, и здесь не нужно придумывать велосипеды. Научитесь сначала просто ездить, потом уже будете думать про кастомы....
18 06 2026 23:59:21
Как автоматически формировать и выгружать готовые рекламные кампании для Яндекс.Директ и Google Ads со структурой «одна группа объявлений — один key»...
17 06 2026 17:59:15
Результаты четвертого опроса среди IT-специалистов по уровню зарплат интернет-маркетологов с интересными итогами от количества участников до самой высокооплачиваемой должности и среднего опыта в рынке. Узнайте больше!...
16 06 2026 12:36:40
Как грамотно раскрутить пиццерию. Сняли фильтр и достигли хороших результатов....
15 06 2026 20:26:45
Сайту нужны внешние ссылки на сторонних ресурсах. Они могут повлиять на ранжирование вашего ресурса и трафик, а один из методов их получить — аутрич....
14 06 2026 21:54:36
Перед внедрением ремаркетинга следует хорошенько поработать над составлением базовых портретов аудитории сайта...
13 06 2026 22:32:45
Мнение Сергея Петренко, CEO компании Odesseya....
12 06 2026 9:44:37
Мануал по Microsoft Power BI — мощному инструменту для бизнес-аналитики. Освоив эту платформу, вы сможете с легкостью создавать понятные отчеты и обновлять их в режиме реального времени....
11 06 2026 18:28:40
Алгоритм настройки и запуска рекламы для SMM-, PPC-специалистов, блогеров и владельцев бизнеса....
10 06 2026 5:13:37
В основе продвижения любых продуктов фигурирует ЦА и её потребности. Рассказываем, как с ней работать в разрезе Инстаграм и Facebook так, чтобы РК давала максимальный профит...
09 06 2026 23:29:30
Как анализировать конкуренты и делать правильные выводы для развития бизнеса....
08 06 2026 16:38:53
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
07 06 2026 1:34:30
Кейсы с наибольшим количеством комментариев, репостов, оценок и дочитываний; по контекстной рекламе, поисковому продвижению, аналитике, SMM и другие. Узнать больше!...
06 06 2026 1:54:18
Используем возможности Google Cloud Platform в работе с R...
05 06 2026 3:22:26
Почему лендинги на Тильде выгодны бизнесу, какие задачи он решает, о форматах работы по услуге, детально о ее составе и спецпредложениях от Netpeak и наших партнеров по настройке контекстной рекламы, сервисов на лендинге и даже промокод на скидку Yagla...
04 06 2026 13:23:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
