Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Что нужно учесть при создании баннеров для разных аудиторий...
16 04 2026 4:27:21
О тенденциях на рынке ecommerce и переходе Хорошоп на удалёнку....
15 04 2026 9:44:48
Аналитик Netpeak Алексей Селезнев рассказал, как составить и пользоваться сводными таблицами онлайн в excel и за считанные секунды выделить нужные для анализа данные из десятков тысяч строк в отчетах Google ***ytics...
14 04 2026 20:10:13
Что постить предпринимателям в соцсетях. Несколько примеров уместной работы SMM- и PR-специалистов, которые прямо и четко помогают озвучить позицию бизнеса в период карантина. Узнайте больше, чем действовать правильно!...
13 04 2026 3:59:25
Пример, как 4000+ гривен превращаются в 45000+ гривен. Ниша интернет-магазинов, да еще и бытовой техники уже давно является высококонкурентной. Но при правильном продвижении даже новичок может добиться результатов....
12 04 2026 6:31:47
Как определить и повысить качество парсинга ключевых слов — лайфхак с применением Microsoft Excel....
11 04 2026 3:16:38
Создание успешного стартапа в нише телемедицины. Без дополнительных трат увеличил за 6 месяцев доход на 1983%, а клиентскую базу — более чем на 1000%....
10 04 2026 10:46:52
Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....
09 04 2026 16:29:53
Инструкция по интеграции рекламной кампании с чат-ботом...
08 04 2026 7:20:22
Такое обозрение очередной новинки Google от Сергея Бахаря...
07 04 2026 20:49:49
Можно ли получить больше заявок, используя динамическую подмену заголовка? Кейсы в разных тематиках...
06 04 2026 15:13:29
От наличия отзывов зависит решение клиента купить товар или заказать услугу. Как правильно работать с репутацией? Разбираемся...
05 04 2026 17:32:57
Директ Коммaндер от Яндекса позволяет легко работать с большими кампаниями...
04 04 2026 10:14:37
Читайте простой мануал о том, как перейти на Universal ***ytics и не поломать весь сбор данных...
03 04 2026 0:22:58
Чтобы обезопасить себя и своих клиентов, используйте технологию 3D Secure. Больше рекомендаций — в статье....
02 04 2026 14:51:26
О том, как работают, празднуют, танцуют и в какой корпоративной культуре живут сотрудники корпорации Google. Этот пост развеет кое-какие мифы....
01 04 2026 7:48:17
Первое подробное руководство по работе с оконными функциями в Google BigQuery....
31 03 2026 21:40:42
Рассказываем о том, что такое Песочница, как сюда писать и получать больше аудитории для своего бизнеса...
30 03 2026 2:46:44
Рекламируем онлайн-уроки к 1 сентября. Именно сочетание Facebook и Google Ads помогло нам сначала обратиться к родителям (которые, например, листают соцсеть по пути домой) и потом уже напомнить о себе с помощью Google Рекламы...
29 03 2026 1:20:19
Обычно SaaS-бизнесы начинают привлечение лидов с запуска рекламы на Facebook. Но наш опыт говорит о том, что это не самые подходящие каналы. Более высокие результаты можно получить на LinkedIn....
28 03 2026 1:41:48
Помимо полезного и качественного продукта, услуги, компании нужен мощный маркетинг. И возможно это только благодаря хорошему директору по маркетингу. Только так это работает. Кто лучшие в этой нише в Казахстане? Узнать!...
27 03 2026 9:22:12
Лайфхаки, как упростить работу с соцсетями от специалиста агентства Netpeak и ежедневной работы SMM-специалиста. Телеграм-боты, которые облегчат рутину и сэкономят время. Узнать больше!...
26 03 2026 18:44:19
Как узнавать эффективность страницы мобильного приложения в Play Маркете? Учимся работать в Google Play Developers Console....
25 03 2026 21:23:15
Метод не для всех, но увлеченным веб-аналитикой точно понравится!...
24 03 2026 22:26:14
Советы и даже требования SEO-специалистов к разработчикам сайтов....
23 03 2026 10:17:51
Как и кто создает новые услуги в Netpeak и что нужно знать, уметь, чтобы это делать? Рассказывает Елена Воскобойник, специалист, которая иногда разpaбатывает их почти с нуля. Читать!...
22 03 2026 6:23:10
Истории бизнеса и советы от Игоря Жаданова (Readdle), Александра Галкина (Competera) и Рагнара Саас (Pipedrive)...
21 03 2026 18:57:18
Внедрение скрама, чтобы решить проблемы в управлении бизнесом, год работы на нем и отказ от методологии. Читайте об опыте Boosta, которая объединяет 9 SEO-комaнд на удаленке....
20 03 2026 14:22:26
В продажах лучше визуализировать путь потребителя в виде нейронных сетей....
19 03 2026 16:23:44
Данные по 42,5 млн кликов в 25 тематиках и 391 городу...
18 03 2026 3:53:20
Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...
17 03 2026 9:40:15
Как завоевать Instagram, задавая правильные цели и вопросы. Также в статье делимся табличкой лучшего времени постинга для различных тематических публикаций. Узнать больше!...
16 03 2026 13:29:50
Вам тоже нужно предоставлять отчеты о работе рекламной кампании, посещение сайтов? Держите три примера работы с Google ***ytics и понятных отчета по ним, которые можно продемонстрировать, не открывая доступ к аккаунту....
15 03 2026 3:25:31
То, как вы читаете на мониторе или в смартфоне, значительно отличается от чтения книги или печатного журнала. Когда вы пишете текст для веба, очень важно знать об этой особенности....
14 03 2026 18:36:23
Встречайте Netpeak Spider 2.1 — программу, предназначенную для обнаружения и уничтожения ошибок внутренней оптимизации сайта. Мы хотим, чтобы 4 августа 2016 года запомнилось вам как «День кроулинга»!...
13 03 2026 19:56:28
Статья Оливера Гарднера посвящена различным аспектам оптимизации посадочных страниц: дизайну, контексту, созданию кнопки действия...
12 03 2026 0:38:44
Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...
11 03 2026 11:33:39
Как написать годный кейс и победить страх чистого листа...
10 03 2026 7:57:10
Проведение краудфандинговых кампаний — это бизнес. Это отдельный и вполне серьёзный рынок с уймой заточенных под ваши нужды услуг. Раньше нужно было ждать, пока проект пройдет обязательную проверку сотрудником Kickstarter, сейчас можно запускать кампанию...
09 03 2026 10:22:23
Четкая структура полноценного письма с примерами из рассылок крупных компаний: Aviasales, LinguaLeo, Rozetka, Yves Rocher, Pich Shop, Эльдорадо и другие....
08 03 2026 18:13:44
У каждого сайта в топе есть страница, о существовании которой знают только роботы и... SEO-специалисты. Это robots.txt или индексный файл....
07 03 2026 9:14:10
Какие фишки влияют на видимость сайтов? Советы по юзабилити от SEO-специалиста....
06 03 2026 16:25:21
Как создать Apple ID и настроить поисковую рекламу в App Store...
05 03 2026 7:21:50
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
04 03 2026 7:15:12
На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....
03 03 2026 19:42:10
Три способа парсинга данных с помощью Owox BI Pipeline, Mix Data BI Import, Owox BI Power Upload....
02 03 2026 7:24:20
В мае прошлого года Google анонсировал выход нового Core Web Vitals. Что это и как будет работать рассмотрим в статье...
01 03 2026 5:33:14
Функционал для специалистов и новичков: как настраивать особые правила. Знания, которые помогают предотвратить грубые ошибки в рекламе товаров и услуг. Читать дальше!...
28 02 2026 23:15:52
Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...
27 02 2026 0:14:31
Если вам нужно быстро изменить небольшой объем контента на сайте без доступа к CMS, можно воспользоваться GTM. Как именно, читайте дальше....
26 02 2026 15:17:11
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
