Главная -> HTML -> Оптимизация HTML кода

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

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

Этап первый

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

Some text

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

Some text

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

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

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

Этап второй

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

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

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

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

Some text goes here

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

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

Some text goes here

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

Этап пятый

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

Этап шестой

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

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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.