Adsense

Adsense is Slowing down Website Speed, issue Solved!

Google’s latest core web vitals update will start affecting search results from June 2021. And if your website’s PageSpeed insight score is too low, then you have to worry about it. But what if your site speed is good, but after adding the Adsense ads code, the site speed gets down? You can’t even optimize the AdSense servers. This article will discuss how to load Adsense ads without affecting the website speed.

Adsense slow down website Speed issue solved.

So you want to make revenue with a good user experience on the website to grow the website. You have to take care of Adsense ads and the speed of the website.

How To Check Website Speed Performance?

There are many free and premium tools available to check the website speed. You may be already aware of Google Page Speed Insights, GTmetrix, Pingdom Tools, etc. But the important question here is, which pages speed should you check?

Most of the bloggers check the speed of their homepage and done, but it’s not done sir, you’ve to check the page speed of all the content available. But It is not possible to check the speed of all posts and pages. The solution of this is, check the

  • Homepage speed,
  • Blog Post Speed,
  • Page Speed.

Suppose you’ve any other pages like product pages or blog posts containing media, iframes, etc. You can perform a speed check for those pages too. You can check the speed of all these pages before and after adding Adsense ads.

How to Load Adsense ads without compromising website speed?

My website speed before applying AdSense was 95+ for mobile and 100 for desktop devices in the PageSpeed Insights tool. But as I added the Adsense ads, it reduced to 30 to 40 for mobile and 80 for desktop. I’m running Blogger blogs as well as WordPress websites. I want a proper solution for both.

When we generate an Adsense ad, it will look like the following.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Large Rectangle -->
<ins class="adsbygoogle"
 style="display:inline-block;width:336px;height:280px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

In the above code, the adsbygoogle.js file starts loading asynchronously with the content without blocking the content from loading. This causes a delay in loading the content, and hence website takes more time to load.

But what we are going to do with this script is, ads will be load after the website is ready to interact with the user. And when the user scroll, click, or after 5 seconds of no input.

First, we’ll remove the adsbygoogle.js from all the ad units of the page, as shown below.

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

All the ad-block should look similar to this. We’ve chosen an ad-block of size 336×280 so that it can be used for mobile and desktop devices.

<!-- Large Rectangle -->
<ins class="adsbygoogle"
style="display:inline-block;width:336px;height:280px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

You can add the following script in the footer section of your website to boost its PageSpeed insight score. But it would be best to avoid auto responsive ads as this will result in a huge cumulative layout shift score. You can also serve responsive Adsense ads using this method.

<script id='flying-scripts' type='text/javascript'>const loadScriptsTimer=setTimeout(loadScripts,5*1000);const userInteractionEvents=["mouseover","keydown","touchstart","touchmove","wheel"];userInteractionEvents.forEach(function(event){window.addEventListener(event,triggerScriptLoader,{passive:!0})});function triggerScriptLoader(){loadScripts();clearTimeout(loadScriptsTimer);userInteractionEvents.forEach(function(event){window.removeEventListener(event,triggerScriptLoader,{passive:!0})})}function loadScripts(){document.querySelectorAll("script,iframe[data-type='lazy']").forEach(function(elem){elem.setAttribute("src",elem.getAttribute("data-src"))})}</script>

Below this script, paste the Adsense ads serving script in the same format as displayed below. We’ve changed src to data-src to load the Adsense ads after the user interaction. Please note that you’ve to remove the following lines all ads block instead of all those. Paste the following

<script data-ad-client='ca-pub-XXXXXXXXXXXXXXXX' data-src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' data-type='lazy'></script>

The WordPress user can add the following code in the footer section using the theme panel. If the theme doesn’t support custom javascript to the footer, then add it manually. For this, you’ve to scroll to appearance>theme>edit theme and then find footer.php. Now paste the above scripts(both) just before </body> tag. To keep these changes even after theme updates, use a child theme. Try creating a child theme for your WordPress website.

Blogger users can edit the Blogger theme and paste the above script into the theme file above the </body> tag. After doing so, you can check the website speed. You can also read our guide to boost Blogger blog speed.

I hope you find this article helpful; in case of any doubt, queries, feedback, feel free to ask in the comment section provided below. Thank You!

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on seoneurons.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Related Articles

2 Comments

  1. I am noticing this script is requiring a double-tap on the first time a link on the page is tapped on mobile devices (tested with iPhone, Safari). Works fine on my desktop testing.

Leave a Reply

Your email address will not be published. Required fields are marked *