SEO

Как эффективно использовать 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. Внизу панели появится рабочее пространство с нужным функционалом.

с функционалом

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

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

25
5
6
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (0)

Последние комментарии

    Чтобы оставить комментарий, нужно войти

    Чтобы оставлять комментарии, переключитесь на профиль читателя

    Подписаться

    на самую полезную рассылку по интернет-маркетингу

    Самое

    обсуждаемое популярное читаемое
    Cookies policy
    Просматривая этот сайт, вы соглашаетесь с нашей политикой конфиденциальности — Ok