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авельев Работа & Зарплата
  
 |