Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Нужно ли начинать работу с Google Marketing Platform, и если да, то на каком этапе развития бизнеса?...
08 09 2026 3:49:56
Организаторам мероприятий, коллегам из PR-сферы и невестам о том, как делегировать важные мероприятия внешнему подрядчику...
07 09 2026 21:50:52
Как и зачем мигрировать со старой на новую версию API на языке R. С пакета RAdwords на rgoogleads. Руководство от Алексея Селезнева. Читать дальше!...
06 09 2026 16:31:49
Отличная работа SEO-специалистов прошлого, породила касту PPC-специалистов настоящего, которые все еще ориентируются на публикации из 2017, ведь они все еще в ТОПе выдачи....
05 09 2026 7:29:36
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
04 09 2026 6:55:52
Расскажем про ошибки интернет-магазинов, которые трудно найти соответствующими программами и сервисами проверки...
03 09 2026 20:36:48
Как считать конверсии из Facebook, когда они происходят в Jivosite и Битрикс24....
02 09 2026 5:52:28
Как установить счетчик Метрики, грамотно настроить цели, сегменты и запустить рекламную кампанию по ретаргетингу в Яндекс.Директ...
01 09 2026 10:49:50
Проверяем, есть ли разница в ранжировании при наличии/отсутствии этих слов в метаданных. Эксперимент....
31 08 2026 10:41:15
Спикер ОА Петр Аброськин рассказал всем читателям блога о фишках настройки ремаркетинга в контекстной рекламе и социальных сетях...
30 08 2026 3:10:42
Рост количества транзакций на 417%, дохода на 560%, среднего чека на 28%....
29 08 2026 17:22:39
Данные по 33,5 миллионов кликов в 26 тематиках и 394 городах...
28 08 2026 23:49:25
Минусовки это не только про эстраду. Какой метод кросс-минусовки ключевых слов лучше?...
27 08 2026 10:46:10
Создаем список тем, которые заинтересуют пользователя — для этого используем простые сервисы по типу Вордстат. Также изучаем деятельность конкурентов. Узнать больше!...
26 08 2026 9:16:28
Магазин вязанных вещей хенд мейд. Как за два месяца увеличить посещаемость в 20 раз....
25 08 2026 0:50:58
Положительная динамика с первых месяцев работы....
24 08 2026 20:21:12
Список инструментов email-маркетолога для рассылок по англоязычной аудитории....
23 08 2026 11:41:42
Фишка, которую можно позволить себе даже когда портал продает всего несколько товаров или услуг...
22 08 2026 21:18:34
Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...
21 08 2026 18:13:41
Опыт, накопленный за более чем 10 лет работы в нише и упакованный в специальные предложения....
20 08 2026 1:39:12
Примеры новой концепции Digital-маркетинга по формуле 8Р...
19 08 2026 8:44:13
Чтобы проставить 301 редиректы, вначале надо выгрузить весь список топовых страниц по обратным ссылкам...
18 08 2026 4:41:52
Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....
17 08 2026 8:44:54
Ежеквартальное исследование Netpeak по стоимости клика...
16 08 2026 13:14:12
О том как растут доходы при оптовой торговле женской одеждой и обувью, а траты на рекламу остаются на прежнем уровне...
15 08 2026 2:10:46
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
14 08 2026 2:42:59
Недавно у нас появился свой генератор мемов :) Во многих компаниях смешные слова и фразы стараются запомнить и передать следующим поколениям сотрудников. В Netpeak же долго работали над секретным проектом и... Читайте!...
13 08 2026 9:36:56
Наш результат ведения рекламных кампаний в Facebook показывает, что при правильно подобранной стратегии можно даже за короткий период в авральном режиме попасть точно в цель...
12 08 2026 4:43:44
Кейс — поисковое продвижение блога в нише юридических услуг. Как увеличить количество читателей из поисковых систем и трафик на страницы услуг....
11 08 2026 3:28:40
Не знаешь как раскрутить сайт? Мы подготовили 11 этапов SEO-продвижения сайтов в поисковых системах....
10 08 2026 3:41:35
Магазин детской обуви: конкретные цифры в кейсе по продвижению....
09 08 2026 18:49:29
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
08 08 2026 4:43:45
Цели у личных сайтов могут быть разные, но в первую очередь они помогают рассказать историю о специалисте...
07 08 2026 22:13:42
Актуальный обзор особенностей работы онлайн-проектов в Казахстане...
06 08 2026 0:36:55
За каждым проектом стоят прежде всего люди. Как часто мы пользуемся сложными системами и не думаем о том, кто их создал и продолжает развивать? Интересно о том, кто и что стоит за «ПланФиксом». Читайте далее!...
05 08 2026 4:51:49
Мы достигли поставленных на старте продвижения целей: вернули потерянный трафик, получили дальнейший рост видимости сайта и увеличили доход....
04 08 2026 4:35:33
Как создать и внедрить баннеры об использовании куки-файлов с помощью Google Tag Manager и OneTrust...
03 08 2026 1:16:50
Нужно разбить ячейку или составить график? Если вы знаете функции, таблицы гугл могут пpaктически заменить отдельные сервисы или дополнения...
02 08 2026 19:39:25
Как начать бизнес в институте и масштабировать его до международной группы компаний. Собрали все самое интересное из интервью фаундера «Техно Ёж» Алексея Гулыя на конференции 8P....
01 08 2026 10:41:26
Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....
31 07 2026 16:58:35
Дмитрий Шахов, Алексей Чекушин и другие эксперты поделились своим опытом решения сложных вопросов SEO на примере больших проектов....
30 07 2026 17:59:40
Любопытная подборка "маленьких" гигантов: компании и сервисы, чья аудитория превышает 10 миллионов пользователей, а также несколько интересных фактов о каждом из них. Узнать больше!...
29 07 2026 17:41:46
Как настроить передачу категории и бренда товара в Google Data Studio....
28 07 2026 8:32:11
Мануал по созданию удобного планировщика повторяющихся действий....
27 07 2026 11:48:11
О том, какие результаты дает эта технология, рассказал Александр Иванов, Head of Product в ЛУН.ua в рамках прошлогодней самой летней конференции 8P. Читайте, как его комaнде удалось разогнать загрузку страниц сервиса Flatfy до 0,2 секунды...
26 07 2026 23:18:57
Также повысили количество транзакций на 191% (по сравнению с аналогичным периодом прошлого года)....
25 07 2026 6:42:12
Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...
24 07 2026 8:17:30
Идеи для интернет-маркетологов, как получить дополнительные каналы трафика и сделать заметным сниппет в поисковой выдаче....
23 07 2026 15:48:27
Информация поможет вам в составлении медиапланов. Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, можно оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
22 07 2026 4:51:59
Определение и настройка главного зеркала сайта в поисковых системах — первое, что нужно сделать перед раскруткой сайта...
21 07 2026 0:43:21
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
