Анализ сайта с помощью DOM Monster

Программ и различных сервисов для проверки веб-страниц существует великое множество. Это и традиционные валидаторы, проверяющие синтаксис и разметку страниц, сервисы Page Speed от Google и аналогичный YSlow от Yahoo, которые оценивают влияние различных факторов на скорость загрузки сайтов. В этом ряду DOM Monster занимает не последнее место. Этот кросс-платформенный и кросс-браузерный букмарклет (закладка) анализирует DOM и другие характеристики веб-страниц и дает рекомендации по их улучшению.
Document Object Model – это объектная модель документа или сокращённо DOM. Выдержка из Википедии:

«DOM — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких документов.»

Ошибки и недочеты DOM существенно влияют на скорость загрузки веб-страницы и её визуализацию. DOM Monster легко и просто анализирует страницы, находит узкие места и выдает рекомендации по устранению найденных недостатков.

Как начать работу с букмарклетом? Для начала нужно создать саму закладку, которая успешно функционирует в любом современном браузере. Заходим на домашнюю страницу и перетаскиваем закладку на панель закладок браузера. На скриншоте показана закладка DOM Monster в браузере Google Chrome.

Скриншот закладки

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

Можно анализировать страницу и не выходя в Интернет. Для этого надо скачать с репозитория букмарклета его локальный вариант. Для его установки надо открыть в браузере файл bookmarklet-local.html из скачанного архива и перетащить локальный букмарклет на панель закладок браузера. На скриншоте показана закладка DOM Monster в браузере Mozilla Firefox.

Скриншот локальной закладки

Для своих нужд я русифицировал локальный DOM Monster. Скачать его можно на странице загрузки русификаторов. Устанавливается он точно также, как уже было описано.

Что же умеет делать DOM Monster? А умеет он многое. Одна из его самых полезных функцией – общая оценка состояния и сводный отчет о состоянии веб-страницы. Приведу краткий перечень возможностей DOM Monster.

  • Сводка о пустых местах в коде веб-страницы (пробелы, табуляции, разрывы строк)
  • Доктайп страницы
  • Число используемых внешних файлов скриптов
  • Число используемых внешних файлов стилей
  • Глубина вложения
  • Использование инлайн-стилей и скриптов
  • Число комментариев на странице
  • Использование фреймворков
  • Использование веб-шрифтов
  • Использование тегов iframe
  • и многое другое…

Порядок работы с DOM Monster прост и незатейлив. Открываем анализируемую страницу в браузере → открываем консоль браузера → щелкаем по закладке DOM Monster и видим следующие картинки.

Сводный отчет

Скриншот отчета

Сводный отчет

Скриншот консоли

Остается проанализировать отчет, посмотреть конкретику в консоли и принять рекомендуемые меры для оптимизации разметки, стилей и всего остального. Если ошибок нет, то DOM Monster похвалит вас за проделанную работу.