Быстрее ветра— быстрый html

Владимир Мазепа, http://www.mycomp.com.ua/

Ну что, у вас уже есть своя страничка? Графику, конечно же, оптимизировали? Довольны, небось, скоростью закачки страниц по ftp, скоростью, с которой они открываются в браузере? Наверное, нет. А все потому, что иногда надо залезть в святая святых — html-код и чуть-чуть его подправить. Вот об этом мы здесь и поведем речь.

Часть первая. Оптимизация кода

Запускаем любимый Notepad и открываем свою страницу. И видим мы очень красивый html, заботливо отформатированный вручную или разными программами, чтоб и читался удобнее, и редактировался быстрее. А заодно и медленнее грузился. Так что, может быть сразу стоит убрать пробелы, табуляции и переводы строк, чтобы не мучиться с загрузкой этих пустых символов? Многим лень это делать, а жаль — быстрота Интернета ведь не только от скорости модемов зависит... Грустно мне, да и вам как не станет грустно, когда откроете исходники парочки посещенных сайтов, а там пустот больше чем текста. Вот и пожалеете, что вообще туда заходили. И владельцам таких сайтов как не грустно — это ж сколько лишнего трафика!

Погрустив о пустом месте, перейдем к месту менее пустому — к комментариям в коде. Хоть и хочется вставить <!-- Copyright (c) by Pupkin Inc.-->, но может, не стоит — мало нам, простым посетителям вашего сайта, чтения вашего интересного текста и созерцания красивых картинок, чтобы оценить богатство и неординарность вашей творческой натуры? Ну, а если надпись <!-- тут таблица для навигации --> просто необходимо, чтобы вы через некоторое время могли вспомнить, зачем там у вас тэг <table> и всякие

<td><a href="d.htm">download</a></td> <td><a href="l.htm">links</a></td>

то что тут можно сказать? От склероза овощи помогают. И еще: если встретите совет прописывать ключевые слова в комментариях — не верьте.

Теперь о типичных нерациональностях кода. Такие нерациональности редки при ручном вводе html, но в связи с повсеместным пользованием FrontPage и ему подобных софтин они встречаются на каждом шагу. Самым распространенным излишеством является кривое использование тэга font. Например:

<font face="Courier"><font size="3">Текст</font></font>

вместо

<font face="Courier" size="3">Текст</font>

Но это еще ничего, гораздо хуже, когда визуальный редактор выдает ничего не подозревающему автору подобный перл:

<font face="Courier">Текст1</font> <font face="Courier">Текст2</font> <font face="Courier">Текст3</font>

вместо простого

<font face="Courier">Текст1 Текст2 Текст3</font>

Особенно на тэг font грешат старые версии FrontPage. Вот так вот. А ведь многие любители этой программы и не подозревают... Кстати, такое использование <font> я впервые обнаружил в исходном тексте страницы, которая как раз за этот самый FrontPage и агитировала.

Перед тем как оформлять страницы тэгами <font> задумайтесь: а не проще ли использовать css? Благодаря css можно уменьшить размер каждой страницы, вынесение же заголовка css в виде отдельного файла уменьшит суммарный размер сайта. Но тут-то придется посложнее. Ведь если и html «со словарем», то куда уж там css учить!

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

<p>Абзац </p>, <p>Текст1 Текст2</p>,

частенько повторяют выравнивание:

<td align="center"> <div align="center"> <center> <p align="center">Абзац по центру</p> </center> </div> </td>

Кавычки, кстати, тоже можно убрать. Все программы-редакторы ставят их куда ни попадя, хоть на самом деле кавычки нужны только в атрибутах 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>. Только таким образом можно дать браузеру информацию о том, сколько пикселей надо выделить для картинки, ведь иначе при подгрузке каждого нового изображения весь уже открытый на странице контент будет сдвигаться.

Из-за возможности параллельной закачки картинок в современных браузерах получается, что одна большая картинка в 40 Кб будет грузиться медленнее, чем четыре картинки по 10 Кб. Разрежьте большие картинки и почувствуйте разницу. Но не стоит резать на слишком много маленьких кусков, иначе получится обратный результат — браузер параллельно закачивает определенное число файлов, да и вам оно выйдет боком: представьте, каково организовать всю эту мозаику в коде страницы! А представьте, сколько места может занимать десяток тэгов <img> со всеми их атрибутами, плюс таблица для размещения картинок. И еще, при правильном подходе к разрезанию можно уменьшить суммарный размер — можно заменить картинку в 40 Кб несколькими, занимающими в сумме значительно меньше. Как? Очень просто — режьте разумно, зная, что уменьшения размера каждого отдельного куска можно достичь уменьшением количества цветов (gif) или уменьшением качества (jpeg).

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

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

Давайте еще раз подумаем, нужны ли некоторые скрипты на страницах вашего сайта. Стоят ли впечатления посетителя от какого-нибудь примитивного таймера тех денег, которые ему приходится тратить на время его загрузки и открытия? Особенно если вспомнить, что во всех современных операционных системах есть свой таймер, всем привычный и на всем привычном месте... Вообще, java-скрипты профессиональные веб-мастера редко употребляют. Иногда реализуют эффект перекатывания изображений (rollover effect), иногда (чаще на западных сайтах) делают выпадающее меню. И все...

Часть третья. Последняя

Справедливости ради следует отметить, что существуют программы сжатия страниц, но ради той же справедливости замечу, что ни одна из них не соответствует изложенным требованиям в полной мере. Как правило, программисты этих программ редко позволяют себе нечто большее, нежели простое удаление форматирования кода или чистку html, сгенерированного Word'ом. Да и вмешательство в свой код ни хороший веб-мастер, ни плохой FrontPage :-) не любит.

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