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

Похожие сообщения
Chrome AppsGoogle

11 отличных расширений Chrome для студентов

Google Adsense

Google AdSense - Список стран с самой высокой оплатой за клик в 2021 году

Google Adsense

Google AdSense - Рейтинг стран с самой высокой ценой за клик на 2020 год

PageSpeed InsightsWordPress

Как использовать критический CSS для повышения производительности веб-сайта