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



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

Первая помощь в офисе — как вести себя в нештатных ситуациях

Первая помощь в офисе — как вести себя в нештатных ситуациях Человеку стало плохо, он теряет сознание. Те, кто рядом, хотят помочь, но не знают, как это сделать. Давайте разбираться....

28 09 2022 2:44:54

Как делать картинки для соцсетей в Canva

Как делать картинки для соцсетей в Canva Как быстро залить изображение, сделать красивую иллюстрацию, наложить надпись к любому тексту онлайн?...

27 09 2022 4:45:34

Как делать email-рассылку без попадания в спам и что делать, если это случилось

Как делать email-рассылку без попадания в спам и что делать, если это случилось Легче запомнить алгоритм правильной отправки писем, чем потом вытягивать их из папки со спамом....

26 09 2022 13:20:19

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии

Seznam, откройся: подробное руководство по настройке контекстной рекламы в Чехии Seznam.cz — одна из пяти поисковых систем в мире, сумевших в отдельно взятой стране стать популярнее Google...

25 09 2022 7:29:33

Видеореклама в Google Ads: как оставить только релевантные площадки

Видеореклама в Google Ads: как оставить только релевантные площадки Четыре способа исключить нерелевантные места размещения видеорекламы, а также полезные списки минус-слов и детских YouTube-каналов....

24 09 2022 18:22:24

Импорт офлайн-конверсий Google Рекламы. Подробный инструктаж

Импорт офлайн-конверсий Google Рекламы. Подробный инструктаж Крутые площадки для нового инструмента: контекстщикам на заметку!...

23 09 2022 1:30:37

Частотность‌ ‌запросов‌ ‌и‌ ‌техника‌ ‌ее‌ ‌определения‌

Частотность‌ ‌запросов‌ ‌и‌ ‌техника‌ ‌ее‌ ‌определения‌ Определение частотности запросов — задача первоочередной важности для составления адекватного семантического ядра, наполнения качественным контентом и контекстной рекламой...

22 09 2022 22:59:11

Как наполнять контент-план — мнения редакторов

Как наполнять контент-план — мнения редакторов Почему контент-план — не тетка, или о том, в какой последовательности выкладывать статьи...

21 09 2022 2:45:32

13 пpaктически применимых фишек для интернет-магазинов — круглый стол 8P 2017

Как создать популярный и удобный магазин в интернете, какой должна быть его раскрутка и многое другое, прозвучавшее на круглом столе 8P 2017...

20 09 2022 18:46:33

Анализ конкуренции в Google Рекламе

Расскажем в двух словах о всеми забытой функции «Анализ конкуренции»....

19 09 2022 6:53:41

Продвижение мобильного приложения в Яндекс.Директ — руководство для новичков

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

18 09 2022 0:45:16

Функции вычисляемых полей Google Data Studio

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

17 09 2022 16:29:40

Как следить за позициями сайта в мобильной выдаче

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

16 09 2022 8:13:51

10 онлайн способов улучшить контент

10 онлайн способов улучшить контент Как преодолеть онлайн писательский ступор, разобраться с рутиной и освободить время для экспериментов...

15 09 2022 6:23:40

SEO-среда: отcлеживание целей и настройка событий

SEO-среда: отcлеживание целей и настройка событий Настройка целей в Google ***ytics, а также отслеживание событий....

14 09 2022 4:26:20

Не злите голодных людей — оптимизируйте сайт и рекламу с помощью специальной PPC-стратегии

Не злите голодных людей — оптимизируйте сайт и рекламу с помощью специальной PPC-стратегии Опыт, накопленный за более чем 10 лет работы в нише и упакованный в специальные предложения....

13 09 2022 8:52:22

Кейс по контекстной рекламе в тематике «трудоустройство»

Кейс по контекстной рекламе в тематике «трудоустройство» Конкректная цель — конкретные результаты трудоустройства...

12 09 2022 1:51:57

Как поисковые системы индексируют сайт

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

11 09 2022 5:54:57

Продвижение детской костюмерной Colombina.ua — рост заявок на 227% в сезон

Кейс детской костюмерной Colombina.ua — как продвигать проект с ярко выраженной сезонностью....

10 09 2022 22:15:13

Креативное SEO: нестандартные методы продвижения для всех типов сайтов

Креативное SEO: нестандартные методы продвижения для всех типов сайтов Правильное продвижение сайта и нестандартные предложения по привлечению трафика...

09 09 2022 21:33:51

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

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

08 09 2022 22:48:48

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

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

07 09 2022 20:44:23

Перформанс так перформанс: мы запускаем SMM

Перформанс так перформанс: мы запускаем SMM Новая услуга от Netpeak по ведению Instagram и Facebook...

06 09 2022 21:48:14

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017

14 неочевидных и пpaктически применимых фишек круглого стола SaaS Nation 2017 Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...

05 09 2022 0:44:38

Дополнительные ценности Netpeak — что вы получаете при заказе [SEO 2.0] вместе с поисковым продвижением

Дополнительные ценности Netpeak — что вы получаете при заказе [SEO 2.0] вместе с поисковым продвижением В коробку [SEO 2.0] вместе с самим поисковым продвижением входят дополнительные ценности Netpeak: унифицированные действия по увеличению продаж, улучшения удобства работы и преимущества бренда Netpeak...

04 09 2022 19:25:36

Пять важных «зачем» в работе PPC-специалиста над продвинутыми проектами

Пять важных «зачем» в работе PPC-специалиста над продвинутыми проектами Сакральные знания о контекстной рекламе для экспертов и тех, кто с ними сотрудничает....

03 09 2022 1:35:52

Почему мы так говорим — из истории устойчивых выражений

Почему мы так говорим — из истории устойчивых выражений Об истории и значении поговорок и других фразеологических оборотов...

02 09 2022 22:27:55

SEO-продвижение интернет-магазина женской и детской одежды c ROMI 1428%

SEO-продвижение интернет-магазина женской и детской одежды c ROMI 1428% кейсы по seo интернет-магазина модной одежды в Болгарии: как мы сняли негативный эффект от Google Penguin и получили ROMI (возврат маркетинговых инвестиций) 1428%...

01 09 2022 20:21:21

Кросс-минусовка ключевых слов в Google Ads: обзор сервисов и скриптов

Кросс-минусовка ключевых слов в Google Ads: обзор сервисов и скриптов Минусовки это не только про эстраду. Какой метод кросс-минусовки ключевых слов лучше?...

31 08 2022 17:23:45

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

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

30 08 2022 7:55:42

UX и UI мобильных приложений: что связывает мобильный дизайн и маркетинг

UX и UI мобильных приложений: что связывает мобильный дизайн и маркетинг Про мобильный дизайн. С красивой и понятной презентацией внутри....

29 08 2022 18:20:47

Первый рабочий день в Netpeak

Первый рабочий день в Netpeak Что ждет новичка в его первый день работы в Netpeak — подарки, первые задачи и традиции компании. Все, что нужно знать, чтобы меньше волноваться и влиться в коллектив. Узнать больше!...

28 08 2022 3:22:18

Инфлюенс-маркетинг — как дружить и сотрудничать с блогерами, чтобы всем было хорошо. Опыт Kacho Group

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

27 08 2022 22:58:57

Партнерские программы SaaS — как на них заработать, какими бывают партнерки

Партнерские программы SaaS — как на них заработать, какими бывают партнерки Партнерская программа — это когда сервис дает партнеру вознаграждение за приведенных клиентов. Получить деньги и/или другие плюшки можно также по реферальной программе. Как это работает? Разбираемся на примерах....

26 08 2022 23:26:36

Знакомство с Яндекс.Вебмастер: полезные фишки и советы новичкам

Знакомство с Яндекс.Вебмастер: полезные фишки и советы новичкам Не Google единым. Нужные и важные знания по Яндекс.Вебмастер....

25 08 2022 8:58:16

Как увеличить базу подписчиков на 100% за год — кейс domcomfort.ua

Как увеличить базу подписчиков на 100% за год — кейс domcomfort.ua Почти 50 тыс. контактов за год принесли формы подписки и регистрации....

24 08 2022 13:11:34

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

Кейс по продвижению интернет-магазина отопительного оборудования: ROMI 86% Через тернии к кейсу. SEO-продвижение интернет-магазина отопительного оборудования с оплатой за трафик...

23 08 2022 20:26:46

Сколько стоил клик в Google Ads в Украине в первом квартале 2021 года — исследование Netpeak

Данные по 22,4 миллионам кликов в 46 тематиках и 392 населенных пунктах страны — собрана статистика исключительно по проектам агентства Netpeak. Узнать больше!...

22 08 2022 1:13:19

Как анализировать эффективность рекламы в Google ***ytics? Часть третья: пользовательские сегменты

Как анализировать эффективность рекламы в Google ***ytics? Часть третья: пользовательские сегменты Зачем нужны пользовательские сегменты клиентов и как их создавать — читайте в завершающей части серии «Как анализировать эффективность рекламы в Google ***ytics?»...

21 08 2022 19:20:27

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

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

20 08 2022 4:22:25

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

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

19 08 2022 14:22:55

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

Сколько стоил клик в Google Ads и Facebook в Украине в четвёртом квартале 2018 года Исследование по 38,5 миллионам кликов в 22 тематиках в 391 городе страны....

18 08 2022 0:29:30

Как импортировать данные в Google ***ytics

Обо всех способах передачи данных из несвязанных с сайтом источников, а также о ручной передаче данных...

17 08 2022 3:31:46

Как новостная лента Facebook предсказывает то, что вы хотите увидеть?

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

16 08 2022 5:50:35

MeDiConf — новая конференция по медицинскому маркетингу от Netpeak и Octopus Events

MeDiConf — новая конференция по медицинскому маркетингу от Netpeak и Octopus Events 29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...

15 08 2022 17:14:53

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

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

14 08 2022 22:57:45

Плотность ключевых слов — как определить релевантность документа ключевому запросу

SEOmoz создал систему, которая определяет релевантность страницы поисковому запросу....

13 08 2022 2:31:55

Как настроить счетчик Яндекс.Метрики

Как настроить счетчик Яндекс.Метрики Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....

12 08 2022 14:29:28

Кейс по таргетированной рекламе в тематике «женская одежда»: ROMI 76%

Кейс по таргетированной рекламе в тематике «женская одежда»: ROMI 76% Насколько классно продается женская одежда в интернете....

11 08 2022 8:27:39

Почему мы играем или не играем в игры

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

10 08 2022 3:18:29

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