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



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

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

Семь улучшений Netpeak: новые услуги и веб-аналитика для крупного бизнеса. Выпуск шестой Рассказываем в подробностях, что полезного сделал Netpeak для своих клиентов с января по апрель 2017 года...

03 10 2023 14:12:21

Как настроить фид данных в обновленном Google Merchant Center

Как настроить фид данных в обновленном Google Merchant Center Мы уже писали о Google Shopping, в каких странах он доступен и как его настроить. В этом посте я покажу один из способов создания и загрузки фида данных. Это важный этап подготовки к запуску Google Shopping...

02 10 2023 9:35:36

Как научиться читать скрипты Google Рекламы

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

01 10 2023 7:42:25

Внутренняя кухня SEO: как починить А/В-тестирование в Google ***ytics с помощью Google Tag Manager. Кейс UniSender

Внутренняя кухня SEO: как починить А/В-тестирование в Google ***ytics с помощью Google Tag Manager. Кейс UniSender О проблеме с передачей данных об A/B-тестах в Google ***ytics...

30 09 2023 8:57:37

Анализ ссылочной массы — подробное руководство

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

29 09 2023 10:25:39

NPS: что такое Net Promoter Score и как начать его считать

NPS: что такое Net Promoter Score и как начать его считать Цель этой статьи — предупредить от опасной ошибки в маркетинге: бездумного и неправильного внедрения NPS-опросника....

28 09 2023 14:27:37

Какой домен выбрать: ru, com или net

Какой домен выбрать: ru, com или net Домен — это адрес (имя) сайта в сети интернет, по которому его находят пользователи. Он состоит из букв, символов и цифр, должен быть уникальным, чтобы владельцу ресурса удалось добиться качественного продвижения. Как подобрать лучший? Читайте!...

27 09 2023 3:10:13

Почему SEO в агентстве стоит дорого — развернутый ответ для клиентов

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

26 09 2023 10:24:49

Рамзи Ризк про EyeEm и будущее мобильных приложений

Основатель сервиса мобилографии EyeEm Рамзи Ризк рассказал об особенностях своего сервиса и будущем мобильных приложений....

25 09 2023 22:12:39

История успеха компании Innocent drinks

История успеха компании Innocent drinks В основе каждой великой компании – хорошо рассказанная история....

24 09 2023 10:57:12

Core Web Vitals: что это такое и как работает

Core Web Vitals: что это такое и как работает В мае прошлого года Google анонсировал выход нового Core Web Vitals. Что это и как будет работать рассмотрим в статье...

23 09 2023 6:48:34

О чем снять первое видео начинающему видеоблогеру

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

22 09 2023 6:45:13

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

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

21 09 2023 18:21:10

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440%

История успеха office-expert.kz: перенесли email-рассылки на новый сервис и получили ROMI 440% В течение месяца нам удалось наладить рассылку с новой платформы....

20 09 2023 18:55:48

Как определить плотность ключевых слов — советы и сервисы

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

19 09 2023 9:36:50

Кейс по выводу из фильтра Google Panda интернет-магазина отопительной и водоснабжающей техники: ROMI 338%

Кейс по выводу из фильтра Google Panda интернет-магазина отопительной и водоснабжающей техники: ROMI 338% Признаки того, что магазин находится под фильтром и шаги по выводу из него...

18 09 2023 13:43:48

Как мы вошли в топ Product Hunt — четкая инструкция от Serpstat

Подробный алгоритм успешного питча на Product Hunt на примере Serpstat...

17 09 2023 19:50:45

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

Как всплывающие уведомления помогают повысить продажи — кейс интернет-магазина Пуш для рекламных кампаний накануне праздничных распродаж...

16 09 2023 8:43:13

Топ ошибок новичков в Google Рекламе

Топ ошибок новичков в Google Рекламе Топ-8 ошибок новичков в Google Рекламе: как сэкономить деньги при планировании рекламной кампании....

15 09 2023 12:39:39

Кейс по SERM для DOM.RIA. Как работать с репутацией и за четыре месяца убрать негатив в топ-10.

Кейс по SERM для DOM.RIA. Как работать с репутацией и за четыре месяца убрать негатив в топ-10. Крупным брендам не избежать негатива в сети. Но с ним можно и нужно работать. Читайте успешный кейс для DOM.RIA....

14 09 2023 16:57:40

10 рабочих способов повторного использования контента

10 рабочих способов повторного использования контента В помощь контент-маркетологам, редакторам, авторам и бизнесу: идеи, которые учитывают фактор SEO. Переупакуйте статьи, заметки, любые другие посты — угодите читателям и поисковикам. Узнать больше!...

13 09 2023 19:34:48

Как повлиять на решение покупателя

Как повлиять на решение покупателя Технология «лёгкость восприятия» — инструмент, который поможет убедить клиентов покупать именно у вас...

12 09 2023 12:34:35

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

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

11 09 2023 21:24:11

10 трендов email-маркетинга в 2022 году

10 трендов email-маркетинга в 2022 году All about internet mail. Примеры того, что стоит внедрить в рассылках почты онлайн....

10 09 2023 19:47:11

Запускаем блоги на орбиту — МКС от Netpeak

Запускаем блоги на орбиту — МКС от Netpeak Грамотный контент важен для всех, но особенно — для аутсорсов и стартапов в B2B. Если вы согласны с этим, давайте делать медиа....

09 09 2023 3:34:13

Примеры писем интернет-магазинов: лучшие e-mail письма и рассылки клиентам после покупки

Примеры писем интернет-магазинов: лучшие e-mail письма и рассылки клиентам после покупки Как надолго завоевать доверие покупателя с помощью грамотного email-маркетинга? Примеры обращений к клиенту в рассылках, текст писем для привлечения и благодарности за покупку....

08 09 2023 18:54:33

Как запустить рекламную кампанию Call-Only для мобильных устройств

Как запустить рекламную кампанию Call-Only для мобильных устройств Учим правильно платить за верхние строчки показов объявления: настройка быстрых звонков из поисковых объявлений «Только номер телефона» Google Ads...

07 09 2023 12:21:39

Как быстро подобрать темы для информационных статей

Как быстро подобрать темы для информационных статей Как за один час собрать самые популярные темы для информационных статей с помощью Serpstat и Key Collector?...

06 09 2023 20:57:57

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

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

05 09 2023 18:58:40

Настраиваем эффективную рекламу в контекстно-медийной сети Google — шесть полезных советов

Настраиваем эффективную рекламу в контекстно-медийной сети Google — шесть полезных советов кмс Google: как достичь поставленной цели с помощью рекламы? Делимся советам по настройке КМС-кампаний....

04 09 2023 2:15:10

Pitch perfect: как получить публикации в топовых медиа

Pitch perfect: как получить публикации в топовых медиа Если у вас есть продукт, о котором миру стоит узнать, книга Pitch perfect придется вам очень кстати....

03 09 2023 9:23:11

Как подобрать низкочастотные запросы и для чего это нужно

Низкочастотные, низкоконкурентные, Long Tail и другие термины, которые нужно знать и понимать....

02 09 2023 6:32:19

14 неочевидных и пpaктически применимых фишек — круглый стол 8P 2020

Лучшие фишки от спикеров конференции 8P 2020. В конце каждой конференции спикеры 8P собираются за круглым столом, чтобы поделиться пpaктически применимыми советами, которые можно внедрить в свой проект и сразу почувствовать отдачу...

01 09 2023 16:47:45

Показатель качества от экс-гуглера

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

31 08 2023 13:31:28

Как сделать динамический ремаркетинг для корпоративного сайта

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

30 08 2023 22:35:23

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com

Как вывести информационный сайт из-под YMYL фильтра Google — кейс maanimo.com Вывод информационного сайта из-под алгоритмического YMYL фильтра Google...

29 08 2023 11:12:11

Семантическое ядро: сервисы для автоматического сбора запросов

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

28 08 2023 2:17:38

Как построить диаграмму и не облажаться

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

27 08 2023 19:57:24

Что эффективнее: Google Реклама или Bing Ads

Что эффективнее: Google Реклама или Bing Ads Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....

26 08 2023 21:44:47

Раскрыт секрет гарантированного роста трафика из поиска, или Серебряная пуля SEO

Раскрыт секрет гарантированного роста трафика из поиска, или Серебряная пуля SEO О главном секрете поискового продвижения на основе исследования, которое проводилось в течение двух лет. Здесь отсеяны все проекты со слишком малой начальной посещаемостью и проекты с пробелами в аналитике. Узнайте больше, на чем строится рост трафика!...

25 08 2023 18:51:46

Анализ сезонности на примере ниши доставки цветов

Анализ сезонности на примере ниши доставки цветов Занимайтесь оптимизацией определенной категории товаров за полгода до скачка спроса....

24 08 2023 3:37:42

Как обучать комaнду по методу 70:20:10

Как эффективно распределять бюджет и ресурсы на обучение сотрудников. Статья будет полезной для собственников бизнеса и HR-специалистов....

23 08 2023 6:22:53

Семь улучшений Netpeak: #напальцах и Netpeak Cloud. Выпуск четвертый

Семь улучшений Netpeak: #напальцах и Netpeak Cloud. Выпуск четвертый Как изменилось агентство Netpeak c августа по октябрь? Читайте о семи главных нововведениях и улучшениях в работе с клиентами....

22 08 2023 14:56:18

Как выступить с полезным докладом: советы экспертов

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

21 08 2023 19:33:11

8 секретов крутых заголовков для 1000 репостов в соцсетях

8 секретов крутых заголовков для 1000 репостов в соцсетях Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....

20 08 2023 2:11:13

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

Сколько стоил клик в Google Ads и Facebook в Украине во втором квартале 2019 года Данные по 24 миллионам кликов в 24 тематиках и 391 городу...

19 08 2023 20:23:23

Как получить 184% прироста трафика и увеличить долю поискового трафика в три раза в gaming-тематике — кейс Wowcarry

Как получить 184% прироста трафика и увеличить долю поискового трафика в три раза в gaming-тематике — кейс Wowcarry Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....

18 08 2023 4:56:28

Как получать удовольствие от жизни. Советы из книги «Поток»

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

17 08 2023 3:53:31

Яндекс.Аудитории: полное руководство по созданию и использованию сегментов

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

16 08 2023 16:56:47

35 ошибок при А/В-тестировании

35 ошибок при А/В-тестировании Опыт контент студии WordFactory и 14 экспертов интернет-маркетинга....

15 08 2023 18:27:32

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