Как проверить отсутствие лишнего html кода в коде страниц

25.07.2014.

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

Что влияет на скорость открытия страницы?

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

Каждый из этих пунктов достоин отдельной статьи (а то и целой серии), а сегодня я хочу поговорить о весе страницы и количестве запросов к серверу.

Я думаю, каждому понятно, что чем короче код страницы, тем она быстрее загрузится. Так же, должно быть ясно, что чем меньше элементов (js скриптов, изображений, swf файлов и т.п.) запрашивает с хостинга открываемая страница, тем она быстрее загрузится. Поэтому, для ускорения открытия страниц сайта, нужно всегда стараться оптимизировать html код страницы:

  • Убираем css стили из html кода в файл стилей
  • По-возможности, объединяем изображения в один или несколько файлов
  • Убираем лишний html код (комментарии, не используемые счетчики/кнопки и т.п.)
  • Объединяем css и js файлы

Итак, открываем любую страницу вашего сайта, жмем CTRL+U (или правый клик в пустом месте страницы и пункт «Показать исходный код/код страницы»). Смотрим, что же у нас есть в коде. Если в коде встречаются конструкции вида (поиск по слову » style»):

<style>

</style>

То это прописаны стили каких-либо элементов страницы в её коде. Эти записи нужно перенести в css файл, тем самым уменьшив объем страницы.

Если в коде страницы несколько раз встречается вызов css файлов (конструкции вида <link rel=»stylesheet» type=»text/css» href=»style.css»>), то их можно объединить в один (внимание, не объединяйте с основным файлов файлы хаков (например, для некоторых версий IE)). Аналогично нужно поступать и с файлами, содержащими java script (.js файлами — конструкции в коде вида <script type=»text/javascript» src=»/highlight.js»></script>) — их тоже нужно объединить и оставить в коде только один вызов файла со скриптами. Так же, если js скрипты прописаны прямо в коде страницы (конструкции вида <script type=»text/javascript»>…</script>) — их выносим в единый файл скриптов.

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

Теперь смотрим на внешний вид страницы: если есть какие-то кнопки (в подвале или в боковой панели) — задумываемся, а нужны ли они нам (могут быть кнопки каталогов, куда добавлялся сайт, кнопки от web студии, разработавшей сайт, кнопки/счетчики не используемых систем статистики и т.п.). Если есть такие кнопки — удаляем.

Далее ищем комментарии в коде страницы, пример:

<!—header start—>

И удаляем все лишние комментарии.

Так же не забываем оптимизировать размер изображений, используемых на сайте. Сделать это можно в графическом редакторе или с помощью онлайн сервисов (найти которые можно, задав поисковой системе запрос вида «оптимизация png онлайн»).

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

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

Понравилась статься? Подпишитесь на обновления:
Получать обновления по RSS Подписаться на обновления ВКонтакте

Оставить комментарий

На верхНа верх