Маленькая хитрость с баннером

29 Jul, 2005

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

Проблема не придуманная и мозги мне прокомпостировала уже не раз пока я сидел на dialup. Может это только у меня такой провайдер? :(

Проблема

Вы переходите на какой-либо сайт. Но если сайт более или менее посещаемый - присутствует баннер. И если хозяин хочет много денег :) то баннер этот в самом верху страницы. И вот картина - грузится баннер (очень красивый) и доооооолго грузится (баннерокрутилка слабая например). А ты сидишь и на него "втыкаешь". Потому что пока он не загрузится - не появится контент-или-картинки-или-почта за которой вы пришли... :(

Решение

Решение чрезвычайно простое - хотя подходит не для всех случаев. Проблема эта возникает из-за того что баннер находится в коде в самом верху страницы - потому и грузИться начинает первым.

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

По крайней мере сначала, юзер будет смотреть на загружающийся контент, а не на тормозящий баннер.

Технически

Элементарный HTML+CSS даёт нам нужный результат. HTML:(с баннером в конце)
  1. <div id="page">
  2. <div id="content">
  3. a lot of content goes here
  4. </div>
  6. <div id="banner">
  7. </div>
  8. </div>
CSS:(исправляющий положение)
  1. #page{
  2. position:relative;
  3. padding-top:80px; /*Высота баннера, пускай 770х80*/
  4. }
  5. #banner{
  6. position:absolute;
  7. top:0;
  8. }
Вот и все. Теперь баннер будет визульно вверху - но грузиться будет последним. Такую фичу я сделал на укр.нет. Их топ-баннер в коде находится самым последним - и можно попасть в свой почтовый ящик до его загрузки.

Конец

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

К тому же иногда выигрыш бывает просто огромным. Вот взять к примеру pravda.com.ua.
В шаблоне отображения новости 3(!!!) баннера и 2-3 килобайта нужного юзеру контента. Конечно такое кол-во баннеров - неправильно, но не нам судить. А представьте юзер бы ждал 2 баннера для чтения 10 строк новости? Там я тоже применил эту маленькую хитрость.

Вот такой вот tip. Был бы рад услышать чьё-нибудь мнение.

Для тех кто не знает что такое absolute

Хорошая статья Дага Баумана:

14 комментариев к “Маленькая хитрость с баннером”

1.Zy | 01 Aug, 2005
ты зашарил:)
2.bsn | 01 Aug, 2005
класс. спасибо. будем юзать :)
3.ganges | 02 Aug, 2005
Большой минус К хорошему БЫСТРО привыкаешь. Source Order всегда важен Когда научишься (хотя правильно писать "заточишься") в абсолютном позиционировании потом трудно с этого спрыгнуть. :) Надеюсь это полезный коммент :))
4.msd | 07 Aug, 2005
Очевидная фича, которую должен юзать любой кодер даже если его аудитория исключительно на лане сидит - мы ведь не баннеры рассматривать приходим! Сколько еще нужно таких текстов по сетке, чтобы это правило вошло в этику кода?
5.msd | 07 Aug, 2005
Кстати, вот еще одна фича для бедняг на бесплатных хостингах... В начале кода пишем див с z-index=999 белый, 100% всего. На нем ваяем все остальное, что планировали. Зачем подложка? Закрыть уродливые баннеры хостеров. Работает пока везде...
6.akella | 08 Aug, 2005
1) Фичу эту юзать конечно стоит только с согласия хозяина сайта - не все ставят во главу угла юзеров... 2) Ну если хостер смотрит по загрузке какой-то картинки - то поможет - но иногда делают по другому. И хотя прием нормальный - если уж ты так заботишься о внешнем виде проще сменить хостинг. В любом случае спасибо за sharing tip'а :)
7.SilverMaser | 09 Aug, 2005
Отличная идея, единственная проблема, если это будет реклама которая приносит вам денег, то это будут финансовые потери
8.akella | 09 Aug, 2005
Насколько я уже успел понять - те кто действительно зарабатывает на рекламе(укрнет правда...) - приоритет ставят прежде всего на пользователей и их удовлетворение. Это мой скромный опыт. Потери конечно будут но они зависят от каждого сайта отдельно. Исходя из моего опыта - небольшие. А у нас баннерный бизнес в той стадии когда платят в основном не за показы а за неделю "висения"... :) В любом случае доречне зауваження! 10x.
9.Vladson | 13 Aug, 2005
О каких потерях вы говорите, CTR у баннеров настолько низок что люди которые хотят на этом заработать обманывают сами себя (а в некоторых случаях ещё и "унижаются" перед клиентами) Лучший способ заработок рекламмы это текстовые ссылки, они и приносят прибыль и не мешают клиентам
10.akella | 21 Aug, 2005
Просто у баннеров своя ниша - раскрутка брэндов как правило - текстом ты запоминания брэнда не добьешься... Я думаю что хотя ЦТР для баннеров низкий - но не зря иногда платят за их показы, а не клики...
11.Vladson | 21 Aug, 2005
Иногда, но далеко не всегда (я даже сказал бы редко) для раскрутки гараздо выгоднее прямые ссылки - повышается тИЦ рекламируемого сайта - не мешает посетителям рекламирующего сайта (не раздражает) - почти никто не режит их (всякими Adblock-ами и Outpost-ами).. Хотя согласен, для "навязывания" брэнда 468х60 это именно то что доктор прописал...
12.cssing :: Архив :: cssing 2005 | 27 Dec, 2005
[...] и любимый) редизайн очень посещаемого украинского новостного ресурса - Украинская Правда Маленькая хитрость с баннером - очень простая “хитрость”, как улучшить user experienc [...]
13.wil | 14 Apr, 2006
"повышается тИЦ рекламируемого сайта" - при ссылки на картинке тоже повышается. особенно если alt не забыть.
14.vonica | 11 Sep, 2008
Да, я тоже такое использую, но не только в баннерах, я предпочитаю всю шапку, и навигацию вниз загнать, так и поисковикам приятнее индексировать (подобие СЕО), html начинается body h1 p, а все остальное уже в самом низу стоит.