Анализируем качество сайта с помощью DOM Monster

Анализируем качество сайта с помощью DOM Monster

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

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

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

В сущности, сам по себе перечень основных положений по оптимизации качества сайта не так уж и велик. Перечислю и опишу их вкратце:

  • скорость работы сервера и ширина канала хостинга. Зависит от выбранного вами поставщика услуг;
  • количество внешних JS и CSS файлов. Например, многие плагины для WordPress используют свои собственные CSS и JS файлы, которые загружаются вместе со страницей;
  • оптимизация и сжатие изображений, JS-скриптов и CSS файлов. Например, JPG изображения в 100% качестве, размер  отдельных CSS и JS файлов и т.д.;
  • сжатие страниц сервером. Используется ли для сайта Gzip — утилита сжатия и восстановления файлов;
  • использование кеширования страниц. Например, применение разнообразных плагинов WordPress для кеширования — от Hyper Cache до Maxsite Cache;
  • оптимизация количества загружаемых элементов и уменьшение количества http-запросов. Например, использование CSS спрайтов или удаление лишних и неиспользуемых сторонних приложений (несколько вариантов кнопок Twitter, Facebook и т.д.;
  • уменьшение количества запросов к БД. Например, многие плагины хранят свои настройки и данные в БД, что увеличивает количество запросов к базе при загрузке страницы;
  • оптимизация и очистка базы данных сайта. Появившиеся в версии WordPress 3.0 ревизии очень сильно замусоривают базу, что приводит к увеличению ее объема и более длительной обработке запросов.

Подробно останавливаться на коррекциии каждого из этих моментов не имеет смысла — большой объем работы уже проделан коллегами:

  • Дмитрий написал серию статей на тему «Увеличиваем скорость загрузки сайта с помощью PageSpeed» (дополнение для плагина Firebug) написал Дмитрий — автор блога .
  • в блоге Олега Михайленко вы найдете статью «Чистим БД WordPress с помощью WP-Cleanup», в которой рассматривается способ очистки базы данных от лишних записей.
  • оптимизировать базу данных для WordPress можно с помощью плагина WP-DBManager, русскую и украинскую версию которого вы можете найти на сайте «Русские и украинские плагины для WordPress».

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

Зачем нужен DOM Monster и что он умеет

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

  • анализ JS-кода в тексте страницы и его объема;
  • проверка количества внешних JS и CSS-файлов;
  • проверка количества iframe в коде страницы;
  • проверка глубины вложенности кода;
  • проверка пустого и неиспользуемого места в коде страницы (пробелы, переносы строк и т.д.);
  • анализ Doctype страницы;
  • анализ количества комментариев в коде страницы;
  • анализ соответствия страницы — HTML5;
  • проверка актуальности используемой версии jQuery.

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

Как использовать DOM Monster

В отличие от Firebug / Page Speed, DOM Monster — это букмарклет, который работает практически не зависимо от платформы или браузера (к сожалению, текущая версия 1.2.8 не поддерживает Internet Explorer). Кроме того, обновление и контроль версий не требуется, т.к. сам букмарклет это JS-файл, размещенный на сервере разработчика. Впрочем, вы можете скачать исходный код и разместить файл у себя на сервере.

В использовании DOM Monster крайне прост — просто перетащите ссылку на панель закладок браузера, затем зайдите на любой сайт и нажмите на нее. У вас откроется окно, аналогичное тому, что на скриншоте ниже, со всеми параметрами и советами по сайту.

Анализируем качество сайта с помощью DOM Monster

Где взять DOM Monster?

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

А вы задумывались над оптимизацией своего сайта?

Вы плохо спите по ночам, но не знаете как выбрать ортопедический матрас? Приятный интернет-магазин Matrasiki.com.ua не только поможет сделать выбор, но и доставит Вашу покупку в кратчайшие сроки!

45 комментариев к “Анализируем качество сайта с помощью DOM Monster”

  1. Штука видимо хорошая, но из всех советов я понял только один — забыл снести коды Зорьки... А их там сколько и все на английском ((((

    ОтветитьОтветить
  2. Простая штучка, но с английским работать очень не удобно. Почему бы не перевести, тем более, что код доступен?

    И следующий вопрос: А нужно ли проверять на соответствие HTML 5? Пока, по моему, рановато.

    ОтветитьОтветить
  3. @ Xstroy: спасибо за комментарий.

    Формально — перевести особых проблем не составляет, тем более, что код доступен. Единственное что, нужно будет постоянно вести контроль версий и обновлять перевод в соответствии с версиями букмарклета.

    А нужно ли проверять на соответствие HTML 5? Пока, по моему, рановато.

    Ну, тут дело такое — Google Chrome поддерживает HTML5, начиная еще с 5.х версии. В IE9 тоже обещают полноценную поддержку. А учитывая широкий перечень возможностей, которые открываются при использовании именно HTML5, думаю, что до его промышленного внедрения осталось не так уж и много.

    ОтветитьОтветить
  4. А чем иняз так страшен? Ничего в этом такого нет, можно спокойно разобраться в утилите.

    ОтветитьОтветить
  5. На личном блоге использую большую часть возможной оптимизации загрузки (слияние файлов js, css), кеширование и т.д.

    DOM monster — штука интересная, но без знаний англ. сложно (в очередной раз удостоверился, что надо учить его).

    ОтветитьОтветить
  6. @ haserk:

    ну, тут уж как сказать... переводчиком то я воспользовался, но толку мало — некоторые слова я вообще впервые вижу, а другие — ну никак по смыслу не подходят (технические термины).

    ОтветитьОтветить
  7. Блин, с английским тяжко. И с переводчиком сидеть тож не с руки.

    ОтветитьОтветить
  8. Интересная штуковина. Но согласен по поводу перевода. Надо сделать его.

    ОтветитьОтветить
  9. Так он просто анализирует или помогает исправлять?

    ОтветитьОтветить
  10. @ wudwan: он анализирует и дает советы — какие именно «узкие» места нужно исправить и что именно нужно сделать.

    ОтветитьОтветить
  11. @ TRSteep: Page Speed не лучше и не хуже — он просто другой. У DOM Monster есть часть параметров, которые Page Speed не определяет.

    Ну и кроме того, никто ведь не мешает использовать оба инструмента :)

    ОтветитьОтветить
  12. Если такое будет, то бедные будут сео конторы, а хотя чего удивляться, если гугл каждые 9 вроде месяцев меняют системы аналитика и адвордс, а поисковые и того быстрее. Вобщем есть чему радоваться — теперь сео специалисты и IT ики будут еще больше получать -)

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

    ОтветитьОтветить
  14. Конечно интересно, но такого быть не может... Ссылочный вес в историю уйти не может... Кстати всех с днем Святого Валентина!

    ОтветитьОтветить
  15. Да, перевод нужен.

    Если гугл перейдет на новую систему ранжирования, то бедные интернет магазины — особенно на joomla.

    ОтветитьОтветить
  16. Спасибо. Только с прогой осталось разобраться. Сравнить с конкурентами и вперед в топ)).

    ОтветитьОтветить
  17. )) Интересно... попробую свой сайт проверить) Наверняка мой код далек от совершенства

    ОтветитьОтветить
  18. Прикольная вещица.

    Только русской версии нету, а жаль :(

    ОтветитьОтветить
  19. Люди учите английский прога стоящая.

    ОтветитьОтветить
  20. Вот сижу и думаю, зачем попробовал DOM Monster, на моих любимых сайтах повыскакивало кучу рекомендаций для оптимизации, вот сижу скрипты и стили собираю в один файл. Потом разберусь с остальным.

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

    ОтветитьОтветить
  21. @ Владислав: в каком смысле — «почему провел»? Потому, что PR пока существует и остается одним из мерил сайта.

    ОтветитьОтветить
  22. Вот бы найти что-нибудь для оптимизации страниц. А то вручную править не всегда получается.

    ОтветитьОтветить
  23. Я, честно говоря, не верю, что Gogle полностью откажется от ссылочного ранжирования. Ведь по сути на ссылках интернет и построен. Так что их сбрасывать со счетов не стоит. Ну а техническая составляющая — кто ж спорит. Чем сайт загружается быстрее, то на тот и заходить почаще приятнее!

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

    ОтветитьОтветить
  25. Удобно, но я лично немного подзапутался. Может кто-нибудь из разработчиков добавит в неё русский язык. А то некоторые слова даже переводчику не под силу.

    ОтветитьОтветить
  26. ну ни для кого не секрет, Google уже давно использует алгоритм, который учитывает при ранжировании скорость загрузки сайта. а за ссылку на программу спасибо) поглядим, потестим))

    ОтветитьОтветить
  27. Действительно прикольная штучка и полезная. С удовольствием испробую! Спасибо за ссылочку!

    ОтветитьОтветить
  28. А каким должен быть оптимальный размер изображения? Просто на главной странице моего сайта достаточно часто появляются картинки, дак хотелось бы узнать до сколько примерно надо уменьшать размер изображения?

    ОтветитьОтветить
  29. @Анатолий: оптимальный размер изображения зависит от визуальной составляющей сайта. Проще говоря — от того, какого размера изображение лучше всего подходит под общее форматирование статей. Например, для этого иллюстрирования статей этого блога, я использую размер изображения 280px по ширине.

    Если нужно показать какой-либо элемент на картинке ближе (больше), стоит сделать увеличение по клику.

    ОтветитьОтветить
  30. Действительно DOM monster интересная штуковина, выучить бы английский!

    ОтветитьОтветить
  31. Читал проэто в интернете, но так и не понял ведь CMS так много, а под Гугл заточены не все... вопрос остается открытым. А судьи кто...?

    ОтветитьОтветить
  32. Что то я не совсем поял как его использовать? Что и куда перетаскивать? Пробовал перетащить ссылку DOM Monster! в Хроме и в Файерфоксе, но ничего не получается. :- (

    ОтветитьОтветить
  33. @Остап: переходите на официальный сайт, перетаскиваете букмарклет на панель закладок, открываете нужный сайт, нажимаете на закладку и получаете анализ сайта в окошке.

    ОтветитьОтветить
  34. Проверил свой сайт через Page Speed, мне нужно Удалить из верхней части страницы код JavaScript и CSS, блокирующий отображение. Пробовал найти в сети инфо как это сделать и не нашел ( Может кто нибудь подсказать как это сделать или дать ссылку, желательно. на видео инструкцию

    ОтветитьОтветить
  35. @Ростислав: определите, что это за код, за что он отвечает, откройте файл шаблона и удалите эти строки, если они действительно не нужны. Вот, собственно, и все.

    ОтветитьОтветить
  36. @Yaroslav.CH: Код определить не сложно, все коды показаны, другой вопрос, для меня, как его найти на сайте. Вот вообще текст который выбивается: Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

    Количество блокирующих скриптов на странице: 22. Количество блокирующих ресурсов CSS на странице: 22. Они замедляют отображение контента.

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

    Удалите код JavaScript, препятствующий отображению:... и идёт перечень кодов.

    Для меня это высшая математика ) Помогите найти видео урок по устранению этой проблемы

    ОтветитьОтветить
  37. @Ростислав: а, вот оно что... подозреваю, дело не в каком-то конкретном куске кода. Имеется ввиду слишком большое количество CSS и JS файлов, которые подключаются на странице.

    Откройте код стартовой страницы и посмотрите сколько там строк вида: <link rel="stylesheet" href="[ссылка-на-.css-файл]">

    А также ссылок вида:

    <script type='text/javascript' src="[ссылка-на-.js-файл]"></script>

    В принципе, обычно хватает одного CSS-файла и одного JS. Но если мы говорим о Вордпрессе (да и многих других расширяемых CMS), то дело в том, что при установке каждого плагина, он, чаще всего, подключает свой собственный файл со стилями (в дополнение к основному файлу самой темы), от чего их количество увеличивается. И, если плагинов много, то и файлов будет соответственное количество. При этом каждый этот файл нужно загружать, что притормаживает загрузку всей страницы в целом. Возможно, именно об этой ситуации и говорит Вам Page Speed.

    Или же, как второй вариант, у Вас прямо в код страницы вынесено очень много CSS-правил (вне файлов).

    ОтветитьОтветить
  38. @Yaroslav.CH: Прочитавши Ваш ответ, кажется всё так просто, но увы не для меня, пока что.

    P.S. Отправил Вам письмо на почту. В теме: Давайте свяжемся!!!

    ОтветитьОтветить
  39. Вот такую информацию я искал, спасибо за ссылки на статьи, буду изучать и пробовать работать с DOM Monster. Спасибо еще раз.

    ОтветитьОтветить
  40. про сжатие страниц прям в точку, спасибо!

    А есть что-то про оценку скорости ресурса ИПС и сервисами? Это просто ping, или как-то рассматривается загрузка, выполнение скриптов?

    ОтветитьОтветить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *