Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Товарные объявления торговых кампаний заметнее в выдаче, да и показываться будут и в Bing, и в Yahoo, и в AOL...
28 03 2024 18:17:57
Комaнда Serpstat проанализировала стратегии продвижения лидеров ниши онлайн-образования. Читайте о главных инсайтах в посте....
27 03 2024 11:33:47
Как считать конверсии из Facebook, когда они происходят в Jivosite и Битрикс24....
26 03 2024 11:41:11
За что, по мнению рекламодателей, готовы платить пользователи в России и Украине? Рейтинг самых дорогих ключевых слов Google Рекламы по версии Serpstat....
25 03 2024 1:44:41
Как жить с налогом на Google, Facebook и другие международные сервисы — объясняем детали....
24 03 2024 7:42:54
Баннерная реклама в фейсбуке. Обзор семи новых рекламных инструментов...
23 03 2024 13:58:24
Портал-каталог организаций и его продвижение. В этом кейсе мы детальнее остановимся на выгодах для проекта от синергии усилий клиента и агентских специалистов по контекстной рекламе...
22 03 2024 19:13:43
Как сделать склейку и сохранить трафик, распространенные ошибки при склеивании. Узнать больше!...
21 03 2024 22:13:18
Алексей Селезнев проанализировал 29 млн кликов, и в этой статье вы прочитаете, как дорого обходятся рекламодателям клики в Google Ads....
20 03 2024 17:56:28
Персональная стратегия продвижения онлайн с помощью SEO и контекстной рекламы....
19 03 2024 9:19:49
Данные, приведенные в исследовании, помогут в составлении медиапланов по продвижению в интернете. Понимания стоимость конверсии и необходимое количество конверсий, вы можете прогнозировать, сколько денег на рекламу нужно выделить....
18 03 2024 11:15:36
На вопрос «как все успеть?» хочется ответить что-то вроде «никак». Особенно, если дело касается задач, связанных с творчеством. Но можно и не срывать дедлайны. Читать дальше....
17 03 2024 3:56:49
Положительная динамика с первых месяцев работы....
16 03 2024 6:49:48
Не можете найти нужны отчёт в Google ***ytics? Или хотите ускорить поиск нужных данных и отчётов. В помощь ⏩ Обзор к Google ***ytics Intelligence....
15 03 2024 15:30:43
Решили составить список из семи улучшений. Что нового, Netpeak?...
14 03 2024 0:34:32
Как написать годный кейс и победить страх чистого листа...
13 03 2024 23:41:42
Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...
12 03 2024 14:20:10
Как не нужно делать, запуская свой профиль и таргетированную рекламу в Instagram...
11 03 2024 10:20:20
Опции скриншутера, которые упростят вам жизнь....
10 03 2024 17:12:22
5 важных навыков для новичков в PPC: как учиться, чтобы стать экспертом; секреты тайм-менеджмента, мотивации; тонкости оптимизации рабочего процесса. Узнать больше!...
09 03 2024 10:24:14
Создание канала бренда на видеоплатформе необходимо для увеличения притока трафика, улучшения репутации и поискового продвижения компании...
08 03 2024 17:33:39
Как с помощью ботов ControllerBot и BotFather упростить управление каналами и разнообразить контент....
07 03 2024 2:27:48
Персональный чек-лист автора десятков рассылок: три года опыта и регулярное общение с техподдержкой почтовых сервисов. Всё о том, как не попасть в спам и как из него спасаться. А может и не всё. Можете дополнить этот пост своими фишками? Делитесь!...
06 03 2024 5:29:35
Структура того, чем обладают сотрудники департаментов работы с клиентами лучших компаний....
05 03 2024 13:36:10
Советы бизнесу от зрителей Big Money и Артема Бородатюка. Предлагаем 11 универсальных, но простых и понятных идей....
04 03 2024 9:24:16
Что нового, Netpeak? Новые стратегии контекстной рекламы и email-маркетинга, новая рубрика в блоге, а также о специфике работы отдела продаж Netpeak в карантин и о законах построения партнерской программы — всё читайте в материале!...
03 03 2024 1:35:35
Используйте методы Элияху Голдратта для оптимизации процессов в жизни и на работе...
02 03 2024 15:30:55
Непросто найти ответственного автора, готового проводить сео-оптимизацию своих статей, исправлять ошибки, вносить дополнения в материал. Это очень дорого? Узнать!...
01 03 2024 5:52:49
Настройка аналитики для пустого поиска, а также поиска по методам GET и POST...
29 02 2024 16:29:53
Аккаунт менеджеры это... Быть лицом компании, проводником между заказчиком и комaндой агентства, ментором для коллег и суперменом, готовым прийти на помощь клиенту в любой час дня и ночи… Эти задачи по плечу аккаунт-менеджерам Netpeak...
28 02 2024 6:26:36
Как найти индивидуальный подход к аудитории на каждом этапе воронки продаж? В этом вам поможет правильно составленная стратегия контекстной рекламы....
27 02 2024 16:15:13
Счетчик Яндекс.Метрики: создание и установка кода, важные настройки....
26 02 2024 12:41:51
Краткая инструкция по работе с обратной связью: как правильно просить и получать отзывы. Они напрямую влияют на бизнес, увеличивают конверсию и выгодно выделяют вас на фоне конкурентов. Как это использовать? Читайте дальше!...
25 02 2024 2:39:42
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
24 02 2024 8:21:23
Привыкли к недосыпу и жизни «на кофе»? Вы, конечно же, понимаете, что это не дело. Но осознаете ли насколько? Если нет, почитайте....
23 02 2024 4:51:16
Образец рассылки от создателе Replyapp.io Олег Белозор, на которую ответили самые влиятельные эксперты в мире в2в продаж...
22 02 2024 3:10:55
Базовые знания, которые нужны, чтобы ресурс понравился поисковикам и пользователям....
21 02 2024 22:46:30
Аудит юзабилити способствует следованию современным тенденциям, пониманию целевого посетителя и увеличению конверсии....
20 02 2024 1:40:49
Статья будет полезна небольшим агентствам, которые мечтают работать с заграничными клиентами. Зачем нужно выходить за рубеж, если и в своей стране все идет неплохо, да и вообще — нет времени на продвижение на незнакомом рынке? Давайте разбираться вместе!...
19 02 2024 20:39:27
Инструменты интернет-маркетинга, которые вы не используете или используете не на сто процентов....
18 02 2024 0:29:33
Пуш для рекламных кампаний накануне праздничных распродаж...
17 02 2024 4:30:10
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
16 02 2024 17:36:56
Красивое креативное описание страницы «о нас» — важная составляющая коммуникации с потенциальным клиентом. Покажите свою комaнду, опишите ценности и миссию. Сделайте эту страницу продающей. Узнать больше!...
15 02 2024 12:35:37
Короткий кейс и рекомендации по защите аккаунта от взлома....
14 02 2024 15:27:52
Cтоимость просмотра в Google Ads дешевле как минимум в два раза по сравнению со Smart TV...
13 02 2024 2:38:27
Чтобы перенаправить рекламу не на свой домен, арбитражники используют редирект в Яндексе при работе с партнерскими ссылками...
12 02 2024 0:51:45
Признаки того, что магазин находится под фильтром и шаги по выводу из него...
11 02 2024 10:50:48
Возможности и перспективы Clubhouse, лайфхаки для пользователей и бонус в конце...
10 02 2024 2:18:40
Продолжаем разговор о том, почему функция «Совмещение данных» в Google Data Studio может работать не так, как вы ожидаете....
09 02 2024 19:10:22
Как правильно читать отчеты в Панели вебмастеров Google — объясняем на примерах из пpaктики....
08 02 2024 21:14:58
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::