Быстрее ветра - быстрый 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, да и тестировать приятнее.
Оставить комментарий
Комментарии
или там кавычки только в тегах "alt"...
Но разве о xhtml никто не слышал? Он ведь такого не допускает. А по-моему стандарт неплохая штука, легче потом самим же будет под любые браузеры писать. Всем бы на него перейти. Ну не знаю как остальные, но я любой код только на xhtml-е пишу. Валидатором потом проверяю...
Mike, сохрани страничку вместе с рисунками и скриптами и посмотри - значительно больше 20-30 получается. Оно все понятно про кэш и прочую лабуду, но ты как человек разумный не можешь не согласиться, что экономить на читаемости кода - бред.
Да и в целом статья о каком-то убогом сайтике на народ.ру:
А как быть с корпоративным порталом на десятки разделов? Код к каждому из которых пишет отдельный специалист. А он ведь может и уволиться когда-то. Или по мнению автора - после меня хоть трава не расти? В этом случае, слушать его вообще не стоит: непрофессионал ничего полезного не скажет.
43Кб, из них 2Kb картинки (это невидимые счетчики) - это не 200-300 !!
Нужно понимать что этой статье больше пяти лет - это раз. Нужно понимать что разным сайтам - разные размеры - это два.
Да и в целом статья о каком-то убогом сайтике на народ.ру:
"Ну, а если надпись <! тут таблица для навигации > просто необходимо, чтобы вы через некоторое время могли вспомнить, зачем там у вас тэг table, то что тут можно сказать? От склероза овощи помогают."
А как быть с корпоративным порталом на десятки разделов? Код к каждому из которых пишет отдельный специалист. А он ведь может и уволиться когда-то. Или по мнению автора - после меня хоть трава не расти? В этом случае, слушать его вообще не стоит: непрофессионал ничего полезного не скажет.
Автор предлагает превратить код в нечитаемую кучу дерьма. Из-за экономии 1-1,5 килобайт. Если страница в общей сложности занимает около 200-300 килобайт (как например средняя страница сайта codenet.ru), то 1-1,5 килобайта будут незаметны что на широком канале связи, что на узком. Я уж молчу, что траффик от этих крох никакой.
"заодно и позора среди профессионалов избежите" - я плакал.
Если мне покажут ту оптимизацию, которую предлагает автор - я буду плакать еще сильнее. от хохота.
<tr>
<td><p><img src=del.jpg>Are you sure you want to remove folder 'Windows' and all its contents?</p>
<tr>
<td><a href=1.htm>Ok</a>
<td><a href=0.htm>Cancel</a>
или ждать 10 мин =))) зато всего 1 -2 кб
на все изображения =)
,желательно, и файлы должные быть не ia_i_moya_kot_matroskin_na_divane.jpg
а чтонибудьпопроще, me.jpg .А те кто боится, чтоб с его, сайта, скачали все картинки какойнибудь прогой, из за простоты названий...думаю, пусть жмотятся...
Вот ещё совет, некторые, делают, так, в теге img всегда пишут, формат jpeg,
а разница между jpeg и jpg ни какой,
так если, рузальтат такойже, зачем платить больше?
Выравнивание пробелами? ))) У меня друг самоучка (почти всего html, css, java-script, cgi, php, perl, C++, Visual Basik енто только что я помню! Гений он!) Так делает!!! Я например не выравниваю пробелами,для удобочитаемости и редактирования просто пишу РАЗНЫЕ теги на разных строчках!)) Только проблема с привычкой теги br и hr пишу на каждой строчке! Никак не избавлюсь! ((( Но вот с изучением css становится легче работать! Я думал, что он (css) - сложная штука! А оказывается ничего сложного) Нужна только память... которая плохая))) Приходится делать шпаргалки и пользоваться ими)))
Accept-encoding: gzip
))
На самом деле в силу грядущего наступления эпохи XML лучше кавычками обрамлять все атрибуты тегов.