Получение максимальной отдачи от Google Chrome для технического SEO

Какие инструменты чаще всего используют SEO-специалисты? Как правило, это SEMRush, Screaming Frog, Ahrefs, Seo Tools для Excel и пр. Но большинство из нас забывают об инструменте, которым мы пользуемся каждый день, и это браузер.

Google Chrome – наиболее часто используемый браузер в мире на данный момент. У него есть целый ряд встроенных инструментов разработчика, идеально подходящих для технического анализа и тестирования SEO. Просто нажмите правой кнопкой мыши и выберите “Просмотреть код” (Ctrl + Shift + I на Windows и Command + Option + I на Mac).

Я перевел статью о наиболее полезных и часто упускаемых из виду сочетаний клавиш и функций в Chrome для специалистов по поисковой оптимизации. Изучение этой шпаргалки может занять 5-10 минут, но потом вы сэкономите часы работы.

Изменение региона

SEO-специалистам часто приходится смотреть, как сайт видят пользователи из разных стран. Для этого, как правило, используют надстройку VPN в Chrome, но изменить местоположение можно и в “Инструментах разработчика”.

Вы также можете добавить координаты широты и долготы для более точного определения.

Полноразмерные снимки экрана

Знаете ли вы, что в Google Chrome есть встроенная функция создания снимков экрана? Легко доступный через набор инструментов разработчика в режиме проверки элементов, это отличный способ быстро получить снимки сайта. Если вы хотите сделать снимок экрана всего сайта:

• Откройте “Инструменты разработчика” на нужной странице.
• Нажмите Ctrl + Shift + P на Windows или Command + Option + P на Mac, чтобы загрузить командное меню DevTools.
• Введите “Снимок экрана” и нажмите “Сделать полноразмерный снимок экрана”.
• Снимок экрана будет добавлен в вашу папку загрузок.

Изменение User agent

Вы можете проверить, как различные посетители или боты видят ваш сайт и взаимодействуют с ним. Хотя такие расширения, как User-Agent Switcher, популярны в Chrome, вы можете переключаться самостоятельно без каких-либо расширений:

• Войдите в “Инструменты разработчика”.
• Нажмите на три вертикальные точки рядом с кнопкой закрытия.
• Найдите “Дополнительные инструменты” > “Условия сети”.
• Здесь вы найдете опцию для User Agent, снимите флажок «Выбирать автоматически».
• Там будет возможность выбрать предварительно настроенный User Agent из раскрывающегося списка или ввести свою собственную строку UA. Вуаля! Полный контроль над настройками User Agent.

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

Просмотр сайта на мобильных устройствах и планшетах

Понимание того, как сайт выглядит на разных устройствах, – важный шаг к обеспечению хорошего взаимодействия с пользователем. Инструменты разработчика позволяют переключать «Режим устройства» под маленьким значком смартфона в верхнем левом углу меню DevTools. Если вы устраняете неполадки, связанные с быстродействием и мобильной оптимизацией на нескольких платформах, требуется много времени, кроме того, открывать все устройства неудобно. В «Режиме устройства» быстрые изменения можно выполнить одним щелчком мыши. Вы можете просматривать страницу на ряде предустановленных устройств или добавлять собственный размер экрана. Вы также можете эмулировать регулирование ЦП для мобильных устройств низкого или среднего уровня и переключаться между альбомным и портретным режимами.

• Откройте инструменты разработчика.
• Щелкните на маленький значок смартфона/планшета в верхнем левом углу.
• Выберите желаемое устройство из раскрывающегося списка.
• Необязательно: вы можете нажать «Повернуть», чтобы установить альбомную ориентацию.

Просмотр заголовка HTTP

Работая над технической оптимизацией, важно быстро взглянуть на ответ сервера в заголовке. Страница отправляет правильный ответ заголовка? Это перенаправление на другую страницу? В шапке указан canonical? На все эти вопросы вы можете ответить, посмотрев HTTP-заголовок:

• Откройте инструменты разработчика.
• Щелкните вкладку «Сеть» и перезагрузите страницу – все запрашиваемые ресурсы появятся в списке слева от меню.
• Выберите желаемый пункт, и вы увидите ответ заголовка для него (обычно это вкладка по умолчанию, если не щелкнуть заголовки).

Просмотр Network Waterfall

Находясь в меню «Сеть» в «Инструментах разработчика», вы заметите столбец, отображающий каскадную модель. Это визуальный обзор с подробным описанием скорости загрузки отдельных ресурсов, необходимых для отображения сайта. Это можно сделать просто:

• Откройте инструменты разработчика.
• Щелкните вкладку «Сеть» и перезагрузите страницу – все запрашиваемые ресурсы появятся вместе с каскадной моделью.
• Вы можете легко фильтровать эти запросы по домену, типу, используемому протоколу и т. д.

Почему это полезно? Network Waterfall Modeling – полезный способ диагностики проблем с производительностью сайта. Проблемы визуализируются в формате “водопада”, помогая вам идентифицировать изображения, которые загружаются слишком медленно, сценарии блока рендеринга, а также видеть, делают ли ресурсы несколько запросов на подключение, и т. д.

Наличие этой информации упрощает расстановку приоритетов для загрузки, чтобы упростить взаимодействие с пользователем.

Аудит производительности

Существует множество сторонних инструментов для быстрого аудита производительности вашего сайта, включая Google PageSpeed ​​Insights, WebPageTest, Pingdom Tools и множество других. Lighthouse – это продукт Google с открытым исходным кодом, который встроен в Chrome. Чтобы получить к нему доступ, сделайте следующее:

• Откройте инструменты разработчика.
• Перейдите на вкладку «Аудиты», и у вас будет возможность установить флажки напротив пунктов, которые вы хотите проверить.

Улучшение кода для устранения багов

Хотя минифицированный код хорош с точки зрения производительности, очень сложно с первого взгляда понять, что он делает. Но в Chrome Developer Tools есть удобная функция, которая позволяет отменить минификацию (или «украсить») код. Это означает, что код будет с отступом и разделен на четко определенные разделы, чтобы было легче понять необходимость внесения технических изменений.

Как реализовать:

• Откройте инструменты разработчика.
• Щелкните на любой ресурс, который минимизирован, например CSS, JS или HTML.
• Содержимое загрузится в новой панели, и вы увидите две фигурные скобки {} в нижнем левом углу. Нажмите на них, и Chrome “украсит” ваш код.

Быстрая проверка поддержки сервером HTTP/2

Доступно множество плагинов, которые могут сказать вам, поддерживает ли сервер HTTP/2. Но это можно проверить в браузере:

• Откройте инструменты разработчика.
• Щелкните вкладку «Сеть» и перезагрузите страницу.
• Вам нужно будет добавить столбец «Протокол» на вкладку «Сеть», если он отсутствует. Для этого щелкните правой кнопкой мыши один из заголовков в разделе «Сеть» (например, «Имя»), чтобы переключить быстрые столбцы, которые появятся на вкладке «Сеть».
• Выберите «Протокол», и вы сможете узнать, поддерживает ли сервер HTTP/2, когда перейдете на вкладку «Сеть».

Совет от профессионала: помните, что не следует отключать HTTP/1, поскольку робот Google по-прежнему сканирует с использованием HTTP/1.

Группировка ресурсов

Иногда вам может понадобиться отдельный ресурс, загружаемый сайтом, а не список их всех. В Developer Tools есть опция «Группировка продуктов», которая разбивает эти ресурсы на четкие группы в зависимости от домена, типа ресурса и т. д. Как реализовать:

• Откройте инструменты разработчика.
• Щелкните вкладку «Сеть» и перезагрузите страницу.
• Обычно у меня включены столбцы «Домен» и «Тип», просто щелкните правой кнопкой мыши один из заголовков в разделе «Сеть» и выберите те, которые вам нужны.
• Вы можете щелкнуть левой кнопкой мыши по этим заголовкам, чтобы отсортировать столбцы в порядке возрастания или убывания.

Упрощение парсинга

Парсинг данных – это основа технического SEO, но работа с xpath может быть немного утомительной. Chrome может легко генерировать xpath для любых элементов, которые вы видите на странице, всего за пару кликов, что значительно упростит жизнь.

• Щелкните правой кнопкой мыши элемент на странице, для которой требуется xpath, и выберите «Проверить».
• HTML-код элемента должен быть выделен на панели инструментов разработчика. Щелкните этот HTML правой кнопкой мыши и выберите “Копировать >> Копировать XPath”, xpath будет скопирован в буфер обмена.

Определение “мертвого кода” на страницах

Иногда ваши CSS и JS файлы будут иметь много дополнительного кода, который не используется на странице. Если вы заботитесь об улучшении производительности страницы (как это делает каждый оптимизатор), рекомендуется избавиться от него и использовать только на тех страницах, где он необходим. К счастью, в Chrome есть новая функция под названием «Отчет о покрытии», которая поможет в этом.

• Откройте инструменты разработчика.
• Выберите три вертикальные точки рядом с кнопкой закрытия.
• Найдите «Дополнительные инструменты» >> «Покрытие».
• Щелкните значок «Обновить».
• Теперь вы можете увидеть процент неиспользуемых CSS и JS в загруженных файлах, щелкнуть один из них, и он покажет вам используемые и неиспользуемые строки кода зеленым и красным цветом соответственно.

Это лишь некоторые из замечательных функций, которые легко доступны, если изучить инструменты разработчика Chrome. Знаете о других интересных фишках? Делитесь в комментариях!