div.main {margin-left: 20pt; margin-right: 20pt}
Слои в борьбе за скорость
"Таблички не использовать - текст внутри таблички view'ер
не показывает до тех пор, пока вся
табличка не приедет целиком. При
маленькой скорости связи юзер будет
несколько минут пялиться в пустой экран..."
М. Мошков. Правила
хорошего тона в WWW
|
К этому нужно добавить - только очень
терпеливый юзер будет пялиться в экран
несколько минут. Пользуясь услугами dial-up
"нескучного" Cityline, я всегда избегал
заходить на 95-килобайтную Ленту.Ру
Дождаться ее загрузки у меня не получалось.
Вынесенные в эпиграф статья
датируется 1996/98 годом,
однако до сих пор сайтов построенных по
указанному правилу практически нет.
Что старый стандартный двухколонный дизайн,
что новый трехколонный большинства
сайтов заключен в таблицу и еще одну
таблицу и много других вложенных таблиц. В
общем, за 6 лет ситуация с таблицами, на
первый взгляд не изменилась и альтернативы
не видно. Но это только на первый взгляд.
Главное, что произошло - сошли на нет броузеры
MSIE3 и NN3, не поддерживающие слои. А
поскольку ожидать радикального улучшения
качества связи не приходится, единственное,
что может как-то улучшить ситуацию -
построение сайтов на основе слоев.
Сравним построение шаблона на
таблицах и слоях применительно к типовому
сайту. Как правило, он из трех частей - шапки и
двух колонок, одна из которых содержит
основную информационную часть, другая – вспомогательные элементы (навигацию,
баннеры, ленты новостей и пр.) В первом
приближении табличный шаблон сайта
выглядит так:
<table width="600">
<tr>
<td colspan="2" height=20>
Шапка
</td>
</tr>
<tr>
<td width='200'>
Навигационная колонка
</td>
<td width='400'>
Контент
</td>
</tr>
</table>
Контент, появится на экране
только после того, как загрузится целиком
все содержимое таблицы - шапка с логотипами,
баннерами, и горизонтальной навигационной линейкой, левая
навигационная колонка и собственно контент.
При этом загрузка страницы замедляется
параллельной подкачкой картинок.
Шаблон на слоях выглядит так:
<div id="Right" style="position:absolute; width:400px;
left: 200px; top: 21px">
Контент
</div>
<div id="Top" style="position:absolute; width:600px;
height:20px; left: 0px; top: 0px">
Шапка
</div>
<div id="Left" style="position:absolute; width:200px;
left: 0px; top: 21px">
Навигационная колонка
</div>
В этом случае загрузка идет совершенно по
другому. На экране появляется не все
одновременно, как в случае с таблицами, а
последовательно. Сначала на экране
появится контент, затем шапка и навигация.
Причем, наиболее важно то, что контент
отображается по мере загрузки. Т.е. пока
пользователь ознакомится с содержимым
первого экрана, второй экран будет уже
заполнен.
Суммарное время загрузки шаблона
на слоях чуть больше чем табличного. Но
здесь срабатывает психологический фактор.
Контент, из-за которого пользователь пришел
на сайт, в случае шаблона на слоях будет
отображаться на экране с максимальной
скоростью, которую позволяет канал связи. А
в случае с таблицами, придется ждать
загрузки практически всей страницы целиком.
Известный специалист по usability Я.Нильсен
полагает, что "если пользователь не
получает необходимую информацию на сайте в
течение 10 секунд, он ищет ее в другом месте"
(по более ранним данным, критическое
время отклика равно 20с).
Как можно подсчитать выигрыш
полученный от использования слоев?
Методика достаточно простая. В различных
точках шаблона устанавливаются картинки
размером 1х1 px, которые при помощи Java-скрипта
передают
на сервер время их загрузки у пользователя (аналогично
тому, как работают счетчики типа SpyLog или HotLog).
Эти данные позволяют, в первом приближении,
оценить разницу в скорости отображения
контента для обоих вариантов шаблона. Проверку я проводил на главной странице
сервера www.mama.ru
Ниже приведены результаты тестирования
Таблица 1. Распределение
времени получения контента
Время [c] |
<1 |
<3 |
>10 |
>20 |
% полного отображения контента
первого экрана за заданное время |
таблицы |
9% |
37% |
35% |
15% |
слои |
45% |
78% |
2.3% |
0% |
Количество просмотров страницы: 13949.
Объем страницы без графики: 38К
Размер экрана 800x600
Дата: 02.12.01
|
Что в данном случае дало применение шаблона на слоях?
Если принять в расчет указанные выше оценки
максимально допустимого времени отклика,
получится, что на сайте удалось удержать
от 15% до 30% пользователей. Замечу также, что выигрыш или потери трафика нужно учитывать не только по одной странице.
Если считать, что 15% пользователей уходит с первой страницы, то вторую не дождутся уже 27% и т.д.
В книге Нильсена "Веб.дизайн. Designing Web Usability"
приводятся также данные, согласно которым,
время отклика <1с - неощутимо, а <3c -
ощутимо, но не вызывает дискомфорта. Отказ
от таблиц, в этом случае, дает выигрыш для 36 и 43% пользователей,
соответственно.
Казалось бы выигрыш очевиден. Почему же использование
этой технологии до сих пор широко не
применяется? Причины две.
Несовместимость броузеров и некоторые
проблемы со слоями у Netscape и Opera,
увеличивают трудоемкость разработки и
отладки шаблонов, а ранние версии
броузеров (MSIE, Netscape версии ниже 4) вообще
не поддерживают слои.
На стадии проектирования сайт, как
правило, просматривается во всех
доступных актуальных броузерах (броузеры
Mac и Unix актуальны, но не всем доступны).
А вот на стадии эксплуатации, это не
всегда бывает возможно. Хорошо, если все
публикуемые материалы готовятся
непосредственно в редакции сайта, оснащенной первоклассным механизмом
поддержки контента (движком) за $1500, а
статьи не содержат сложных элементов
форматирования. А если нет? Слои
капризны, и любой незакрытый парный тег (например
<p> или <i>), при просмотре в Opera, превращает страницу в
гору мусора. Netscape в
таких случаях выдает сообщение о
неустранимой ошибке и выгружается из
системы. Даже MSIE не всегда прощает
подобные ошибки.
Какие из всего этого можно сделать выводы?
Если у вас есть хороший движок и/или
грамотный web-master, проблемы поддержки
сайта не должны вас волновать, и переход на слои,
не создавая особых проблем, даст
заметную прибавку в трафике.
Если движка нет и нет возможности
проверять каждую страницу в 5-6 броузерах,
нужно десять раз подумать, браться за
шаблон со слоями или пренебречь
пользователями MAC, Unix (3-7%).
Если Ваш сайт имеет хорошую
посещаемость, у вас есть время, над вами
не висит начальство со сроками и планами -
делайте два
шаблона. Один - для основной массы
посетителей, другой для Mac и Unix.
Ну и наконец, если контент вашего сайта
верстался годами, и вы никогда ранее не
задумывались о том, что незакрытый парный
тег является криминалом, о переходе на слои
лучше и не думайте.
А. Cавельев Работа & Зарплата
|