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

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

Для работы нам потребуется самый надежный редактор html – Блокнот. Запускаем его и открываем свою страницу. Что мы видим? Красиво отформатированный код, для удобства чтения и редактирования. К сожалению, красота требует жертв, то есть в нашем случае «веса». Сразу убираем все пробелы, переводы строк и табуляции, чтобы не мучить браузер загрузкой этих ненужных символов. Многим это делать лень и это плохо - скорость Интернета далеко не всегдав зависит от скорости передающих устройств.

Убрав ненужные символы приступаем к ненужным тегам, то есть к комментариям. Иногда хочется вставить <!-- Copyright by Ivanov Ltd.-->, но этого делать не стоит – вряд ли пираты будут пугаться этого комментария при копировании сайта целиком. Если там есть конечно, что копировать. Если же комментарий <!—начало меню --> необходима вам, чтобы вы смогли вспомнить завтра, зачем тут тэг <table> то что тут можно сказать? Записывайте ходы на бумажке. NB! В комментариях прописывать ключевые слова бесполезно.

Обсудим типичное нерациональное поведение при написании кода. Такое поведение, как правило, свойственно WYSWYG-редакторами и редко встречается при ручном вводе html Самым распространенное – глупое использование тега <font>. К примеру:

<font face="Tahoma"><font size="4">Бяка</font></font>

<font face="Tahoma" size="4">Бяка</font>

<font face="Tahoma">Раз</font>

<font face="Tahoma">Два</font>

<font face="Tahoma">Три</font>

<font face="Tahoma">Раз Два Три</font>

Вместо нескольких сотен тэгов <font> гораздо проще использовать css.  Особенно если речь идет об однотипных блоках. Используя css можно сократить размер каждой страницы сайта.

WYSWYG-редакторы выдают массу лишнего кода: совершенно бесполезно прописывают везде ширину (width) и высоту (height) ячеек и таблиц (как правило, хотя бы высоту можно удалить). Иногда эти редакторы добавляют лишние пробелы в окончании тэга или в его середине (хотя такое возможно и при ручном наборе кода):

<p>Раз </p>,

<p>Два    Три</p>,

<td align="center">

 <div align="center">

   <center>

     <p align="center">Центр</p>

   </center>

 </div>

</td>

Кавычки тоже не нужны. Все WYSWYG-редакторы ставят кавычки везде, где только можно, хотя для дела кавычки нужны только в атрибутах тегов alt и href, а также в тэгах <meta>.

Но и в meta-тэгах часто бывают излишества. Лишним будет длинный список ключевых слов (keywords), а также длинное описание (description) сайта. Поисковые машины и интернет-каталоги не любят длинных описаний и ключевых слов. Как правило, ключевые слова не должны превышать длину в 1000 символов, а описания - 200 символов. Кстати, некоторые поисковые машины вообще игнорируют meta-тэги и абсолютно все игнорируют тег author (сведения об авторе), generator (программа-редактор) и аналогичную информацию. Так что, потрудитесь удалить подобное:

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

Много свободного места занимают и имена файлов - картинки, ссылки на другие страницы, обращения к внешним файлам css. Нагружать сайт, неоднократно обращаясь к изображению с названием my_new_website_logo2001.gif на каждой странице, крайне неразумно. На сайтах с большим количеством изображений часто используется папка Images, но простая смена ее имени на Im или I значительно уменьшит размеры всего сайта. Другие папки, естественно, называть тоже надо рационально.

Посмотрите на ваши скрипты. Не лучше ли отказаться от некоторыхjava-скриптов? Когда  просматриваешьлюбительские сайты, иногда кажется, что все они довольно неадекватно относятсяк посетителю, регулярно напоминая ему, какой же сегодня день. Всяческиелистопады и снегопады серьезно мешают восприятию текста. А изменяющиесятитульная или статусная строка интернет-браузера и тому подобные глупостипросто раздражают.

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

Браузеры хранят все изображения в особой папке - кэше - и для повторной загрузки изображений берут их оттуда. Именно поэтому нельзя использовать одинаковые рисунки из разных каталогов. Правильное решение - скопировать все изображения в одну папку - лучше всего, если она будет названа Im или I. Обязательно пропишите атрибуты width и height для тэга <img>. Только так можно дать браузеру осознать, какое количество пикселей требуется для изображения, а иначе при подгрузке каждой новой картинки весь открытый на странице контент будет смещаться.

Параллельная закачка изображений в современных браузерах приводит к тому, что одно изображение в 50 Кб будет загружаться медленнее, чем пять картинок по 10 Кб. Разрежьте большие изображения и время загрузки уменьшиться. Но не стоит усердствовать, иначе получится обратный результат - браузер не закачает параллельно 500 изображений, да и вам это сделать не так просто – получится довольно сложная мозаика. Плюс код - сколько места может занимать несколько десяток тэгов <img> со всеми атрибутами и таблица для размещения изображений. При разумном подходе к нарезке можно снизить и суммарный вес - уменьшения размера каждой части можно достигнуть снижением количества цветов или ухудшением качества.

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

Если вы не хотите затормозить открытие всей страницы, не ставьте счетчиквверху страницы. Счетчик (любого размера) всегда ставьте внизу.

Вы можете сказать – «но ведь существуют же программы для автоматического сжатия страниц!», но заметьте - ни одна из этих программ не соответствует всем требованиям, изложенным здесь, в полной мере. Обычно, программисты этого ПО редко позволяют себе нечто большее, чем простое удаление лишнего форматирования кода. Если хочешь что-то сделать – сделай это сам. Удачи вам в оптимизации ваших сайтов!