Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Что такое App Store optimization и как раскручивать мобильные приложения...
18 09 2024 2:52:20
Личный опыт экс-главреда экс-блога Netpeak (сейчас — Netpeak Journal): о работе с информацией, мотивации написания, редактуре черновика, подаче информации по степени важности, выделении главного и составлении окончательной версии текста. Как сделать текст логичным и полезным? Узнайте!...
17 09 2024 2:27:12
7 советов для оптимизации вашего профиля в Google Мой Бизнес....
16 09 2024 19:14:20
Можно ли повысить оценку качества целевой страницы , если проставить конечные URL на уровне ключевого слова? Результаты исследования....
15 09 2024 7:24:49
Новые тактики в рекламных кампаниях, SMM и PR, которые использует бизнес в новых условиях...
14 09 2024 3:14:21
Охват и средняя цена за клик в самых популярных тематиках....
13 09 2024 23:19:38
История о предсказательной аналитике системы автоматизации маркетинга, онлайн-магазине и ненужных письмах....
12 09 2024 17:59:57
В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....
11 09 2024 14:47:54
Без понимания того, какие данные заложены в основу воронки продаж получается... — читайте в статье...
10 09 2024 10:33:28
Обидно терять сохраненные достижения. Почему падает трафик из поисковых систем и как это исправить...
09 09 2024 21:12:10
Обновление от Google, запущенный в октябре 2015 года. Это просто веб-страницы, но в их основе находится AMP HTML, формат для максимального ускорения загрузки на телефонах...
08 09 2024 2:49:14
Подробно о преимуществах и особенностях двух сервисов контекстной рекламы....
07 09 2024 1:23:14
Новая услуга от Netpeak по ведению Instagram и Facebook...
06 09 2024 14:38:25
Тестирования наличия важных тегов на целевых страница — бесплатный скрипт и алгоритм...
05 09 2024 20:39:59
Как добавить свою рекламу через поисковый сервис с картинками в Google....
04 09 2024 14:32:22
Шаги, которые необходимо выполнить для правильного сбора и анализа данных сайта...
03 09 2024 14:59:44
Исправляем ошибки в рекламных кампаниях, аналитике и бюджете...
02 09 2024 21:10:40
В Казнете о маркетплейсе подрядчиков Naimi.kzприложении говорят все: от студентов до президента....
01 09 2024 13:41:33
Как избежать скликивания, случайных переходов и «пустых» установок при рекламе мобильного приложения...
31 08 2024 16:43:32
Повышение посещаемости на сайте: контент, seo, ppc и многое другое...
30 08 2024 9:56:33
Кейс продвижения Pizza House — ROMI 709,9%. От старта с дублями страниц и постановки целей и задач продвижения, проведения технического аудита, аналитики, анализа поисковых фраз, выбора контента до экспериментов с метатегами, увеличения среднего чека и планов на будущее...
29 08 2024 23:27:49
Миссия компании: делимся опытом создания и реализации в компании с 300 сотрудниками...
28 08 2024 22:34:11
Сравним разные модели атрибуции с точки зрения оценки финансовых показателей проекта...
27 08 2024 18:50:15
SEO-продвижение интернет-сайта, где можно заказать доставку цветов. Оплатой за трафик под Россию, Украину, Казахстан, Армению, Грузию...
26 08 2024 16:49:28
Чтобы создавать удобные отчеты, импортируйте данные из Яндекс.Директ в Microsoft Power BI с помощью язык R...
25 08 2024 19:31:28
Топ-8 ошибок новичков в Google Рекламе: как сэкономить деньги при планировании рекламной кампании....
24 08 2024 7:44:34
Как узнать, хорошую ли статью вы опубликовали в блоге...
23 08 2024 15:16:49
Сделать «на вчера», «внезапно», протестировать все варианты. Стоп! Остановитесь и выдохните. Be slow...
22 08 2024 9:52:53
У каждого сайта в топе есть страница, о существовании которой знают только роботы и... SEO-специалисты. Это robots.txt или индексный файл....
21 08 2024 7:21:20
General Data Protection Regulation (GDPR): ответы на вопросы....
20 08 2024 21:16:10
Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане — цифры за первый квартал 2019 года...
19 08 2024 0:42:22
Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...
18 08 2024 2:40:33
![[SEO настоящего] под микроскопом](/marketing-raw/img/223.php.jpg "[SEO настоящего] под микроскопом")
[SEO 2.0] — это продукт для бизнеса от Netpeak, он включает в себя принципиально новый подход к продвижению сайтов....
17 08 2024 11:39:23
Решили перейти на Google ***ytics 4? Предлагаем разобраться, чем отличается инструмент от предыдущей версии и изучить новинки в отчетах «Демография» и «Технология»....
16 08 2024 21:23:15
Экс-CEO, а теперь просто сотрудник и «волшебник страны Moz» Рэнд Фишкин поделился с читателями блога рассказом о своем видении будущего SEO, перспективах анонимизации сети и причудах американских клиентов....
15 08 2024 23:29:47
И эксперт, и агент. Анонимный покупатель — специальная проверка бизнес-процессов до и во время рекламной кампании...
14 08 2024 11:27:34
Всё что нужно знать про SMM...
13 08 2024 20:31:45
Как найти и быстро исправить причины падения трафика? Совет номер один — не паниковать....
12 08 2024 6:40:30
Новый тип рекламных кампаний, который помогает расширить целевую аудиторию. Потенциальных покупателей можно найти среди людей не знакомых с вашим брендом....
11 08 2024 17:10:51
Как создать аккаунт в Google Merchant Center, загрузить и изменить фид с информацией о товарах, — делимся тонкостями настройки кампаний шопинга...
10 08 2024 15:33:18
Доля органического трафика увеличилась с 14% до 44%, а небрендового — на 184%....
09 08 2024 9:36:40
Топ doodle games от Google — от менее достойных к самым крутым....
08 08 2024 2:57:17
В конце октября Яндекс начал открытое бета-тестирование новой версии Коммaндера. Я решила уже сейчас проверить все плюсы и минусы новой версии сервиса...
07 08 2024 14:59:45
Недавно у меня закончилась видеокампания на ютуб, по которой удалось собрать исследование Brand Lift. Хочу поделиться инсайтами...
06 08 2024 1:48:47
Публикуем рецензию на новое издание Брайана Клифтона. Несмотря на узкую специализацию, эта книга стала бестселлером на Amazon и уже переведена на 5 разных языков. Стоит отметить, что две предыдущие редакции «Google ***ytics для профессионалов» успешно ис...
05 08 2024 17:34:12
Как увеличить количество транзакциий, сохранив прибыльность кампании в РСЯ?...
04 08 2024 8:45:29
Как вести рекламные кампании и что делать на разных этапах настройки. Делимся опытом: примерами, кейсами и рекомендациями. Узнать больше и настроить свои РК, как боженька!...
03 08 2024 0:28:37
Безопасность Instagram — что делать, если заметили попытку взломщиков украсть аккаунт, и как вернуть аккаунт после взлома....
02 08 2024 17:58:40
29 ноября в Киеве в UNIT.City — конференция по медицинскому маркетингу MeDiConf...
01 08 2024 22:51:50
Продвигаем медицинский проект. Кроме цифр рассказываем, что и как делали...
31 07 2024 17:47:13
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
