Базы данныхИнтернетКомпьютерыОперационные системыПрограммированиеСетиСвязьРазное
Поиск по сайту:
Подпишись на рассылку:

Назад в раздел

Слои в борьбе за скорость

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



  • Главная
  • Новости
  • Новинки
  • Скрипты
  • Форум
  • Ссылки
  • О сайте




  • Emanual.ru – это сайт, посвящённый всем значимым событиям в IT-индустрии: новейшие разработки, уникальные методы и горячие новости! Тонны информации, полезной как для обычных пользователей, так и для самых продвинутых программистов! Интересные обсуждения на актуальные темы и огромная аудитория, которая может быть интересна широкому кругу рекламодателей. У нас вы узнаете всё о компьютерах, базах данных, операционных системах, сетях, инфраструктурах, связях и программированию на популярных языках!
     Copyright © 2001-2020
    Реклама на сайте