Как эффективно использовать 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-оптимизации сайта.
Комментарии:
Реклама будет не настолько персонализирована, как сейчас....
26 04 2024 16:12:20
Как обойти «Зал ожидания» и другие неочевидные фишки...
25 04 2024 1:16:31
Как с помощью элементов микро UX в дизайне сделать сайт интернет-магазина незабываемым...
24 04 2024 9:30:21
Всё об оценке эффективности SEO-продвижения с инструментами и рекомендациями...
23 04 2024 23:26:49
Чем отличается протокол HTTPS от HTTP — криптошифрованием, обеспечивающим безопасность ресурса...
22 04 2024 4:46:31
Виктория Игнатьева опубликовала новый кейс по продвижению интернет-магазина детской одежды, обуви и товаров: ROMI (возврат маркетинговых инвестиций) 319%....
21 04 2024 4:48:46
Email-маркетинг — хороший полицейский, спам — плохой....
20 04 2024 6:56:14
Обновление от Google: похожие аудитории можно использовать не только для медийных, но и для поисковых и торговых кампаний...
19 04 2024 5:22:34
Новый способ автоматизации процессов при настройке аналитики больших объемов данных....
18 04 2024 0:15:11
Как работать с негативом и что делать, чтобы его было меньше/не было вовсе....
17 04 2024 10:27:37
Нет новых идей для развития рекламной компании? Одобренные рекомендации по поисковому продвижению от экспертов: спикеров и участников 8P 2018...
16 04 2024 5:35:56
Перед обращением за услугами продвижения задайте себе вопрос: готов ли я выделить львиную долю своего времени и сил на серьезное развитие проекта? При отрицательном ответе не стоит и начинать. И другие вопросы о SEO-продвижении...
15 04 2024 11:24:20
Женский и мужской таргет отличаются друг от друга. Кейс магазина обуви, одежды и аксессуаров....
14 04 2024 18:49:34
Решили перейти на Google ***ytics 4? Предлагаем разобраться, чем отличается инструмент от предыдущей версии и изучить новинки в отчетах «Демография» и «Технология»....
13 04 2024 14:37:49
Про работу мозга и запоминание из книги Торкеля Клинберга «Информационный поток и пределы рабочей памяти» и обзор игр Lumosity....
12 04 2024 1:32:26
Когда и зачем я начал учить R, с какими сложностями столкнулся, как появилась и реализовывалась идея создания курса...
11 04 2024 9:46:19
Данные по 43 миллионам кликов в 27 тематиках и 391 городах страны...
10 04 2024 10:30:22
Часто в распоряжении клиента только интерфейс конструктора сайтов, весьма ограниченный в функциональности. Тогда на помощь интернет-маркетологу приходит сервис Tag Manager, благодаря которому можно настроить необходимый код расширенной электронной торговли....
09 04 2024 14:57:12
Amazon сократил комиссию для сайтов партнеров от 30% до 80% — что делать дальше? Мнение эксперта....
08 04 2024 2:57:45
Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....
07 04 2024 23:26:45
Как добавить свою рекламу через поисковый сервис с картинками в Google....
06 04 2024 15:45:45
Магазин вязанных вещей хенд мейд. Как за два месяца увеличить посещаемость в 20 раз....
05 04 2024 17:31:29
Улучшайте свой уровень английского. Упражнения для В1 — Intermediate («Средний+»). Узнать больше!...
04 04 2024 8:36:58
Как автоматизировать выгрузку данных онлайн из Яндекс.Метрики и импортировать полученную статистику для дальнейшего анализа или визуализации....
03 04 2024 5:28:34
Краткий обзор динамических мультимедийных объявлений...
02 04 2024 3:16:29
О промдизайне, инсайтах, испытаниях для дизайнеров по мотивам BBC-шоу «Дизайн для жизни» с Филиппом Старком....
01 04 2024 18:10:23
Как грамотно раскрутить пиццерию. Сняли фильтр и достигли хороших результатов....
31 03 2024 22:37:40
Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...
30 03 2024 21:37:35
Netpeak Checker – это мультифункциональный инструмент для массового анализа и сравнения сайтов, который помогает выполнять самые разнообразные задачи в области интернет-маркетинга....
29 03 2024 22:48:11
Если на вашем смартфоне установлен только стандартный набор Uber, Glovo, 2ГИС и нескольких мессенджеров — смотрите подборку необычных и смешных приложений....
28 03 2024 10:45:19
Дублирование контента на разных сайтах, ориентированных на рынки разных стран, например, на публику Канады...
27 03 2024 8:51:20
Визуализация данных для новичков. Отвечаем на вопрос читателя....
26 03 2024 19:40:19
Директ Коммaндер от Яндекса позволяет легко работать с большими кампаниями...
25 03 2024 11:39:57
Google Data Studio: подробная инструкция и обзор возможностей...
24 03 2024 11:39:13
Как в Google Search можно найти мелодию по примерному напеву...
22 03 2024 0:18:55
Советы от Agorapulse, Smarp, Readdle, Competera, Leadfeeder, Smartly, Toggl, Grammarly, .Io Media, MacPaw, Depositphotos, Promorepuplic, OWOX, Serpstat, Quokka и TemplateMonster для развития SaaS-продуктов...
21 03 2024 21:51:30
Человек скачал ваше приложение, воспользовался им один раз и … забыл. Что с этим делать, читайте в Netpeak Journal....
20 03 2024 5:37:57
Таблицы Google позволят перенести рекламную кампанию и сохранить при этом ключевые слова в разных типах соответствия. Подробный мануал — в новом посте....
19 03 2024 18:15:13
Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....
18 03 2024 12:33:34
Если в сетке сайтов есть интересный домен, его можно использовать для дополнительной монетизации, а не только для ссылок. В таком случае важно знать, как правильно отслеживать трафик таких доменов....
17 03 2024 7:36:16
Ежегодный прирост рынка фриланса в Украине составляет в среднем 35%. В прошлом году зарегистрировано более 200 тысяч проектов на общую сумму 385 млн гривен....
16 03 2024 12:32:46
Что такое контекстная реклама? Словарь терминов для чайников...
15 03 2024 0:40:41
Используем маску ввода для оптимизации сбора телефонных номеров в формах на сайте: кейсы агентства Netpeak...
14 03 2024 2:56:43
Следим за развитием событий и анализируем решение суда. Читать дальше!...
13 03 2024 21:27:10
Нужно подобрать красивый шрифт? Готический или народный? Стандартный или фирменный? Как выбрать — рассказывает профессионал...
12 03 2024 23:29:30
Фотоконкурс для стимуляции активности в сообществе, прироста фанов и поощрения лояльной аудитории....
11 03 2024 8:53:12
SEO-специалист Netpeak Виктория Игнатьева опубликовала небольшой обзор особенностей рынка SEO Японии, подготовленный на основе собранных в сети материалов, а также личных знаний и наблюдений...
10 03 2024 16:15:31
Как стать заметнее для поисковых роботов Яндекс и Google...
09 03 2024 22:17:10
Расчет прогноза по LTV позволит более точно задать параметры рекламной кампании в Apple Search Ads на начальном этапе. Как это делают в RadASO, читайте в статье....
08 03 2024 3:56:19
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::
