Google’s latest core web vitals update will start affecting search results. And your website’s PageSpeed insight score too low? Then you have to worry about it. Now you can improve page speed and maintain your SERP or lose it. There may be multiple factors responsible for slow page speed. But in this article, we will discuss how to speed up Google AdSense implemented website.
Google Adsense is a powerful tool for monetizing your website and generating revenue. However, slow page loading speeds can negatively impact your Adsense earnings by causing visitors to leave your site before the ads have a chance to load.
And if your site speed is good, but the site speed decreases after adding the Adsense ads code? You don’t have control over the AdSense server to optimize them. So what is the alternative?
And also, 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 website’s speed.
How To ProperlyCheck Website Speed Performance?
There are many free and premium tools available to check the website speed. You may already know of Google Page Speed Insights, GTmetrix, Pingdom Tools, etc. But the critical question here is, which page speed should you check?
Some users check the speed of the homepage of their website and are done, but it’s not done, dear. You’ve to check the page speed of all the pages and post types available. But sometimes, It is not practically possible to check the speed of all posts and pages. The solution to this is to check the
- Homepage speed,
- Pick a BlogPost for pagespeed insight score test,
- Speed of a random Page of the website.
Suppose you’ve other pages like product pages or custom blog posts containing media, iframes, etc. You can perform a speed check for those pages as well. You can check the speed of all these pages before and after adding Adsense ads.
Speed up Google AdSense for the website.
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 and WordPress websites and want a proper solution.
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 loaded 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 page ad units, as shown below.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
All the ad blocks should look similar to this. We’ve chosen an ad block of size 336×280 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 to your website’s footer section to boost its PageSpeed insight score. But it would be best to avoid auto-responsive ads as this will result in a substantial cumulative layout shift score. You can also serve responsive Adsense ads.
<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, go to appearance>theme>edit theme and then find footer.php. Now paste the above scripts(both) before the
12 published comments, including 3 replies. Threads shown oldest first.
In reply to Greg Hurley
In reply to Ashok Sihmar
In reply to muuhammed