Баннерная реклама

admin

Любая баннерная система оказывает влияние на скорость работы сайта. Баннерные системы обычно используют крайне не оптимизированные решения, включая:

Все это может значительно замедлить работу сайта. Но влияния на работу баннерных систем у разработчиков обычно нет (если только не используется что-то собственное). Существует хак, который позволит снизить эффект от медленных баннеров.

Асинхронная загрузка рекламы

Было бы неплохо сначала загрузить для пользователя всю страницу, а только потом отрисовать баннера. Но такая возможность есть далеко не у всех систем открутки. Например, Google Adsense сделал поддержку асинхронной загрузки сравнительно недавно.

Большинство баннерных кодов используют Javascript вызов document.write(). Это делает невозможным прямой запуск такого кода на событии body.onLoad(). Поэтому просто перенести код в асинхронный скрипт не выйдет.

Iframe

Самый просто вариант сделать асинхронную загрузку рекламы – перенести ее в iframe. Содержимое фрейма браузер грузит независимо от основного сайта, поэтому это никак не замедлит его загрузку.

Скрытая загрузка

Если возможности использовать iframe нет, тогда можно воспользоваться хорошим свойством современных браузеров. А именно – загрузка скрытого контента в последнюю очередь. Выводим картинку в скрытом блоке:

Она будет загружена после тех элементов, которые видны. В некоторых браузерах картинка вообще не будет загружена до того момента, пока блок не станет видимым. Как раз то, что нам нужно. Чтобы применить это к рекламе необходимо:

1. Все баннера показывать в скрытом контейнере

Оборачиваем всю рекламу в display:none элемент:

## Такой контейнер нужно использовать для всех баннеров

2. Показываем блоки с рекламой после загрузки контента

Используя jQuery:

## Покажет всю рекламу после загрузки документа

Самое важное

Этот небольшой трюк может снизить зависимость работы сайта от медленной рекламы. Стоит попробовать.

Останні статті

Всегда перед глазами: 15 лучших тем VS Code на 2026 год

Visual Code от Microsoft, вероятно, один из самых популярных редакторов кода. Разработчики любят его за…

22.02.2026

Киберпанк по-японски: 9 лучших аниме в жанре «технологии нас погубят»

Япония сама по себе — сплошной киберпанк. Это заметил даже культовый писатель жанра Уильям Гибсон,…

21.02.2026

Не просто коробка с бантом. Как оригинально подарить гаджет: 5 незатратных способов

Сам по себе телефон Айфон 17 Про Макс – отличный подарок. У него красивая заводская…

12.02.2026

Лучшие криптобиржи для криптозаймов в 2025 году: где лучше брать кредит под крипту?

На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…

09.07.2025

Что такое прокси-сервер: пояснение простыми словами, зачем нужны прокси

Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…

21.11.2024

Что такое PWA приложение? Зачем необходимо прогрессивное веб-приложение

Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…

19.11.2024