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

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

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

Проблема не придуманная и мозги мне прокомпостировала уже не раз пока я сидел на 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

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

• Making the Absolute, Relative

XHTML/CSS, Полезности