Integrating Google Adsense Ads takes the PageSpeed Insights Mobile Performance Score from 98 to 85 because of the “Total Blocking Time” – Is there any way to avoid this?

Yes! Thanks for your “Ask David!” question. Reducing the performance impact of Google Adsense ads can be challenging since they often load additional resources and scripts that affect page speed. However, we have found that doing Lazy Loading for ads brings the Mobile Performance Score back in the green, to the upper 90’s, if not 100.

How to Lazy Load Ads

You can lazy load ads by using Intersection Observer to lazy-load ads only when they’re about to enter the viewport. This can improve the initial page load and overall performance scores by only loading ads as users scroll down.

Here’s the code:

Using UltimateWB website builder, copy/paste the following code in the Ad(d)s app, for “Right before end body tag”:

document.addEventListener("DOMContentLoaded", function() {
  const ads = document.querySelectorAll('.adsbygoogle');
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const script = document.createElement('script');
        script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        script.defer = true;
        document.body.appendChild(script);
        script.onload = function() {
          (adsbygoogle = window.adsbygoogle || []).push({});
        };
        observer.unobserve(entry.target);
      }
    });
  });
  ads.forEach(ad => observer.observe(ad));
});

And you can add your Google Adsense code to a new Ad(d) that you create, and then copy/paste the generated Placeholder Text to the List Pages > Add / Edit Page, where you want it:

<div class="adsbygoogle-container">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="[your info]"
         data-ad-slot="[your info]"
         data-ad-format="auto"></ins>
</div>  

By using the Ad(d)s app, you can use the same Placeholder Text for the Google Adsense ad to easily place multiple ads on various sections of your website.

Additional Tips

Optimize Ad Placement and Density: Reducing the number of ad slots per page or moving them further down can improve the initial load time and boost the page’s performance score.

We haven’t found this necessary, but some have suggested:

Limit Ad Formats and Styles: Certain ad formats, like rich media or video, tend to load more resources and impact performance more than static or simpler formats. Using lighter ad formats or setting ad slots to fixed sizes (instead of data-ad-format="auto") may reduce resource load.

Having PageSpeed Insights scores in the green can help with your website SEO and search engine ranking, so it is well worth it implementing this trick when you want to integrate ads. It doesn’t have to be one or the other :-)

Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.

Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.