Lazy Loading Adsense Setup for WordPress

Lazy Loading Adsense

Lazy loading Adsense setup is provided in this article. By using lazy loading Adsense code in your WordPress website you will able to increase the website speed and opportunity to pass Core Web Vitals.

One common problem publishers often face is that Google AdSense affect our original blog speed. Due to not having control over optimizing resources, we just end up feeling sad.

Like YouTube video thumbnails, they should be using WebP for ad unit images. It’s ironic, that sometimes they do not bother to serve with GZIP compression, or keep resources minified. The massive resources and extra loads of many DNS lookups, kill our page speed like hell.

A few months ago, when I tweeted the Ad unit speed problem, I didn’t get any satisfactory response. I am back to myself with a solution that will prevent AdSense from slowing down the loading of your original content.

Honestly, I am not personally a huge fan of the lazy load even for images. But still, I just want to share a lightweight option. If you like, you may try once if you are highly concerned with serving primary content first, before Ad Units.

You may notice that whenever we put our AdSense ad unit code into the WordPress website, then the speed of the website down significantly and shows a warning in the page speed insights.

There, to solve this issue as shown in the above image you need to use a lazy loading Adsense setup for WordPress. And, by using lazy loading AdSense in your WordPress website, the lazy loading script will significantly improve your score on page speed insights.

Read Also:

• Lazy Loading Images in Blogger
• Rank Math Seo Pro Plugin Free Download
• Best Blogger Template for Adsense Approval

Lazy Loading Adsense Setup for WordPress

Lazy loading Adsense setup for WordPress is

usually, Adsense’s normal ad code is

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>
<!-- Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="12345678901"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Details before starting setup

Technical details: Basically what happens is that it loads in asynchronous form, which means the browser continues downloading the adsbygoogle.js script without blocking the HTML parsing.

But here, in the lazy loading method, I am going to change the ASYNC method to real DEFER. The AdSense script will start downloading in the browser, and only once the window will complete loading the main web page. In this way, visitors don’t have to wait for seeing the whole page quickly for AdSense.

For this purpose, you don’t need to make any big changes to your ad unit. Simply we will alter the style of loading adsbygoogle.js which will do all the magic.

All you need to follow below two steps

Remove the below script from all existing ad units.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Now it will appear like this

<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>

After then, add below JavaScript code in your Theme Footer, possibly just before the body tag. There are three methods to lazy load Adsense as;

• Onload event
• On-scroll event
• Display ad units on user interaction

1. Onload event

Hint: The noptimize tag is present to make it compatible with Autoptimize. It will prevent aggregating AdSense lazy loader inline JS.

<!--noptimize-->
<script type="text/javascript">
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. Above code, you may use via Theme option if available for adding a custom script
2. For Genesis, make use of Genesis Simple Hooks plugin with the option genesis_after
3. or Header and Footer plugin for any other theme.

What does this script exactly do?

This script will ensure that your AdSense Ad unit will start loading and become visible after finishing the complete loading of your main web page. That’s why I named it, Lazy Loading for Google AdSense.

2. On-scroll event

This approach will load the ad unit only when the user scrolls the web page else not.

<script type='text/javascript'>
//<![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.type="text/javascript",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>

3. Display Ad Units on User Interaction

If you want to display advt in a timely manner without compromising on revenue and performance, You can use the “Flying Scripts by WP Speed Matters” plugin for downloading and executing JS based on the user interaction.

The best part, you don’t need to make any changes in your ad code at all.

• Go to plugin settings, include the keyword adsbygoogle
• Then, save settings and purge (clear) the page cache. That’s it.

Performance Result

I have been using this plugin at one of my client’s sites that uses Mediavine ad network (which is being heavier than Adsense Ad units) the core vital passed successfully for Mobile and Desktop both.

Final Verdict

Lazy Loading Adsense Setup for WordPress is provided in this article. There are three methods to use the lazy load Adsense for WordPress. Lazy load AdSense WordPress is a very useful script to pass the Core Web Vitals and improve your website speed.