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



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

Двенадцать фишек для онлайн-бизнеса — круглый стол 8P 2016

Двенадцать фишек для онлайн-бизнеса — круглый стол 8P 2016 2013, 2014, 2015 — годы, когда конференция 8p радовала все сео-сообщество СНГ. Прошла она и в 2016 году. Мы собрали лучшие советы интернет-магазинам от экспертов и участников круглого стола на конференции 8P 2016....

26 05 2024 1:39:17

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

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

25 05 2024 15:58:43

Как продвигать каршеринг — обзор кейсов

Как продвигать каршеринг — обзор кейсов Особенности продвижения в нише аренды автомобилей по материалам кейсов наших коллег...

24 05 2024 5:52:40

Как вести личный блог

Как вести личный блог Если ваш товар или услуга будут хорошо выглядеть на фото или целевая аудитория точно находится в Инстаграм, площадка для будущего блога определена. Узнать больше!...

23 05 2024 22:26:10

Как продвигать мобильное приложение с ограниченным бюджетом? Руководство для новичков

Как продвигать мобильное приложение с ограниченным бюджетом? Руководство для новичков Программа покорения онлайн мира мобайла — самому и с ограниченными средствами на маркетинг...

22 05 2024 4:17:38

Чем наш PPC-отдел круче остальных?

Чем наш PPC-отдел круче остальных? Мария Гoлyб устала отвечать на вопрос «Какие преимущества PPC-отдела в Netpeak?» и решила написать об этом пост....

21 05 2024 17:30:54

Microsoft Power BI в интернет-маркетинге — дайджест полезных публикаций

Microsoft Power BI в интернет-маркетинге — дайджест полезных публикаций Как связать данные, полученные из множества различных источников, и визуализировать их в виде удобных интеpaктивных отчетов...

20 05 2024 19:19:12

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

Реклама медицинских услуг: требования и ограничения для контекстной рекламы Если ваша фирма работает на предоставление услуг в медицине, следует учесть требования рекламных систем в интернете, чтобы объявления в с первого раза прошли модерацию...

19 05 2024 18:57:37

5 инструментов для проверки юзабилити интернет-магазина

5 инструментов для проверки юзабилити интернет-магазина Несложные рекомендации, как увеличить продажи с сайта и его мобильной версии с помощью инструментов Google: ***ytics, Tag Manager, Optimizer и форм-опросов. UX-специалисты Турум-бурум рекомендуют их для проверки сайта и используют в своей работе....

18 05 2024 10:36:55

Особенности контекстной рекламы для 5 ниш бизнеса. Тематические стратегии Netpeak

Особенности контекстной рекламы для 5 ниш бизнеса. Тематические стратегии Netpeak Что учитывать при продвижении недвижимости, клиник красоты, магазинов косметики, сайтов по продаже семян, шин?...

17 05 2024 23:34:23

Как загрузить файл в корневой каталог сайта

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

16 05 2024 19:11:11

Наука быть счастливым: бесплатный онлайн-курс от профессора из Йеля

Профессор психологии Йельского университета разработала курс по обретению счастья. Его прошли уже 3,5 млн человек...

15 05 2024 8:19:27

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo

Как правильно зарегистрировать сайт в поисковых системах Google, Яндекс, Bing, Mail.ru, Rambler и Yahoo Бесплатная регистрация сайта в поисковых системах и каталогах – отличный способ увеличить объемы трафика и раскрутить собственный ресурс....

14 05 2024 4:36:15

Stories для бизнеса. Фишки вовлечения в Instagram

Stories для бизнеса. Фишки вовлечения в Instagram Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....

13 05 2024 20:58:53

Кейс Taketones: как за год увеличить трафик в 10 раз

Кейс Taketones: как за год увеличить трафик в 10 раз Продвижение музыкальной библиотеки. Со старта сотрудничества, трафик и основной ключ сайта клиента вырос в 10 раз. Регион продвижения — США....

12 05 2024 8:18:52

17 тезисов о том, как инвестировать в интернет-маркетинг

17 тезисов о том, как инвестировать в интернет-маркетинг Артем Шевченко (Epicentr), Михаил Рогальский (Monobank), Максим Дмитров (BSH Hausgeräte), Андрей Чумаченко (Netpeak) и другие участники конференции 8Р о том, как они рассчитывают инвестиции в интернет-маркетинг....

11 05 2024 7:24:49

Как собрать аудиторию подписчиков YouTube с 0 до 10 000 за год — кейс канала магазина для любителей рыбалки

Как собрать аудиторию подписчиков YouTube с 0 до 10 000 за год — кейс канала магазина для любителей рыбалки Кейс продвижения YouTube-канала магазина товаров для рыбалки...

10 05 2024 7:33:31

Репутация за деньги: откровения скупщика фейковых фолловеров

Раньше покупка фолловеров, лайков, репостов строго осуждалась. Сегодня это обычное дело. Всё больше сервисов предлагают по приемлемой цене купить репутацию в соцсетях: от лайков в Instagram до фолловеров в твиттере. Покупка фолловеров аукнется мне в будущ...

09 05 2024 21:17:19

Блокчейн, революция контент-маркетинга и cмepть автора

Блокчейн, революция контент-маркетинга и cмepть автора Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...

08 05 2024 22:35:12

Зачем нужна декомпозиция?

Зачем нужна декомпозиция? Или как не слить свой бюджет на рекламу....

07 05 2024 23:23:50

Коммуникация брендов на карантине: хорошие примеры SMM и PR

Что постить предпринимателям в соцсетях. Несколько примеров уместной работы SMM- и PR-специалистов, которые прямо и четко помогают озвучить позицию бизнеса в период карантина. Узнайте больше, чем действовать правильно!...

06 05 2024 16:16:55

Как проверить качество кампаний в Google Рекламе за 10 минут

Как быстро определить, что ваш подрядчик плохо работает с рекламной кампанией....

05 05 2024 20:27:34

SEO в нише онлайн-образования. Исследование Serpstat

SEO в нише онлайн-образования. Исследование Serpstat Комaнда Serpstat проанализировала стратегии продвижения лидеров ниши онлайн-образования. Читайте о главных инсайтах в посте....

04 05 2024 3:45:16

Как работать с репутацией медицинского бренда в интернете — кейс Synevo

Как работать с репутацией медицинского бренда в интернете — кейс Synevo Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....

03 05 2024 15:35:45

Рекламный кабинет в Facebook — пять фишек для упрощения работы

Рекламный кабинет в Facebook — пять фишек для упрощения работы Возможности для специалистов по рекламе в Facebook, о которых знают далеко не все. Подробности — тут....

02 05 2024 8:32:53

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

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

01 05 2024 12:49:56

Engagement Rate в email-маркетинге: что это, как посчитать и повысить

Engagement Rate в email-маркетинге: что это, как посчитать и повысить Определяем, кто из mail подписчиков предан вашему бренду по-настоящему....

30 04 2024 9:16:13

Кейс по продвижению интернет-магазина велосипедов и велозапчастей: ROMI 58%

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

29 04 2024 23:10:20

Восемь советов успешного запуска рекламной кампании в myTarget

Восемь советов успешного запуска рекламной кампании в myTarget Делимся фишками, которые облегчат работу как новичкам, так и специалистам....

28 04 2024 12:24:40

Как использовать футпринты в SEO-продвижении

Как использовать футпринты в SEO-продвижении Футпринт — это признак, по которому можно спалить PBN-сетку сайтов. Это как родинки. Если взять двух парней с родинкой на щеке, то не факт, что они братья. Но если родинки совпадают на щеке, локте и колене, то тут что-то подозрительное...

27 04 2024 9:23:46

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

Как узнать, было ли прочитано ваше письмо адресатом? Метод не для всех, но увлеченным веб-аналитикой точно понравится!...

26 04 2024 8:21:19

Как привлечь дополнительный трафик с помощью SNDS-кампаний — кейсы Netpeak

Как привлечь дополнительный трафик с помощью SNDS-кампаний — кейсы Netpeak Как получить больше конверсионного трафика из поиска и не выйти за рамки KPI? Запустите SNDS-кампании...

25 04 2024 14:47:43

Обзор Netpeak Spider 2.1: классификация ошибок, выбор параметров, новая логика работы с результатами

Обзор Netpeak Spider 2.1: классификация ошибок, выбор параметров, новая логика работы с результатами Встречайте Netpeak Spider 2.1 — программу, предназначенную для обнаружения и уничтожения ошибок внутренней оптимизации сайта. Мы хотим, чтобы 4 августа 2016 года запомнилось вам как «День кроулинга»!...

24 04 2024 16:12:15

Как найти фейковые 404 страницы с помощью Google Tag Manager

Как найти фейковые 404 страницы с помощью Google Tag Manager Как помешать фейковым 404 страницам испортить статистику вашего сайта?...

23 04 2024 2:40:11

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов

Странные сайты — 40 диких, симпатичных и очень талантливых ресурсов И уж если бумага стерпит все, интернет — тем более, а значит онлайн-исповедальне быть! И не только ей......

22 04 2024 8:15:14

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

План продвижения мобильного приложения — подробный чек-лист Уже сейчас в Google Play и App Store миллионы приложений. Как сделать так, чтобы приложение получило достаточное количество установок и приносило доход? Читайте об этом далее и изучайте наглядную инфографику!...

21 04 2024 8:20:28

Аналитика в Твиттер: ссылки, ведущие на сайт

Аналитика в Твиттер: ссылки, ведущие на сайт Короткий прогон сервисов для аналитики активности в Твиттер....

20 04 2024 15:46:55

Google Penguin: как защитить свои позиции в выдаче

Google Penguin: как защитить свои позиции в выдаче Google Penguin официально стал частью основного алгоритма поисковика. Как обезопасить свой бизнес и встретить апдейт алгоритма Google во всеоружии? О трафике, анкорах, бэклинках, ссылках и ссылочной массе, трастовости и постоянном мониторинге, с комментариями специалистов...

19 04 2024 16:28:14

Как подключить Яндекс.Метрику к Яндекс.Директу

Как подключить Яндекс.Метрику к Яндекс.Директу Чтобы грамотно анализировать статистику рекламных кампаний, необходимо связать Яндекс.Метрику и Яндекс.Директ. Рассказываем, как это сделать...

18 04 2024 16:57:29

8 сервисов автопроверки on-page ошибок

Платные и бесплатные способы ускорить оптимизацию....

17 04 2024 4:40:36

Как отфильтровать внутренний трафик в Google ***ytics

Как отфильтровать внутренний трафик в Google ***ytics Фильтруем свой трафик от сотрудников в Google ***ytics...

16 04 2024 5:47:36

Как подключить API Google Search Console к Google Таблицам

Как подключить API Google Search Console к Google Таблицам Новая инструкция, которую можно применять к любым задачам в Google Таблицах....

15 04 2024 19:51:16

Как быстро почистить трэш-площадки в контекстно-медийной сети Google

Как быстро почистить трэш-площадки в контекстно-медийной сети Google Если хотите, чтобы кампании в контекстно-медийной сети работали эффективно, следует очистить площадки и ввести это в привычку...

14 04 2024 5:12:30

Актуальна ли классическая воронка продаж?

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

13 04 2024 5:47:47

Сколько стоил клик по рекламе Ads, Директ и Facebook в Украине во втором квартале 2017

Сколько стоил клик по рекламе Ads, Директ и Facebook в Украине во втором квартале 2017 Я исследовал 23 миллиона кликов из Украины в Google Ads, Facebook, Директ и структурировал данные по 19 тематикам...

12 04 2024 7:16:47

С чего начать обучение SEO и как понять, что это «твоё»

С чего начать обучение SEO и как понять, что это «твоё» Как определить, что SEO-продвижение не будет в тягость, что и кого читать начинающему специалисту...

11 04 2024 18:40:22

Блог Netpeak 2.0 — мы всё поменяли, и вот почему

Блог Netpeak 2.0 — мы всё поменяли, и вот почему Блог на новом движке и с новым дизайном, перетянувший в себя огромное количество постов и комментариев за Х лет своей работы...

10 04 2024 16:16:56

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников

Как импортировать данные из Google ***ytics в Excel с помощью Excellent ***ytics — мануал для чайников Ексель для чайникiв. Как импортировать всю необходимую информацию из Google ***ytics с помощью простого интерфейса Excellent ***ytics....

09 04 2024 10:45:49

Как передать данные из Google ***ytics в таблицы с помощью GTM

Как передать данные из Google ***ytics в таблицы с помощью GTM Не все события удобно отслеживать в Google ***ytics, иногда удобнее сделать связку с таблицами Google. А поможет в этом Google Tag Manager...

08 04 2024 14:16:31

Как перенести интернет-магазин с российских платформ

Как перенести интернет-магазин с российских платформ На украинском рынке услуг велик выбор качественных платформ. Главное понимать, как правильно проводить миграцию....

07 04 2024 20:18:52

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