Статьи

Автор: Мациевский Николай aka sunnybear
Опубликована: 5 июня 2008

Принципы «ненавязчивой» рекламы

Сразу хочу оговориться, о чем пойдет речь в данной статье. Я собираюсь изложить свои представления о том, как стоит организовывать размещение рекламы на веб-страницах для того, чтобы доставить посетителям сайтов минимум неудобств. Поскольку, большинство выводов последуют из анализа техник «ненавязчивого» JavaScript, то статья озаглавлена именно таким образом. Я не собираюсь анализировать, в каких случаях пользователи видят банеры лучше, в каких — выше их кликабельность, и когда банеры достигают целевой аудитории. Я просто расскажу о клиентской оптимизации использовании рекламы на сайтах.

Как было продемонстрировано в исследованиях этого и прошлого годов, большая часть задержек при загрузке страницы у обычного пользователя приходится на долю рекламы, подключаемой, в основном, через JavaScript (cредний размер веб-страницы увеличился втрое с 2003 года и цена банерной рекламы для клиентской производительности). Далее я хочу рассмотреть основные типы использования рекламы на сайтах и предложить способы (в большинстве своем опробованные на практике) для разгона ее загрузки.

Почему так?

Вы спросите: зачем нам это? Разве разработчики банерообменных систем, контекстной рекламы и других сложных клиент-серверных приложений не подумали уже за нас о возможных последствиях? Подумали, но можно подумать и дальше. Ведь в том же «Бегуне» работают такие же специалисты, как и в профессиональной веб-студии. Качество продукта высокое (не хочу никоим образом занижать результат многомесячной работы программистов, например, Яндекса), но его всегда можно улучшить. И я просто хочу рассказать как.

Конвертация показов рекламы в клики/покупки напрямую зависит от общего удобства использования сайтом. А оно, в свою очередь, значительно ухудшается при обширном использовании различных рекламных сетей. Именно поэтому клиентская оптимизация вызовов рекламы конвертируется во вполне реальное повышение прибыли компании от своего вебсайта (или же целой их сети). Если вы уже задумывались над тем, почему ваши сайты так медленно грузятся из-за обилия рекламы, или проектировали сеть учета показов-переходов, тогда статья будет вам действительно полезна. Я постараюсь изложить все ключевые моменты, которыми стоит руководствоваться в этих случаях.

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

Контекстная реклама

Контекстная реклама, пожалуй, является одним из главных «тормозов» при загрузке страницы (при прочих равных условиях), ибо активно использует document.write, который «морозит» загрузку до получения всех необходимых вызванных JavaScript-файлов с внешних серверов. Естественным предположением было бы использовать вместо document.write innerHTML

Принцип первый: при проектировании рекламных вызовов используйте innerHTML или script.src (последний подразумевает подключение внешнего JavaScript-файла путем создания соответствующего дополнительного узла в head после загрузки страницы). Идеальным является подход, когда для оценки эффективности рекламы не используется клиентская логика (все показы и переходы отслеживаются по серверным логам).

Если вам не удается избежать вызовов document.write любыми путями помещайте их в самый низ документа. Возможно, стоит рассмотреть вариант, когда после загрузки страницы блок с контекстной рекламой перемещается в необходимое место, а все это время он скрыт где-нибудь в подвале документа и не влияет на скорость загрузки основного содержания.

Принцип второй: вставляйте рекламный код максимально близко к концу страницы

Основными игроками на рынке контекстной рекламы на данный момент являются Яндекс.Директ, Google AdSense и Бегун. Google постпуает наиболее практично: в результате вызова скрипта вставляется iframe, который дальше уже загружает все рекламное объявление. Поскольку исходные файлы рекламных скриптов расположены на одной из самых доступных и быстрых CDN в мире, то скорость отображения таких объявлений на клиенте впечатляет.

С Яндексом ситуация похуже. Мало того, что выполняется document.write содержимого рекламных объявлений в основное DOM-дерево, к тому же, загружается порядка 5 дополнительных файлов в виде узлов текущего документа (в частности, это счетчики и файл стилей). Все это не самым лучшим образом сказывается на быстродействии. Преобразовать в данном случае вызов Яндекс.Директа к виду innerHTML не удалось (если у кого имеется информация, как это сделать, напишите, пожалуйста, в комментариях).

Бегун в этом плане приятно удивил: он предоставляет (слабодокументированное, но все же) API для множественных вставок рекламных объявлений на страницу при помощи innerHTML. Для этого всего лишь нужно выставить в качестве JavaScript-переменных:

begun_multispan=1,begun_spans=[{'span_id':'ad','limit':7,'width':230}]

В данном случае подключается множественный показ рекламных объявлений (begun_multispan=1), далее задается, в каком месте и в каком количестве их показывать. Это происходит через массив begun_spans, где для span_id назначается идентификатор блока, в который будет вставлены объявления после загрузки, limit указывает на их количество в данном блоке, а width просто описывает ширину рекламного блока (в пикселях). Таким образом можно вставить код Бегуна в самый низ страницы и максимально ускорить ее загрузку.

В случае Бегуна на клиент в минимальном варианте загружается всего 2 файла (отвечающий за логику и содержащий сами объявления), что также добавляет чести данной системе контекстных объявлений.

Как вариант можно рассмотреть размещение практически всего кода на собственном сайте, а подгружать только необходимую контекстную составляющую (хотя в правилах рекламных сетей это и запрещается, но других кардинальных способов ускорить загрузку и сжать скрипты, которые (у Бегуна, например) отдаются в обычном виде, я не вижу). И в Яндекс, и в Бегун были направлены пару месяцев назад предложения по сотрудничеству в смысле оптимизации работы их скриптов, но обратной связи не поступило.

TopLine, Pop-Up, Pop-Under и RichMedia

В стандартных рекламных сетях сейчас превалируют три формата показа объявлений на странице: TopLine, Pop-Under и RichMedia. Последние два из весьма дружественны к техникам «ненавязчивого», ибо подключаются только после полной загрузки страницы (хотя лично мне такая реклама кажется слишком раздражающей, чтобы ее использовать на нормальных сайтах). TopLine отличается тем, что должен быть вставлен в самом начале HTML-документа и, таким образом, максимально замедлить его загрузку.

Поскольку TopLine мало чем отличается от стандартных банеров, то посетители будут довольно лояльны к его использованию. Однако, как же нам исправить ситуацию с замедлением загрузки? Так же, как и для контекстной рекламы: переместить вызов document.write в innerHTML (или в appendChild). Что и было успешно проделано. Исходный код здесь не привожу, однако, стандартный код вызова был замечательно заменен DOM-эквивалентом, который вызывался по комбинированному событию window.onload и вставлял в заранее подготовленное место все необходимые элементы.

Принцип третий: используется заранее подготовленные места для рекламных объявлений. Если вы заранее (через стили) назначите размеры тем областям, где будет показана реклама (это несложно сделать, ибо почти всегда известны точные размеры банеров и текстовых блоков), то посетители будут испытывать гораздо меньше дискомфорта при заходе на странице вашего сайта — экран не будет «дергаться» при загрузке, а реклама будет появляться постепенно, заполняя отведенное ей место.

Внутренние рекламные сети

Несколько раз при анализе скорости загрузки страницы я сталкивался с различными банерными сетями и внутренними системами отображения рекламы на сайте. В ряде случаев вставка объявлений выполнялась через iframe (в общем случае, наиболее быстрый способ), иногда через document.write (иногда даже каскадный, когда с помощью одного document.write вставляется скрипт, в котором содержится другой и т.д.), который может достаточно замедлить загрузку страницы, если звеньев в цепочки вставок много или же они расположены на медленных серверах.

Однако, на небольшом проценте сайтов действовал наиболее быстрый подход: логика рекламных показов рассчитывалась на сервере, а на клиент отдавался уже полностью статичный код. Если вы разрабатываете (или собираетесь это сделать) внутреннюю рекламную систему, то оптимальным будет именно такой подход.

Принцип четвертый: создавайте рекламные объявления на сервере. Большая (если не вся) логика может быть вынесена на сервере безо всяких потерь функциональности. Определение страны, языка, браузера, источника перехода — все это можно установить еще до того, как страница будет выдана пользователю. Все, что ему нужно, — это лишь итоговые картинки или мультимедийные файлы. Зачем устраивать сеть распределенных вычислений из пользовательских машин, если все можно сделать на мощном сервере, специально для этого предназначенном?

Идеальная архитектура рекламной сети

Исходя из всего вышесказанного, можно представить построение внутренней сети показа рекламных объявлений примерно в следующем виде:

  1. Создание внутреннего репозитория объявлений. Этот этап присутствует во всех современных банерообменных сетях, ведь нужно как-то категоризировать весь рекламный материал перед назначением его на места показа.
  2. Создание каталога рекламных мест. Этот этап тоже обычно проходится, но не всегда явно. Каждый рекламный блок может быть откручен только в нескольких соответствующих местах (например, у вас есть на странице 3 возможных вариант для вывода банера: 240x240, 240x720 и 120x800). Каждое рекламное место должно быть прикреплено к ряду страниц, на которых оно присутствует.
  3. Логика показа рекламных объявлений. После первых двух шагов необходимо задать правила, согласно которым те или иные объявления будут выводиться на соответствующих страницах. Это также обычно осуществляется, однако, далее этого шага обычно дело не двигается — ведь можно с JavaScript-вызова просто передать все необходимые параметры выделенному скрипту, который сам рассчитает, что отдать клиенту.
  4. Настройка серверной стороны. На самом деле, вместо клиентской логике должен быть разработан серверный модуль, который обеспечит тот же самый функционал, но без дополнительных запросов к серверу, ведь все (или почти все) данные, как я уже упоминал выше, уже у нас есть — так зачем нам дополнительная нагрузка на пользователя?
  5. Настройка статистики. Этот момент является, пожалуй, наиболее ключевым во всей схеме. Ведь при вызове внешнего скрипта мы, фактически, не будем думать о статистике — она собирается автоматически сторонним приложением. Если мы разрабатываем внутреннее решение, то все данные о произведенных показах должны собираться либо самим модулем, который эти показы осуществляет, либо (что более предпочтительно, по моему мнению) собираться на основе логов запросов к рекламным файлам (например, именно таким образом организованы счетчики посещаемости).
  6. Решение коллизий с кешированием. Для высоконагруженных проектов, где вовсю применяется кеширование немаловажным будет задуматься над тем, как разрешить конфликты рекламных показов с занесением страницы в серверный (или даже клиентский) кеш. Для этого нужно будет либо кешировать страницу отдельно по модулям (т.е. рекламный блок вообще не кешировать), либо класть в кеш все возможные варианты страницы, а потом показывать только тот, который удовлетворяет поставленным условиям. В любом случае, это проблема возникает только для проектов с большой посещаемостью (как мне кажется, ее решение, в любом случае, должно прозрачно следовать из архитектуры такого проекта, а не являться дополнительной головной болью для серверных разработчиков).

В общем, совет один — используйте свой сервер по назначению, а не перекладывайте его работу на конечных пользователей.

Заключение

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

Читать дальше

Все комментарии (habrahabr.ru)