«
»
GoogleGoogle AdsensePageSpeed Insights

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

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

После этого добавьте ниже код 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? - Гульшан Кумар

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

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

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

Источник записи: https://www.gulshankumar.net

Связанные записи
PageSpeed InsightsWordPressПанели управления

Как повысить производительность WordPress - советы от Plesk

Google AdsenseWordPressПлагины

5 лучших плагинов WordPress для защиты от ADBlock блокировщика рекламы

GoogleGoogle Chrome

Google Chrome - Что нового в DevTools (Chrome 84)

GoogleGoogle AdsensePageSpeed Insights

6 способов повысить скорость загрузки страниц сайта AdSense »WebNots