Как эффективно использовать Network в Chrome DevTools > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Как эффективно использовать Network в Chrome DevTools

Как эффективно использовать 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:

  1. Откройте целевую страницу.
  2. Ctrl+Shift+C/Command+Option+C или F12.
  3. Вкладка Network.

  1. Обновите страницу (Ctrl+F5/Command+R).
  2. Найдите основной URL (адрес страницы, которую мы изучаем). В колонке Status можно увидеть ответ сервера для данной страницы.

Например, нам нужно узнать ответ сервера для страницы:

Таким образом можно быстро проанализировать ответ сервера страницы и ее отдельных элементов. Увидеть, например, «битые» картинки.

Просмотр заголовков HTTP

Изначально ход проверки такой же, как и в случае с ответом сервера.

Но после пятого пункта появится шестой:

  • на панели справа (с более подробной информацией) можно увидеть, какие заголовки HTTP настроены сейчас.

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

Смена User-Agent

Если вы хотите просматривать свой сайт так же, как это делает Google, переключите пользовательский агент на тот, который использует Google.

  1. Заходите в дополнительные настройки DevTools.
  2. Выбираете Network Conditions.

  1. Внизу панели появится рабочее прострaнcтво с нужным функционалом.

  1. Снимаете флажок Select automatically и выбираете, например, Googlebot Smartphone.

  1. Перезагружаете страницу.

Вы можете проанализировать, как определенный браузер видит ваш сайт и выявить проблемы, если они есть.

Определение ресурсов, блокирующих рендеринг

Используйте данные о времени загрузки ресурсов на панели Network, чтобы определить, какие ресурсы JS и CSS загружаются до DOM и потенциально блокируют его. Фильтруя данные по CSS и JS, можно вычислить проблемные ресурсы.

Блокировка скриптами и по стилям загрузки — одна из наиболее распространенных проблем со скоростью страницы. Их поиск и анализ ее улучшит или увеличит.

Проверка времени загрузки страницы и ее отдельных элементов

Когда во вкладке Network подгружается информация по странице, можно узнать данные по скорости загрузки каждого отдельного ресурса на ней и общего времени загрузки всей страницы.

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

Выводы

  1. Панель Network в Chrome DevTools можно настроить «под себя». Например, скрыть неиспользуемые столбцы сетевого журнала, фильтровать данные, в том числе по типу ресурса, отключать запись сетевого журнала или регулировать скорость подключения.
  2. Для SEO-специалиста инструмент полезен, в первую очередь, тем, что позволяет сделать проверку ответа сервера или просмотреть заголовки HTTP.
  3. Чтобы увидеть, как ваш сайт просматривает Google, вы можете сменить пользовательский агент.
  4. Можете также определить ресурсы, блокирующие рендеринг или проверить время загрузки страницы.

Таким образом, при эффективном использовании панель Network дает немало возможностей для SEO-оптимизации сайта.



Комментарии:

Товарные фиды для динамических кампаний в Яндекс.Директ: элементы и примеры

Товарные фиды для динамических кампаний в Яндекс.Директ: элементы и примеры Как подготовить фиды в Яндекс.Директ для разных тематик...

11 06 2025 0:18:24

6 эффективных приемов работы в Директ Коммaндере

6 эффективных приемов работы в Директ Коммaндере Быстрые ссылки и другие советы на тему того, как эффективно работать в Директ Коммaндере....

10 06 2025 8:48:53

Long-tail SEO — как продвигаться по низкочастотным запросам и зачем это нужно

Long-tail SEO — как продвигаться по низкочастотным запросам и зачем это нужно Относящиеся к низкочастотным long-tail запросы при правильном подходе могут стать эффективным инструментом для увеличения трафика. Рассказываем почему, а главное — как....

09 06 2025 19:36:37

Старт нового рейтинга зарплат Serpstat: как коронакризис повлиял на заработок интернет-маркетологов в 2020

Старт нового рейтинга зарплат Serpstat: как коронакризис повлиял на заработок интернет-маркетологов в 2020 Узнайте зарплату интернет-маркетологов с новым рейтингом от Serpstat....

08 06 2025 18:25:43

Как запустить контекстную рекламу в Японии и не сойти с ума

Как вести успешную рекламную кампанию в Японии, не зная языка....

07 06 2025 2:17:50

Что такое гонзо-копирайтинг и как его определить?

Что такое гонзо-копирайтинг и как его определить? Примеры креативного авторского стиля копирайтеров, которые старались обыграть УТП продукта, услуги, стремились необычно подать обычное. Узнать больше!...

06 06 2025 1:22:22

Global Tag Site — обзор фреймворка от Google

Global Tag Site — обзор фреймворка от Google Почему имеет смысл выбрать его, а не Google Tag Manager?...

05 06 2025 19:46:47

Девять фишек для онлайн-бизнеса: итоги круглого стола Netpeak Friends Day в Казахстане

Девять фишек для онлайн-бизнеса: итоги круглого стола Netpeak Friends Day в Казахстане Девять свежих советов для продвижения интернет-магазинов...

04 06 2025 0:38:13

Сколько стоил клик Google Ads и Facebook в Украине в четвертом квартале 2017 года

Сколько стоил клик Google Ads и Facebook в Украине в четвертом квартале 2017 года Данные по 34 миллионам кликов в 24 тематиках и 386 городах...

03 06 2025 16:30:55

Как стать контент-маркетологом в Netpeak Group

О работе внутреннего и внешнего контент-маркетолога: необходимые знания и навыки для старта, плюшки и головная боль. Все здесь....

02 06 2025 7:11:25

Бесплатные обратные звонки — модель freemium в действии

Бесплатные обратные звонки — модель freemium в действии Бесплатные продукты для онлайн-бизнеса — история внедрения freemium модели в сфере виджетов обратных звонков....

01 06 2025 11:56:52

Сплит-тест — скоростное шоссе к высокой конверсии

Сплит-тест — скоростное шоссе к высокой конверсии 5 кейсов отлично иллюстрируют правила юзабилити и находки веб-аналитиков....

31 05 2025 12:49:11

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров

Апдейты поисковых алгоритмов Google, Яндекса и ручные санкции — мануал для вебмастеров Почему сайт упал в выдаче и какой апдейт алгоритма поисковика на это повлиял...

30 05 2025 17:40:29

10 неочевидных функций приложения для скриншотов KISS

10 неочевидных функций приложения для скриншотов KISS Опции скриншутера, которые упростят вам жизнь....

29 05 2025 9:53:37

Семь улучшений Netpeak: SEO, PPC и английская версия блога. Выпуск первый

Семь улучшений Netpeak: SEO, PPC и английская версия блога. Выпуск первый Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....

28 05 2025 1:14:20

Как нанять маркетолога и не уволить через месяц

Как нанять маркетолога и не уволить через месяц Краткая инструкция по поиску идеального кандидата, потому что (как видим) многим на рынке все еще сложно найти хорошего маркетолога. Да и понять, стоит ли вкладывать в сотрудника силы, время, средства с первой встречи достаточно сложно....

27 05 2025 21:21:27

Как быстро найти ошибки SEO-оптимизации с помощью Netpeak Spider

Как быстро найти ошибки SEO-оптимизации с помощью Netpeak Spider Сохраняем время и ресурсы для проверки типичных задач и тратим его на реализацию креативных идей по оптимизации сайта....

26 05 2025 0:42:10

Что такое CTA: как сформировать эффективный призыв к действию

Основная цель CTA — помочь посетителю принять решение о покупке, скачивании, регистрации или подписке...

25 05 2025 16:29:28

Три уровня оптимизации рекламной кампании в Google Ads

Предположим, что оптимизация в аккаунте похожа на реальный мир и рассмотрим несколько примеров :)...

24 05 2025 0:44:36

Кейс по продвижению интернет-магазина детской обуви: ROMI 135%

Кейс по продвижению интернет-магазина детской обуви: ROMI 135% Покажем, как продвигать сайты, продающие детскую обувь...

23 05 2025 13:39:46

Как сделать зеркало сайта

Как сделать зеркало сайта Зеркалами считаются сайты с разными доменными именами, но идентичным контентом...

22 05 2025 4:40:23

Как проверить сезонность спроса

Сезонность — повторяющиеся колебания трафика сайта в зависимости от различных внешних факторов....

21 05 2025 19:30:28

Зачем нужна платформа Apple Search Ads при продвижении мобильного приложения

Зачем нужна платформа Apple Search Ads при продвижении мобильного приложения Реклама в ASA значительно повышает эффективность ASO....

20 05 2025 17:46:36

myTarget: 10 фишек для продвижения мобильных приложений

myTarget: 10 фишек для продвижения мобильных приложений Look-alike аудитории, таргетинг на участников групп, ограничение стоимости установки и другие вкусные фишки myTarget...

19 05 2025 6:16:35

Всемогущая функция Query — подробное руководство

Как пользоваться одной из самых важных функций Google Таблиц — подробное руководство по Query...

18 05 2025 20:46:52

Как быстро собрать данные из блока People also ask в Google

Мануал для SEO-специалистов, как автоматизировать сбор данных из блока People also ask (Пользователи также ищут). Это блок, который показывается в верхней части страницы результатов поиска. Он нужен, чтобы уточнить запрос пользователя....

17 05 2025 6:19:36

Бизнес в сети — дайджест полезных статей о 8P и не только

Бизнес в сети — дайджест полезных статей о 8P и не только Как провести крутую конференцию по интернет-маркетингу, сделать трaнcляцию этой конференции и вместо сухих репортажей подготовить полезный контент для СМИ. Узнать больше....

16 05 2025 11:47:42

Работа с автоматическими типами кампаний на Facebook

Работа с автоматическими типами кампаний на Facebook Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...

15 05 2025 19:19:33

Девять неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2018

Девять неочевидных и пpaктически применимых SEO-фишек — круглый стол 8P 2018 Нет новых идей для развития рекламной компании? Одобренные рекомендации по поисковому продвижению от экспертов: спикеров и участников 8P 2018...

14 05 2025 9:50:15

Как обойти агрегаторы и маркетплейсы в выдаче: пошаговая инструкция

Как обойти агрегаторы и маркетплейсы в выдаче: пошаговая инструкция Доминирование маркетплейсов и агрегаторов в Яндексе усилилось. Первый магазин появляется не раньше 5 позиции. Поэтому компания Alto подготовила пошаговое руководство - как обойти агрегаторы в выдаче....

13 05 2025 4:15:15

Измеряем прирост базы подписчиков, как это делают email-маркетологи

Измеряем прирост базы подписчиков, как это делают email-маркетологи Разбираемся, как определить самые эффективные источники лидов....

12 05 2025 5:25:55

Особенности регионального продвижения сайтов

Особенности регионального продвижения сайтов SEO-специалисты используют создание поддоменов, подпапок или отдельных доменов...

11 05 2025 14:12:28

Продвижение мобильного приложения с помощью Google Ads, YouTube, ВКонтакте, Facebook, Yandex.Store и iAD

Продвижение мобильного приложения с помощью Google Ads, YouTube, ВКонтакте, Facebook, Yandex.Store и iAD В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....

10 05 2025 5:24:32

Аудит аккаунта Google Рекламы своими силами

Аудит аккаунта Google Рекламы своими силами Одесса. Конференция «Контекстная реклама 2013». Самые полезные настройки рекламной кампании....

09 05 2025 14:49:59

Как выбрать сервис email-рассылок за 15 дней — кейс агентства Netpeak

Как выбрать сервис email-рассылок за 15 дней — кейс агентства Netpeak У нас на руках оказались все карты для создания собственного мини-рейтинга популярных сервисов email-рассылок....

08 05 2025 15:14:42

Как должна выглядеть форма онлайн-заказа — подробный чек-лист

Как должна выглядеть форма онлайн-заказа — подробный чек-лист Образец чек-листа по созданию форм заказа на сайте интернет-магазина...

07 05 2025 21:27:31

Зачем рассказывать о своем бизнесе в интернете. Рассуждения скромного предпринимателя

Если вы до сих пор сомневаетесь — прекратите это и делитесь своим опытом с читателями, потенциальными клиентами, инвесторами и партнерами. Узнать больше!...

06 05 2025 2:48:23

Рекламные кампании в LinkedIn: как настроить отслеживание конверсии

Рекламные кампании в LinkedIn: как настроить отслеживание конверсии Метод настройки с помощью Google Tag Manager. Мануал с подробным описанием каждого шага — показываем на примере, как отслеживать веб-конверсии в рекламных кампаниях LinkedIn. Узнать больше!...

05 05 2025 1:50:42

Корпоративные академии. Как обучать сотрудников и клиентов в кризис и после него

Корпоративные академии. Как обучать сотрудников и клиентов в кризис и после него Обзор главных преимуществ, которые дают облачные академии бизнесу....

04 05 2025 6:41:41

SSL-сертификат — что это такое и как он работает

SSL-сертификат — что это такое и как он работает Безопасное соединение, которое положительно оценивают не только поисковые роботы, но и пользователи. Особенно, если на сайте предстоит оставить личные данные. Читать!...

03 05 2025 10:31:11

Корпоративный Twitter: инструкция к применению

Корпоративный Twitter: инструкция к применению Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...

02 05 2025 3:51:28

Measurement Protocol — подключаем офлайн-бизнес к Google ***ytics

Measurement Protocol — подключаем офлайн-бизнес к Google ***ytics Measurement Protocol — метод передачи данных о продажах или любых других взаимодействиях с покупателями на сервера Google ***ytics пpaктически из любого источника: внутренней CRM-системы, базы данных и даже платежного терминала...

01 05 2025 7:33:55

Ведем паблик Facebook в режиме новостного медиа. MVP-эксперимент Netpeak Journal

Ведем паблик Facebook в режиме новостного медиа. MVP-эксперимент Netpeak Journal У нас было 500 вечнозеленых постов и желание понять алгоритм ленты Facebook....

30 04 2025 0:15:29

От хорошего к великому

От хорошего к великому Большой проект Джима Коллинза и его комaнды. Одна из лучших книг в нашей библиотеке. Всем рекомендуется к прочтению!...

29 04 2025 10:38:46

Как работать с API Яндекс.Метрики с помощью языка R

Как работать с API Яндекс.Метрики с помощью языка R Интерфейс прикладного программирования для работы с аккаунтами десятка сайтов....

28 04 2025 4:46:18

16 отчетов Яндекс.Метрики для анализа сайта и аудитории

16 отчетов Яндекс.Метрики для анализа сайта и аудитории Многие специалисты недооценивают эффективность отчетов Яндекс.Метрики. Очень зря. Вот чем они могут быть полезны....

27 04 2025 12:25:56

Как создать YouTube канал для бренда

Как создать YouTube канал для бренда Создание канала бренда на видеоплатформе необходимо для увеличения притока трафика, улучшения репутации и поискового продвижения компании...

26 04 2025 3:45:32

Как запустить рекламу на Reddit — руководство для новичка

Как запустить рекламу на Reddit — руководство для новичка 330 миллионов активных пользователей и 14 миллиардов просмотров в месяц. Хорошо бы там запускать рекламные кампании....

25 04 2025 0:41:11

Продвижение недвижимости: как снизить стоимость заявки на 46% — кейс

Продвижение недвижимости: как снизить стоимость заявки на 46% — кейс Работа с умными рекламными кампаниями с оплатой за конверсии в контекстно-медийной сети. Особенности настройки и оптимизации в кейсе продвижения недвижимости. Узнать больше!...

24 04 2025 7:40:34

На что обратить внимание при выборе движка для сайта

На что обратить внимание при выборе движка для сайта Готовые коробочные решения — отличная идея, которая решает много задач, а ещё это относительно недорого. Но такой вариант подойдет далеко не всем. Узнать больше!...

23 04 2025 19:20:47

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::