Свой бизнес

Уменьшаем вес веб-страниц

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

Для справки: под весом страницы понимают её объём, измеряемый в килобайтах.

Вес страницы складывается из:

- Объем чистого HTML-кода;
- Объём текстовой информации на странице;
- Объём графики, которая является составляющей частью дизайна;
- Объём рекламы (банеров, и(или) текстовых блоков).

Суммарный объём страницы не должен превышать 50Кб, если больше, то посетителям придётся ждать загрузки страницы достаточно долго. В отдельную группу попадают счётчики. Счётчики подобные HotLog и Mail.ru весят приблизительно по 1,2Кб каждый, поэтому злоупотреблять ими тоже не стоит.
Пути уменьшения веса страниц:
1. Откажитесь от комментариев. Зачастую в коде веб-страницы встречаются достаточно бесполезные комментарии, в которых веб-мастер старается подшутить над теми, кто захочет посмотреть код. Фразы типа «Зачем ты залез в код моей страницы и что тебе здесь надо» не несут никакого смысла, но малость увеличивают код.

Хочу заметить, что не стоит отказываться от комментариев к изображениям, т.е. от тега alt=, как раз он вам пригодиться.

2. Используйте CSS. Каскадные таблицы стилей могут достаточно сильно облегчить страницу, если их правильно использовать. Пропишите в CSS font, width и height, а в коде лишь расставьте необходимые ссылки.

3. Аккуратнее со скриптами. Зачастую новости на веб-страницах демонстрируются с помощью бегущей строки, или текст со ссылками движется в маленьком окне, а если на него навести курсор мышки, то замирает.

Всегда необходимо соизмерять полезность Script’а с затратами на него (в качестве затрат в данном случае выступают лишние килобайты на странице). Возможно, что выстроить небольшую колонку новостей с обычным текстом будет более рационально, чем вешать JavaScript.

Единственный случай, когда применение подобного скрипта может быть оправдано – это катастрофическое отсутствие места на странице.

4. Ликвидируйте украшения на веб-странице. К таким относятся анимация, всякие летающие хвосты (для последних используется JavaScript). Неправильное применение подобных украшений будет не только утяжелять станицу, но и раздражать пользователей.

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

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

6. Не забивайте страницы рекламой до отказа. Двух банеров 468*60 будет вполне достаточно. Кнопками дружеских сайтов злоупотреблять тоже не стоит.

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

8. Смените дизайн. В качестве самой радикальной меры можно пойти на изменение дизайна с графического на текстовый. Такая смена подразумевает замену навигационных меню с графических (кнопочных) на текстовые. Такой радикальный шаг имеет немало достоинств. Во-первых, вес страниц снизится на (30-60%), этого мы как раз и добивались. Во-вторых, если ваши страницы были оптимизированы под одно разрешение (что довольно часто встречается при обилии графики в дизайне), то появляется возможность сделать динамический дизайн (оптимизирован под любое разрешение экрана).

Подводя итоги скажу, что если без скриптов, банеров, ссылок на друзей вам не обойтись, то хотя бы распределите их равномерно по всем страницам сайта, не сваливайте всё сразу на одну страницу, особенно главную. Грамотно распределив все «тяжёлые» элементы по всем страницам сайта вы значительно облегчите жизнь пользователям, которые ещё не раз впоследствии вернуться на ваш ресурс.

читать отзывы (0)

Отступы на веб-странице

1. Отступы в теге BODY
Горизонтальные и вертикальные отступы от края браузера до содержимого веб-странице встроены в браузер по умолчанию. Тем не менее можно изменять значение этих параметров, делая отступы по желанию больше или меньше. Хитрость заключается в том, что Internet Explorer и Netscape имеют разные параметры для указания значения отступов. У Internet Explorer в теге BODY следует указывать leftmargin для горизонтального отступа и topmargin для вертикального, а в Netscape те же функции выполняют параметры marginwidth и marginheight. Объединяя все параметры воедино, получим универсальный код, который будет работать во всех браузерах одинаково.

Пример 1. Изменение величины отступов <body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”20″ topmargin=”20″ marginwidth=”20″ marginheight=”20″>

Частенько отступы вообще убирают, делая их равными нулю. Тогда рабочее поле становится больше размером, а используемые рисунки и таблицы, выравненные по краю, располагаются “под обрез”. Ниже приведен пример создания таблицы 100% ширины без пустого пространства между краем браузера и таблицы.

Пример 2. Отсутствие отступов на веб-странице <body bgcolor=”#FFFFFF” text=”#000000″ leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ height=”100″>
<tr>
<td bgcolor=”#CC6600″> </td>
</tr>
</table>

</body>
2. Отступ первой строки
Использование красной строки с отступом в 2-5 пробела повышает читаемость текста, позволяя легко отыскивать взглядом начало следующего абзаца. В HTML любое количество пробелов заменяется одним, в этом случае стоит использовать другой символ -

Пример 1. Создание отступа неразделимым пробелом Пакуйте как можно больше текста на одну экранную страничку. Лучше всего уменьшить для этого шрифт на 2 или 3 единицы. Это обеспечит место элегантной типографии, а так же рабочие места для глазных врачей и продавцов очков. Ваш скромный вклад в развитие народного хозяйства.

Следующий способ также имеет право на существование. Вместо символов пробела надо поставить невидимый рисунок нужной ширины.

Пример 2. Создание отступа прозрачным рисунком <img src=empty.gif width=20 height=1>Указывайте точные размеры окна браузера, которые должен установить посетитель. И чем больше установленные Вами размеры, тем лучше, независимо от того поддерживает соответствующий монитор подобные или нет. В конце концов при оформлении Вы приложили все усилия для достижения выдающегося дизайна и не может быть, чтобы Вашей гениальной планировке была уготована участь наблюдать ее через замочную скважину.

В качестве рисунка можно использовать прозрачный GIF размером 1 на 1 пиксел.
И, наконец, всегда можно воспользоваться стилями. Параметр text-indent задает отступ первой строки текста. Отступ можно указывать в пунктах (pt), пикселах (px), дюймах (in), миллиметрах (mm) и др.

Пример 3. Создание отступа с помощью стилей <head>

<style type=”text/css”>
p { text-indent: 20 px }
</style>
</head>

<p>Каждый пользователь, имеющий звуковую карту, бесконечно рад при посещении Вашей странички услышать наполненную радостью песенку. И охотно ждет несколько, необходимых для перекачки, минут. Особенно midi-мелодии, известные своей полнозвучностью, будут ласкать уши посетителей. Введите посетителей в экстатическое блаженство!

Конечно, использование стилей более универсально, вдобавок менее обременительно. Однако применение символов является более простым, надежным и независимым от браузера способом. При использовании же в качестве отступа невидимого рисунка есть опасность, что пользователь отключил загрузку изображений, тогда вместо отступа будет показываться некрасивая полоса. В конечном итоге, какой метод предпочесть решать вам.

читать отзывы (0)

Слои против таблиц

Что происходит, когда браузер начинает качать таблицу? Он видит тэг <table> и ничего не покажет, пока не увидит тэг </table>. Почему так? Например, потому, что пока вся таблица не закачена, браузер не узнает, сколько ему надо сделать столбцов, или какой ширины надо сделать таблицу (если ширина не задана явно), или же как разбить таблицу на столбцы, если их ширина не задана. Нарисовать таблицу до ее полного скачивания пытается, по-моему, только Мозилла, но и у нее это не очень хорошо получается.

И вот браузер начинает качать верхнюю ячейку таблицы - шапку. Встречает там логотип и баннер 468×60 и начинает паралельно качать и их… Потом горизонтальную менюху, если есть, и только потом - контент. И все это время он качает еще и всю графику, которая ему встречается. Скорость из-за этого сильно снижается. Но даже когда контент закачен, пользователь его не увидит. Потому что надо докачать таблицу, то есть все ее закрывающиеся тэги, правую менюху, если есть и т д… И только потом перед глазами уставшего ждать пользователя появляется вся страница сразу.

Конечно, не лучший вариант. Даже если все страницы очень сильно оптимизированы, весят не больше 15-20 Кб, все равно пользователь с медленным модемом будет ждать появления страницы 10-15 секунд, а если работают и другие окна браузера - еще больше. Не говоря уже о неоптимизированных страницах весом 60-80 Кб…

А вот как выглядит загрузка страницы с использованием слоев вместо таблиц: На белом экране браузера сразу появляется контент в нужном месте. Причем в этот момент ничего больше не грузится… А контент отображается по мере загрузки. Все это время пользователь может уже читать. Ждать первого абзаца контента ему пришлось всего около 2-3 секунд, учитывая время поиска и подключения к серверу. Тем временем контент подгружается до конца, и начинают грузится поочереди другие части страницы - шапка, менюхи и т д. Все это время пользователь может читать! (пример здесь). Согласитесь, такой расклад создает весьма хорошее впечатление о сайте.

Возможны и другие варианты: Контент появляется на всей странице, а потом занимает свое место и освобождает пространство для остальных частей страницы, Контент появляется на своем месте в неотформатированном варианте, а только потом подгружается таблица стилей, и так далее. В любом случае, Вы получаете возможность УПРАВЛЯТЬ процессом загрузки. Мало того, можно выводить информацию, а на мете, например, шаки, временно писать “Дождитесь загрузки”, а потом убрать эту надпись, и заменить ее логотипом или баннером (См. дальше).

Как этого добиться?

Да не так уж и сложно. Просто надо навсегда расстаться со сложившимися стереотипами и отказаться от использования таблиц. При этом надо будет полностью забыть старые привычки и переучиваться почти заново. Например, “width=”100%”" необходимо заменять на “style=”width:100;”", поскольку такие определения ширины сильно конфликтуют друг с другом, и если внутри <div style=”width:200px;”> поместить <table width=100%>, ширина таблицы будет отнюдь не 200 пикселов, а она растянется на всю ширину страницы - кошмарное зрелище…

Итак, Вы, допустим, привыкли верстать свои страницы примерно таким образом:

<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan=2>Шапка</td>
</tr>
<tr>
<td width=150>Менюха</td>
<td>Контент</td>
</tr>
</table>

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

<style>
.content {
margin-top:70px;
margin-left:150px;
border:solid 1px;
}
</style>

<div class=”content”>
Контент
</div>

<style>
. ead {
position:absolute;
top:0px;
left:0px;
width:100%;
height:70px;
border:solid 1px;
}
</style>

<div class=”head”>
Шапка
</div>

<style>
.menu {
position:absolute;
top:70px;
left:0px;
width:150px;
height:200px;
border:solid 1px;
}
</style>

<div class=”menu”>
Менюха
</div>

Таким образом, порядок загрузки будет такой: сначала таблица стилей для контента, потом сам контент (уже отформатированный), потом css шапки и шапка, потом css менюхи и менюха. Такой расклад наиболее удобен, поскольку и контент появится сразу на месте и баннер в шапке появится до менюхи, а значит пользователь скорее всего не нажмет STOP раньше времени. Возможны и другие варианты. Например, таблицу стилей для контента можно грузить в конце, и задать для него “z-index:2;” и какой-нибудь фон в начале. Тогда пользователь будет видеть только контент, развернутый на все окно, пока полностью не загрузится все остальное. Потом контент займет свое место и появятся остальные части дизайна.

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

<div class=”waitmsg”>
Дождитесь загрузки страницы
</div>

А внизу, когда все будет уже загружено:

<style>
. aitmsg {
display:none;
}
</style>

Тогда это сообщение пропадет как только документ будет полностью загружен.

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

1) Не все браузеры это понимают.
Только IE 4+, Mozilla 1.0, и более или менее свежие версии Opera (Не могу сказать точно версии, поскольку все они пытаются понять слои, но со своими багами. Например, не понимается свойство “background-*;”, что может сильно все испортить) и в той или иной мере другие, менее популярные браузеры. Но в любом случае, порядка 95% пользователей это поймут и увидят в должном виде. Ну а если Вы бережете каждого пользователя и не хотите терять остальных 5%, Вам следует сделать и другие версии дизайна и подсовывать каждому свою. Для пользователей Netscape можно заменить все “<div>” на “<layer>” и “<ilayer>”, остальным же подсовывать таблицы.

2) Чуть-чуть увеличенный объем страниц всвязи с включением таблиц стилей в код.
И от этого никуда не денешься. Всем известно как иногда глючит IE при включении отдельной таблицы стилей. Иногда он просто забывает ее подгрузить (точно не обнаружил, какие версии это допускают), и в таком случае Ваша страница будет выглядеть просто кошмарно! В нашем примере шапка окажется под контентом, а менюха расположится в самом низу:) Но некритические части таблицы можно подгружать отдельно.

3) Возможные ошибки.
Если Ваш контент генерится скриптом, и там вдруг окажется, например “</div>”, - пиши пропало! Страница превратится в мусор!

4) Неверное отображение при маленьких размерах страниц.
Вам необходимо протестировать свои страницы изменяя размеры окна. Если вдруг что-то не поместится по горизонтали, возможны баги. Хотя не существенные, заисключением тех случаев, когда Вы используете менюху не только слева, но и справа.

Но если Вы все-таки поборите все сложности, Вы оставите ОЧЕНЬ хорошее впечатление у каждого посетителя. Ведь они, родимые, любят когда о них заботятся:)

читать отзывы (0)