You probably know that having a faster site loading speed is crucial for ensuring better UX and search engine ranking. And when it comes to boosting page speed, using lazy load for images works great.
It is a technology that prevents objects from getting loaded on a website before they appear on the visitor’s site. This way, it keeps the loading time minimum and improves its performance.
But, do you know that you can lazy load ads on your WordPress site? If your answer is no, then this guide can be a great help for you. Here, I’ll share how to lazy load ads on your WordPress site and how it improves your page performance.
So, to learn more about it, stay tuned with this comprehensive guide.
Why Should You Defer Ad Loading Processes?
Compared to images, JavaScript-based ads like AdSense load a simple file as well as call an external domain. This process includes loading multiple files, performing some checks and tracking, and loading more or less large visible ad content. And for each single ad position, this process is repeated, which multiplies the site loading time.
Here, lazy loading can help your page speed optimization, save visitors bandwidth, and improve the UX of your site.
The lazy load option of advanced ads is kind of similar to deferring images. The main difference is, it is available for any content or script, not just for pictures and videos. If you enable the Lazy Load option, your ads will be loaded initially, where they should appear, not before, when the user scrolls.
As you can see in the image, the average loading time of the page was 732ms. When they enabled lazy load for the ads, the loading time dropped to 523ms. By just deferring a single ad, this saves around 200ms, which is more than 25%.
Apart from the positive impact on the load time, enabling lazy load for ads also helps increase the blocks’ active view rates. This can result in higher revenue when you run active view campaigns.
How to Lazy Load Ads on Your WordPress Site?
The purpose of deferred loading of ads is to load the content or scripts when the user scrolls to the position where the ads are visible. Here’s how to lazy load ads on your WordPress site.
First, you need to install and activate Advanced Ads — Ad Manager & AdSense and enable the “Active Lazy Load module” from the pro tab in the settings of this plugin. Then set the no of pixels for the ads before they are visible on the screen.
Once enabling the lazy load module, you can define when the ads should begin to load, activate the function for the placements you want to defer loading ads.
How to Set Up Lazy Load For Google AdSense Ad Units Without Plugin?
Well, you may find the JavaScript root a bit tougher to implement code. In that case, if you’re confused, simply leave it to an expert to do that for you.
So, here are the methods that you should follow to implement JavaScript.
This is how your aite’s original as unit code will look like-
<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>
Here, in the lazy loading process, what I’ll change is the ASYNC method to real DEFER. Thus, the AdSense script will start downloading in browsers only when the window will load the entire main web page. This way, visitors don’t have to wait to see the entire page for the AdSense quickly.
For this, you just need to alter the style of loading adsbygoogle.js and that’s it.
So, first, you need to remove the following code from all your existing ad units.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
So, here are the two different methods to do this process.
Onload Event
Add the following JavaScript code in the theme footer, just before the body tag. The noptimize tag is to make it compatible with the Autoptimize and to prevent aggregate AdSense lazy load 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-->
Onscroll Event
This method is for loading ad units once users scroll your web page.
<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>
Conclusion
It’s no secret that if you activate lazy load for ads, this delay can be helpful to optimize your page speed and positively impact the Activate View rates. Since the loading speed is objectively measurable, search engines also consider the site for ranking top.
That means if your site’s loading speed is ruined by adding ads, this lazy load WordPress plugin can be an easy and effective solution for your speed issue.
I’ve shared how to lazy load ads on your WordPress site in this guide in detail. Hopefully, this helps you to improve the performance of your site. If you liked this guide, you could share your thoughts with me in the comment section below.
Also, you can Contact Us for any sort of queries about WP speed up or for any suggestions.
