One common problem publishers often face is that Google AdSense affects original blog speed. Due to not having control over optimizing resources, many end up sacrificing performance for revenue.
Similar to how YouTube video thumbnails should use WebP, AdSense ad units often come with massive resources, multiple DNS lookups, and extra loads that can kill your page speed. In this guide, we'll explore how to regain control using lazy loading.
Table of Contents
Why is it Important to Lazy Load AdSense Ads?
AdSense scripts can be incredibly slow. They often lack GZIP compression or minification for certain assets, and the "async" nature isn't always enough to prevent blocking the critical rendering path. By implementing a lightweight lazy load solution, you ensure that your primary content serves first, before the Ad Units take over the browser's resources.
How to Setup Lazy Loading for AdSense
A standard AdSense ad unit code looks like this:
<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>
While this loads asynchronously, the browser still starts downloading the adsbygoogle.js script immediately. We want to change this to a "defer-like" behavior where it only loads after the main page is ready.
Step 1: Remove the global script
Remove the following line from all your existing ad units:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Step 2: Use an optimized loading method
Choose one of the following methods to inject the script later.
Method 1: On-Load Event
This method waits for the window to finish loading everything before starting the AdSense download.
window.onload = function() {
var adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
adScript.setAttribute('async', 'true');
document.body.appendChild(adScript);
};
Method 2: On-Scroll Event
This is the most effective way to save initial resources. The ads only load once the user starts interacting with the page.
window.onscroll = function() {
// Add logic to check if script is already added
if (!window.adsense_loaded) {
var adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
adScript.setAttribute('async', 'true');
document.body.appendChild(adScript);
window.adsense_loaded = true;
}
};
Method 3: User Interaction (Best for WP)
If you're on WordPress, tools like "Flying Scripts" can delay execution until there is no user activity. This is a "set it and forget it" solution that handles the keywords for you.
Key Parameters to Monitor
- FCP (First Contentful Paint): Time when the first bit of content is rendered.
- LCP (Largest Contentful Paint): When the largest element is visible.
- TTI (Time to Interactive): When the user can actually use the site.
- CLS (Cumulative Layout Shift): Ensuring ads don't push content down.
Conclusion
Setting up Lazy Load for Google AdSense ad units is a valuable strategy to optimize your website’s performance and enhance the user experience. By following these methods, you can improve your PageSpeed scores and potentially increase your ad revenue by keeping users on your site longer.
Your feedback helps us improve our content for everyone.