Как настроить отложенную загрузку для рекламных блоков Google AdSense?
Google AdSense – это программа монетизации, проводимая Google. Для многих издателей это по-прежнему самый надежный способ заработка в Интернете. Издатели часто сталкиваются с одной распространенной проблемой: Google AdSense влияет на скорость работы вашего блога. Из-за того, что мы не можем контролировать оптимизацию ресурсов, нам становится грустно. Как и видео YouTube, они должны использовать WebP для изображений рекламных блоков. Парадоксально, что иногда они не заботятся даже о сжатии GZIP или сохранении минимизированных ресурсов. Огромные ресурсы и дополнительная нагрузка на множество DNS-запросов убивают скорость страницы просто “адово”.
Несколько месяцев назад, когда я написал в Твиттере о проблеме со скоростью рекламного блока, я не получил удовлетворительного ответа. Я вернулся с решением, которое предотвратит замедление AdSense загрузки вашего исходного содержания.
Честно говоря, я лично не большой поклонник ленивой загрузки даже изображений. Но все же я просто хочу поделиться одним из вариантов. Если хотите, вы можете попробовать один раз, если вы очень заинтересованы в первую очередь в обслуживании основного контента, а не рекламных блоков.
Честно говоря, я лично не большой поклонник ленивой загрузки даже изображений. Но все же я просто хочу поделиться одним из вариантов. Если хотите, вы можете попробовать один раз, если вы очень заинтересованы в первую очередь в обслуживании основного контента, а не рекламных блоков.
Инструкция по настройке отложенной загрузки (Lazy Load) для AdSense
Естественно, так выглядит оригинальный код рекламного блока.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Технические детали: в основном то, что происходит при загрузке в асинхронной форме, означает, что браузер продолжает загружать скрипт adsbygoogle.js, не блокируя синтаксический анализ HTML.
Но здесь, в методе ленивой загрузки, я собираюсь заменить метод ASYNC на настоящий DEFER. Скрипт AdSense начнет загрузку в браузере только после того, как окно завершит загрузку главной веб-страницы. Таким образом, посетителю не нужно ждать, чтобы быстро просмотреть всю страницу AdSense.
Для этого не нужно делать больших изменений в рекламном блоке. Просто мы изменим стиль загрузки adsbygoogle.js, что сделает всю магию.
Все, что вам нужно, чтобы выполнить следующие два шага
Прежде всего, удалите приведенный ниже сценарий из всех существующих рекламных блоков.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Теперь это будет выглядеть так
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>После этого добавьте ниже код jаvascript в нижний колонтитул темы, возможно, непосредственно перед тегом body.
Метод 1. событие onload
Подсказка: тег Noptimize присутствует для обеспечения совместимости с Autoptimize. Это предотвратит агрегирование встроенного JS ленивого загрузчика AdSense.
<!--noptimize-->
<script >
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->Этот скрипт гарантирует, что ваш рекламный блок AdSense начнет загружаться и станет видимым после завершения полной загрузки вашей веб-страницы.
Метод 2. Событие onscroll
При таком подходе рекламный блок загружается, когда пользователь прокручивает вашу веб-страницу.
<script >
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.,e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>Источник
Ещё один вариант.
В
<head><link as='script' href='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' rel='preload'/>Перед
</body><script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";d.setAttribute("data-ad-client","ca-pub-xxxxxxxxxxxxxxxxx"),document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Последний вариант только что поставил на один сайт, показатель по гуглспид увеличился всего на 7-10 баллов, но при тестировании всё так же и ругается на данные, загружаемые рекламой гугла. Но зато реклама загружается по мере загрузки контента на странице.
Источник
Похожие статьи:
Комментарии: