Ads & Lazy Load

Здравствуй, %username%!
Сегодня я расскажу тебе, как можно ускорить загрузку страничек сайта без особых затрат времени и покажу методику на собственном примере. Есть проект, над которым я работаю уже больше 4-х лет. В последнее время у начальства часто возникали вопросы по поводу производительности сайта, и среди них недовольство скоростью загрузки страниц на стороне клиента. С помощью одного из последних достижений мне удалось ускорить загрузку страницы на 2 секунды.
Все мы знаем различные методы оптимизации и ускорения работы сайта, к примеру: сжатие данных, использование спрайтов, использование инструментов для проверки качества оптимизации вроде Page Speed от Google, использование ajax для подгрузки отдельных блоков после события window.load(), а так же применение ленивой (отложенной) загрузки картинок. Но что действительно сильно тормозит загрузку — так это различные ads. В моем случае это были 5 Google AdSense и 2 Chitika. Они тормозят рендеринг страницы, пока подгружаются JS-модули.

Первое решение, которое с ходу пришло мне в голову (и оно довольно распространено в сети) — сделать вывод всех ad скриптов в конце страницы, а потом, при помощи javascript'а перенести ads на свои места. Однако, после реализации и долгого тестирования нашим QA персоналом выяснилось, что данное решение является неудачным из-за неккоректной работы в браузере FireFox версии 3.5 и выше: при переносе скрипта он запускался повторно, и страница после отработки функции document.write() по неизвестной причине становилась абсолютно пустой. На следующий день, после деплоймента из-за проблем пришлось делать откат, и о данной задаче забыли на некоторое время из-за наличия других более важных задач.

Со временем проблему со скоростью загрузки снова поставили в приоритет. Тут я задумался о lazy load, и есть ли готовые решения для Lazy Load Ad. При запросе в гугл lazy load ads первой страницой выпал замечательный скрипт jquery.lazyload-ad c французкого сайта http://jqueryad.web2ajax.fr/. Хоть у многих Demo страница на этом сайте не все блоки с рекламой отображает, на практике же все работает отлично.

Пользоваться данным скриптом проще простого:
<div class="adsense lazy-ad" original="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 <code type="text/javascript"><!--
 google_ad_client = "[client-key]";
 google_ad_slot = "[slot id]";
 google_ad_width = 300;
 google_ad_height = 250;
 //-->
 </code>
</div>


В атрибут original указывается путь к JS скрипту ad'а, в теге code обычно параметры и другой стрипт необходимый для отображения.

В document.ready вызываем:
$("div.lazy-ad").lazyLoadAd();


После чего скрипт динамически подгружает js file из атрибута дива original и выполняет код на нужном нам месте. Естественно, все работает в стили Lazy Load.


0 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.