Владимир Мазепа
Ну что, у вас уже есть своя страничка? Графику, конечно же,
оптимизировали? Довольны, небось, скоростью закачки страниц по ftp, скоростью, с
которой они открываются в браузере? Наверное, нет. А все потому, что иногда надо
залезть в святая святых - html-код и чуть-чуть его подправить. Вот об этом мы
здесь и поведем речь.
Запускаем любимый Notepad и открываем свою страницу. И видим мы
очень красивый html, заботливо отформатированный вручную или разными
программами, чтоб и читался удобнее, и редактировался быстрее. А заодно и
медленнее грузился. Так что, может быть сразу стоит убрать пробелы, табуляции и
переводы строк, чтобы не мучиться с загрузкой этих пустых символов? Многим лень
это делать, а жаль - быстрота Интернета ведь не только от скорости модемов
зависит... Грустно мне, да и вам как не станет грустно, когда откроете исходники
парочки посещенных сайтов, а там пустот больше чем текста. Вот и пожалеете, что
вообще туда заходили. И владельцам таких сайтов как не грустно - это ж сколько
лишнего трафика!
Погрустив о пустом месте, перейдем к месту менее пустому - к
комментариям в коде. Хоть и хочется вставить <!-- Copyright (c) by Pupkin
Inc.-->, но может, не стоит - мало нам, простым посетителям вашего сайта,
чтения вашего интересного текста и созерцания красивых картинок, чтобы оценить
богатство и неординарность вашей творческой натуры? Ну, а если надпись <!--
тут таблица для навигации --> просто необходимо, чтобы вы через некоторое
время могли вспомнить, зачем там у вас тэг <table> и всякие
заодно и позора среди профессионалов избежите.
В исходном тексте любой страницы много места занимают имена
файлов - вставленные картинки, ссылки на другие страницы сайта, обращения к
внешним 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, да и тестировать приятнее.
Литература по HTML
|