Как использовать DevTools для аудита сайта

Есть много сервисов делающих аудит сайта в автоматическом режиме, но большинство из них платные, а другие могут собирать слишком мало нужной вам информации. Да и бывает такое, когда надо просто посмотреть что-то одно и делать аудит всего сайта смысла просто нет.

Мы подготовили для вас статью, как сделать аудит сайта с помощью стандартных возможностей самого браузера.

DevTools

DevTools - это инструмент для разработчиков сайтов присутствующий во всех браузерах созданных на движке Chromium. Конечно, на других браузерах есть свои подобные инструменты, но мы будем разбирать именно этот.

Инструмент состоит из десяти разделов, каждый из который имеет собственную информацию, которая может вам пригодиться в той или иной ситуации.

Вызывается консоль с помощью сочетания клавиш Ctrl+Shift+i, либо правой кнопкой по странице и “Посмотреть код” или “Исследовать элемент” в зависимости от браузера.

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

Elements

Раздел Elements показывает вам всю верстку страницы. Тут вы можете проанализировать код на скрытые элементы, которые могут быть спрятаны под display:none, но вполне индексироваться сайтом. Так иногда прячут внешние ссылки или целые модальные окна. Также с помощью этого раздела можно проверить какие теги имеют заголовки страницы. Это самый быстрый и легкий способ сделать это.

Код в разделе можно редактировать и он будет динамически влиять на отображение сайта. Но стоит обновить страницу - код вернутся в исходное состояние.

Этот инструмент очень удобен, если вам нужно по быстрому поправить верстку или отображение некоторых элементов. Просто правите их тут, потом копируете стили в CSS файл.

Также с помощью этого инструмента можно проверить валидность скриптов на странице, проверить наличие верификационных кодов и скриптов систем аналитики.

Микроразметку и содержимое мета-тегов также проверяйте с помощью инструмента Elements.

Console

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

Если вы видите, что какой-то скрипт на вашем сайте не работает или в целом что-то не так, то в первую очередь лучше проверять именно раздел Console. Тут вам укажется сама ошибка и строка кода. В общем очень полезный раздел, когда что-то не работает.

Sources

В разделе Sources собраны все скрипты, файлы верстки и изображения. Если вы не смогли найти что-то в разделе Elements, то это точно будет тут. В целом для SEO-аудита не самый полезный раздел и нужен больше для поиска подключаемых файлов и картинок. Кстати, тут вы можете пользоваться поиском по CSS-файлам, что делает выявление скрытых элементов еще проще.

Network

Очень интересный раздел. Тут вы можете посмотреть “водопад” скорости загрузки страницы, количество запросов, редиректов и время загрузки страницы. Также раздел покажет вам скорость загрузки каждого отдельного скрипта, картинки или шрифта и их размер.

Инструмент полезен при анализе скорости загрузки сайта. Вы можете не вооруженным взглядом выявить скрипты тормозящие весь сайта и исправить их.

Audits

Audits - это раздел работающий на технологии Google Lighthouse. Тут собирается информация о всех основных аспектах страницы:

• Визуал
• SEO
• Доступность
• PWA
• Скорость загрузки

По каждому разделу инструмент даст вашему сайту оценку по 100-балльной шкале и подскажет, где есть проблемы.

Performance - раздел отвечающий за скорость загрузки и отображения контента сайта. Тут вы можете посмотреть все основные индексы и даже сам процесс загрузки в скриншотах. Полезно, особенно когда вам надо проверить, какие элементы грузятся первыми.

Также инструмент выдаст чек-лист, пройдя который вы точно улучшите показатели.

Accessibility - или доступность контента. Тут сервис смотрит наличие айфреймов на странице, размера кнопок на разных устройствах, наличие у картинок альтернативных описаний, формы и ссылки.

Тут может быть даже информация о слишком сильном контрасте бэкграунда и основного контента. В общем, если у вас есть проблемы с дизайном или адаптивностью, то информация о них появится на этой странице.

Best Practices - просто раздел с советами по сайту.

SEO - говорит само за себя. Если у вас есть какие-либо проблемы, они обязательно будут в этом разделе. Например отсутствующие мета-теги или подписи к картинкам.

PWA или Progressive Web App - если вы не настраивали этот функционал намеренно - тут всё будет плохо и скорее всего вместо оценки будет прочерк. Саму технологию так просто не описать, если очень просто, то это способ сделать из сайта мобильное приложение.

Ну и в конце вас ждет просто суммарная информация о средстве проведения аудита.

Проверка адаптивности

Последний инструмент, который может нам помочь в СЕО аудите. Вам достаточно просто нажать на иконку мобильного телефона и внешний вид сайта изменится. Теперь он отображается в небольшом окошке эмулируя мобильное устройство.

Устройство вы можете выбрать самостоятельно, все популярные смартфоны уже по умолчанию встроены в браузер. Помимо телефонов есть планшеты и небольшие ноутбуки. Не нашли нужное расширение? Выставьте его сами или просто потяните за рамки окна с сайтом.

Таким образом вы легко можете проверить как сайт смотрится на разных устройствах и “поймать” момент перестраивания десктопной версии в планшетную или молярную. Очень удобно при разработке сайта.

Тут же недавно появилась возможность выбрать скорость загрузки мобильной версии сайта. Теперь вы можете посмотреть как он будет грузиться при медленном мобильном интернете.

Заключение

Вот так легко и просто вы можете провести небольшой аудит сайта без использования сторонних сервисов. Главное преимущество - этот инструмент всегда есть у вас под рукой, прямо в вашем браузере и он всегда показывает данные так, как они есть здесь и сейчас.