Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Лучшая работа по перехвату инициативы у конкурентов в аналитике продаж...
20 05 2026 17:17:39
Офис Netpeak в Харькове официально открыт! В этом посте, вместо игры на фанфарах, мы на собственном примере рассмотрим, что нужно для создания регионального отделения в разгар кризиса....
19 05 2026 15:57:36
На третий месяц работы мы вышли на положительный ROMI, на четвертый — ROMI превысил 800%....
18 05 2026 9:49:24
2 любопытные истории и 8 успешных стартапов, которые вас удивят....
17 05 2026 14:59:18
Объявление в тематике автошин — отличная тема для рекламы в интернете....
16 05 2026 21:29:33
История свидания двух ботов как иллюстрация развития искусственного интеллекта...
15 05 2026 20:21:37
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
14 05 2026 1:44:55
Как узнать, хорошую ли статью вы опубликовали в блоге...
13 05 2026 4:42:45
Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....
12 05 2026 6:30:47
Каковы интересы вашей аудитории, как люди находят ваш контент. Рассказываем обо всех возможностях от Search Console Insights....
11 05 2026 15:29:15
Поисковая реклама для службы доставки еды — пpaктические советы, как выделиться на фоне конкурентов в популярной нише. На примере харьковской доставки пиццы мы покажем, как правильно продавать еду. Читайте в статье!...
10 05 2026 17:27:55
Детально заполняйте карточку товара, добавляйте качественные фотографии, делайте акцент на УТП....
09 05 2026 14:32:28
И чем этот тип отслеживания событий отличается от Client-side. Узнать!...
08 05 2026 9:21:48
Особенности продвижения локального офлайн-бизнеса...
07 05 2026 1:35:17
Мы запустили email с нуля и стали получать стабильный ежемecячный доход....
06 05 2026 23:39:17
Менеджер экспортного направления Гугл Украина — об особенностях выхода на рынки разных стран мира....
05 05 2026 4:21:12
Информация для бизнесменов, интернет-маркетологов и всех, кто интересуется продвижением бизнеса в интернете....
04 05 2026 19:25:44
Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....
03 05 2026 20:56:49
Информация для SEO- и PPC-специалистов, маркетологов и предпринимателей малого бизнеса...
02 05 2026 3:31:34
Клиентоориентированный бизнес должен знать, чего хотят покупатели. И лучше понять это еще на этапе идеи. Как — читайте чек-лист от Влада Ноздрачева....
01 05 2026 11:32:11
Полезный и интересный контент — это лучший крючок, который помогает привлечь новых клиентов на аграрном рынке и удержать их внимание....
30 04 2026 12:38:39
CEO магазина «Модна Каста» Андрей Логвин — сделал отличный доклад на 8P о пути к успеху своего бизнеса и будущем Ecommerce. Детальнее об ощущении deal и «первом дне» для интернета читайте в новом посте....
29 04 2026 9:32:48
Как продвинуть бренд в конкурентной тематике? Читаем новый кейс по видеорекламе....
28 04 2026 6:40:46
Отныне мы можем настраивать показы рекламы на мужчин и женщин определенной возрастной группы....
27 04 2026 21:48:14
Брендовые или витальные запросы содержат только название компании или бренда, без дополнительных уточнений...
26 04 2026 9:42:15
Как улучшить видимость сайта после оптимизаторов-староверов — кейс в тематике «световое и звуковое оборудование»....
25 04 2026 10:47:57
9 тревожных признаков того, что ваши подчиненные могут выгореть и уволиться. Обратите внимание и, возможно, не придется терять ценных для компании людей....
24 04 2026 19:18:44
Как сделать склейку и сохранить трафик, распространенные ошибки при склеивании. Узнать больше!...
23 04 2026 18:10:24
Google Data Studio: подробная инструкция и обзор возможностей...
22 04 2026 19:56:28
Шаблон по настройке и оптимизации динамических поисковых объявлений...
21 04 2026 21:18:59
Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....
20 04 2026 5:28:23
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
19 04 2026 5:50:17
Понятная инструкция для SMM-специалистов для тех, кто экспериментирует с настройками аудиторий в рекламных кампаниях. Вы увидите, как настраивать ремаркетинг на примере Facebook. Существует 10 типов индивидуализированных аудиторий в Facebook, разберем три...
18 04 2026 1:58:45
Проверка структурированных данных поисковыми роботами нуждается в нашей поддержке...
17 04 2026 1:59:15
Владельцы айфонов в странах арабского мира легче расстаются с деньгами за приложения. Вот почему арабская локаль в App Store так привлекательна...
16 04 2026 6:14:39
Обзор ресурса по подбору ключевых запросов www.SEMRUSH.com на Netpeak.ua...
15 04 2026 18:51:20
Инструкция по интеграции рекламной кампании с чат-ботом...
14 04 2026 1:35:22
Не хотите настраивать объявление в Google Рекламе и Яндекс.Директ по отдельности? Узнайте, как сделать экспорт кампании и сэкономить время....
13 04 2026 1:10:45
Как бизнес подстраивается под новые привычки покупателей в стиле фиджитал и O2O2O....
12 04 2026 4:10:16
Программа знаний и умений, чтобы стать Project Manager в агентстве интернет-маркетинга...
11 04 2026 2:19:16
Чтобы создать позитивный образ компании, бренда, персоны или работодателя в поисковых системах, нужно приложить много усилий. Но, поверьте, результат того стоит. И начать стоит с репутационного аудита....
10 04 2026 15:53:32
Увлекательные истории от специалиста по контекстной рекламе....
09 04 2026 16:16:53
Сколько страниц на самом деле показывает и может перевести поисковик Google?...
08 04 2026 6:12:35
Андрей Чумаченко про будни топ-менеджера, постановку, декомпозицию, помощь и контроль выполнения задач сотрудниками комaнд, которые входят в состав департамента маркетинга, а также о регулярных встречах и тонкостях работы. Узнать больше!...
07 04 2026 18:49:24
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
06 04 2026 7:54:19
Узнать, как управлять репутацией в сети для молодой компании, можно в статье Netpeak Journal: что такое репутация, как формируется образ бренда и что нужно делать для получения положительных отзывов....
05 04 2026 5:26:50
Итоги одной из наших первых онлайн рекламных кампаний в Play...
04 04 2026 13:35:59
К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...
03 04 2026 22:22:14
Электронный кошелек — это виртуальная ячейка для хранения денежных средств. Каждая такая ячейка обладает уникальным цифровым определителем и может принадлежать одному человеку....
02 04 2026 18:30:56
Понятный алгоритм анализа поисковых запросов с экономией времени на чистку по специальному шаблону модерации...
01 04 2026 23:25:29
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
