Оптимизация HTML кода страниц сайта

Не многие имеют высокоскоростной доступ в Интернет - это раз
Многие знают что такое грамотная верстка - это два.

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

Оптимизация HTML кода и ускорение загрузки страниц сайта

Скорость загрузки сайта не только повод для хвастовства. К сожалению на просторах Интернета очень много страниц которые по-настоящему долго грузятся.
За частую пользователи могут просто недождаться окончания загрузки страницы и спокойно перейти к другому сайту, закрыв окно.

На скорость загрузки страниц сайта влияет много факторов.
В этой статье предлагаю рассмотреть только один из них - скорость загрузки html-кода.

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

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

Лишняя информация

При отображении HTML кода подряд следующие пробелы или знаки табуляции интерпретируются как один пробел.
Если верстка выполняется в каком-либо редакторе, каждая строка исходного текста HTML может оканчиваться не одним специальным символом (0A), а двумя - 0D и 0A. Это также излишне "утяжелит" страницу.
"Пустые строки", то есть строки, состоящие только из спецсимвола с кодом 0A (или двух спецсимволов - 0D и 0A) также увеличивают объем загружаемой страницы.

Как оптимизиовать HTML?

Не использовать готовые HTML-редакторы. Верстайте в блокноте :)

Единообразное именование ссылок

Кеш Internet Explorer регистрозависимый. Это означает, что Вы должны выбирать названия для ссылок (URL'ов), имея в виду различия строчных и прописных букв.
Давайте рассмотрим следующий пример.

<A HREF="/workshop/author/dhtml/reference/dhtmlrefs.asp">DHTML References</A>
<A HREF="/Workshop/Author/DHTML/Reference/DHTMLRefs.asp">DHTML References</A>

Обе ссылки указывают на одну и ту же страницу. Или нет? На UNIX системе эти ссылки будут, вести на две различных страницы. Internet Explorer будет различать их и отправит независимые запросы на сервер, позволяя серверу самому решить, что делать с такими запросами.
Если Вы будете аккуратны в наименовании ссылок, то сэкономите место в пользовательском кеше, и уменьшите число запросов от к серверу для открытия одного и того же ресурса.

Использование таблиц с фиксированной шириной

Таблицы замечательно подходят для организации информации. До того, как CSS-позиционирование появилось в Internet Explorer 4.0, многие авторы HTML-страниц использовали таблицы для расположения элементов согласно макету.
Если вы до сих пор используете таблицы для верстки, то стоит перейти на позиционирование при помощи Каскадных Таблиц Стилей (Cascading Style Sheets, CSS). Начиная с Internet Explorer 5 производительность страниц, использующих CSS вместо таблиц, заметно выше.
Естественно, это не является абсолютным аргументом для полного отказа от использования таблиц. Они по-прежнему могут использоваться, особенно, если вы определите соответствующий table-layout — CSS-атрибут, используемый для достижения оптимальной производительности для Internet Explorer 5+.
Следующие действия позволят Internet Explorer начать отображение таблицы еще до того, как будет получена вся информация о ней.

• Установите для table CSS-атрибут table-layout в значение fixed.


• Явно определите объекты col для каждого столбца.


• Установите для каждого элемента col атрибут width.

Для более подробной информации можно ознакомиться со статьёй Enhancing Table Presentation.

Закрытие тегов

В отличие от XML, в HTML существует понятие неявно закрытых тегов. Они включают frame, img, li и p.
Если вы не закроете эти теги, Internet Explorer нормально отобразит вашу страницу. Если вы закроете их, Internet Explorer отобразит вашу страницу даже быстрее.
По этой причине многие пишут так:

<P>Следом идет список ингредиентов.
<UL>
<LI>один
<LI>два
<LI>три
</UL>

Однако, этот участок кода будет проанализирован гораздо быстрее, потому что он оформлен правильно (с точки зрения XML-синтаксиса), и Internet Explorer не будет искать по коду, где же заканчивается параграф или элемент списка.
<P>Следом идет список ингредиентов.</P>
<UL>
<LI>один</LI>
<LI>два</LI>
<LI>три</LI>
</UL>

Помещайте CSS в начале страницы

Помещение CSS в HEAD ускоряет ее загрузку, т.к. позволяет отрендерить ее постепенно.
Размещение CSS в конце страницы не позволяет начать постепенный рендеринг многим браузерам.
Internet Explorer не начинает рендерить страницу, чтобы не пришлось перерисовывать элементы, у которых во время загрузки изменится стиль.
Firefox начинает сразу отрисовывать страницу, в процессе загрузки, возможно, перерисовывая некоторые элементы, но это является причиной появления нестилизованного контента (FOUC — Flash Of Unstyled Content).
Спецификация HTML4 устанавливает, что таблицы стилей должны быть включены в HEAD-секцию документа: «В отличие от A, [LINK] может появляться только в секции HEAD, зато там [LINK] может встречаться сколько угодно раз».

Помещайте скрипты в конец

Скрипты (внешние .js-файлы) создают похожую проблему, но решается она ровным счетом наоборот: скрипты следует переносить в самый низ страницы, как можно ближе к тегу </body>.
Делая так, браузер будет рендерить страницу постепенно и одновременно распараллеливаем загрузку.
Постепенный рендеринг не начинается для всего контента ниже скрипта. Таким образом, нам выгоднее размещать скрипты как можно ниже.
Вторая проблема, порождаемая скриптами — они блокируют параллельную загрузку. Спецификация HTTP/1.1 советует, чтобы браузеры загружали параллельно не более двух компонентов страницы с одного сайта.
Таким образом, если картинки для вашего сайта располагаются на разных хостах, вы получите более 2-х параллельных загрузок. К сожалению, когда загружается скрипт, браузер не начинает никаких других загрузок, даже с других хостов.

Но в некоторых ситуациях совсем не просто перенести скрипты в конец страницы. Например, если скрипт использует document.write для вставки части контента на страницу.
Во многих случаях есть способы обхода таких ситуаций.
Альтернативным решением является отложенное выполнение скриптов. Атрибут DEFER указывает, что скрипт не содержит document.write и, видя его, браузер продолжает рендеринг страницы.
К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer выполнение скрипта можно задержать, но не настолько, насколько хотелось бы.
В таких случаях можно создать дополнительную функицю, разместить её в конце страницы и вызывать следующим образом <body onload="myfunction();">

Выносите javascript и CSS во внешние файлы

Использование подключаемых файлов существенно уменьшают скорость загрузки страниц, т.к. браузеры кешируют файлы скриптов и таблиц стилей. Встраиваемый в HTML код этих файлов, загружается каждый раз, когда загружается сама страница. Это уменьшает количество необходимых HTTP-запросов, но увеличивает объем HTML. С другой стороны, если скрипты и таблицы стилей находятся в отдельных файлах, скэшированных браузером, размер HTML уменьшается, не увеличивая при этом количество HTTP-запросов.
В таком случае ключевым фактором является частота, с которой кэшируются внешние .js- и .css-файлы относительно количества запросов самого HTML-документа. Это можно приблизительно оценить различными способами. Если ваши пользователи во время одного посещения загружают страницу несколько раз или загружают похожие страницы, которые используют один и тот же код — это лучший случай, чтобы получить все преимущества от вынесения кода в отдельные файлы.
Для страниц, которые загружаются всего несколько (обычно — один) раз за весь сеанс, выгодней встраивать скрипты и таблицы стилей прямо в верстку страницы, что даст выигрышь в скорости загрузки.
Для таких главных страниц, которые открываются первыми в последовательности других с этого же сайта, есть прием снижения количества HTTP-запросов за счет включения скриптов и CSS в код страницы, равно как использования всех преимуществ кэширования за счет динамической загрузки внешних файлов после загрузки всей страницы. Следующие страницы будут использовать уже скэшированные файлы.

Программы для оптимизации HTML кода

Вот некоторые их них:
HTML Optimizer
Tabifier
Модуль VITRAGE для Apache