Оптимизация HTML кода

Уделим сегодня немного внимания оптимизация HTML кода, но не seo (это отдельный разговор), а обычной оптимизации, т.е. что можно сделать с кодом, чтобы он легче читался и не утяжелял страницу. Я понимаю, что у доброй половины человечества давно уже стоит выделенка со скоростью по 4, 10, а то и все 30 Мб, но тем не менее! Google пару лет назад обозначил, что скорость загрузки страницы влияет на ее ранжирование. Так что делаем выводы, после чего открываем редактор (будь то DreamWeaver, Notepad ++ или блокнот) и начинаем вносить правки.

Этап первый

Выносим все стилеопределяющие параметры в CSS-файл. То есть если видим такой бред как

<div style="font-size: 14px; font-weight: bold; padding: 10px 10px 10px 10px;">Some text</div>

то смело меняем на

<div class="some">Some text</div>

ну а в файле стиле уже прописываем

.some {font-size: 14px; font-weight: bold; padding: 10px;}

Вопрос оптимизации CSS мы рассматривали ранее, поэтому сейчас на ней подробно останавливаться не буду.

Этап второй

Разносим стили по разным файлам. Чтобы было понятно, объясню на примере. Чаще всего (читай: почти всегда) в моей верстке подключается два файла стилей: в одном записаны стили, относящиеся непосредственно к дизайну, а во втором - все что определяет стиль для контетной части (заголовки h1-h6, два вида списков, параграф, цвет ссылок, таблица, рисунки с выравниванием по левому и правому краю). Это реально удобно, особенно если вы верстаете часто, а оформление текста идет примерно одинаковый. Такую заготовку удобно держать под рукой, т.к. в этом случае ничего важного вы не забудете.

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

Этап четвертый

Объединяем несколько стилей в один. Например, мы имеем следующий код:

<div class="box"><div class="red">Some text goes here</div></div>

Допустим класс box определяет такие параметры, как размер блока, цвет фоновой заливки, размер шрифта. А класс red окрашивает текст в красный цвет. Безусловно все это мы могли бы объединить в один стиль под названием box_red, но предположим что у нас таких блоков в верстке несколько и у каждого из них разный цвет текста (например, зеленый и синий). Будет нелогично создавать еще стили box_green и box_blue, в каждом из которых будет по 4 строки кода (хорошо, если всего 4, а не все 8).

В этом случае мы можем обойтись малой кровью, записав код таким образом:

<div class="box red">Some text goes here</div>

Ну а если нам нужно будет поменять цвет, то вместо red подставляем green или blue.

Этап пятый

Использование комментариев. Рекомендовано к использованию при верстке больших сайтов (больших по количеству кода) и в случае, если эту верстку интегрировать в движок будете не вы. Зачем программисту лишний раз ломать голову, дабы понять, где заканчивается “шапка” и начинается контентная часть.

Этап шестой

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

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

Спасибо за добавление статьи в: