Как настроить отложенную загрузку для рекламных блоков Google AdSense? | Chrome World по-русски

Как настроить отложенную загрузку для рекламных блоков Google 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>

После этого добавьте ниже код JavaScript в нижний колонтитул темы, возможно, непосредственно перед тегом 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-->
  1. Выше кода вы можете использовать опцию с помощью темы, если она доступна для добавления пользовательского скрипта.
  2. Для Genesis используйте плагин Genesis Simple Hooks с опциейgenesis_after
  3. или плагин Header and Footer для любой другой темы.

Как настроить отложенную загрузку для рекламных блоков Google AdSense?

Как настроить отложенную загрузку для рекламных блоков Google AdSense?

Что именно делает этот скрипт?

Этот скрипт гарантирует, что ваш рекламный блок 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>

Я надеюсь, что это поможет вам повысить производительность вашего сайта.