How To Add AdSense Code To Blogger Without Affecting PageSpeed

If you add Google Adsense ads code to your blogger blogspot blog,

then you must have noticed that it is killing your Pagespeed.

In case you don't get it,

Here is a page that has Google AdSense code added without optimization...

and here is another with Adsense code added the right way!.

Get the gist?.

So, in this post, I am going to show you the exact way to add Adsense code to blogger without affecting Pagespeed.

But before then, let's take about why you need a fast loading ads code.

Advantages of fast loading blogger blogs

If not for these, then I would never border wasting my time on adding Adsense ads code to blogspot blog the right way!

and these reasons are

1. SEO Benefit: Know this now, Fast templates get a search engine ranking boost over slow sites
2. Increase Earnings: If you can increase how fast your content gets displayed to users, then you can double your Google AdSense earnings
3. Better User Experience: Users don't like slow loading sites, so if you can speed up your blog, then you get to improve the user experience.
4. Lower bounce rate: Google introduced AMP pages because of slow loading sites, so if you can boost your speed, be sure of the lower number of users clicking back.

All that said,

Let's talk about the old methods used to add AdSense code to blogger.

Old Method of Adding AdSense Code to Blogger

This works though, it is really an un-optimized way to add Adsense code to Blogger;

This is so because the Adsense code is a javascript file, therefore, it stands the potential of becoming a rendering blocking JS.

In case you used this method, you need to undo it and follow the new method

The old method was basically adding your ads code an async="async" javascript file.

Now, this worked great but still possed a threat which is clearly shown on Google Pagespeed tool.

So what's the best way to add Adsense code to blogger blogspot?

It's called deferring!!.

What is Deferring?

By deferring, it simply means loading an item after every other major item have been loaded.

For example, in a blogger blog, we have text, images, JS, CSS etc.

It makes a lot of sense for Text and CSS to load first since they are the major items needed to be displayed.

While images can then be loaded via Image lazy loading

and finally, Javascript such as Google AdSense code can then be deferred.

Get the concept?

If yes, then let me show you how to defer or add AdSense code to blogspot without affecting page speed.

How to Add Adsense Code to Blogger

• Go to blogger.com >> Theme >> Edit HTML.
• Search for </body> (it's at the bottom)
• Copy and Paste the below code just above </body> and save.

<script type='text/javascript'>
function downloadJSAtOnload() {
var element = document.createElement(&quot;script&quot;);
element.src = &quot;//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&quot;;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(&quot;load&quot;, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(&quot;onload&quot;, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

• If you already have AdSense code on your blog, search for all occurrences of "<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>" both in theme and layout section.

Once found, delete them.

• Whenever you wish to add Adsense banner to your blog, deleted the JS part (<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>) and paste the rest page e.g " "

Get it?

Now, that's how easy it is to place/add Google Adsense ads code on blogger blogspot blog the right way without affecting blog Pagespeed.

That leads us to actually displaying Ads on blogger.

The first step, we added the script which happens to be the reason for slow speed.

For absolute beginners without an idea on how to create Adsense ads code.

Here is how to get it done.

Go to GoogleAdsense login page >> My ads >> Ads units >> New ad unit.

On the new page, choose any ads type of your choice,

I selected Text & display ads.

You can learn about Adsense in-feeds ads in my blog post.

Give it a name, Select the size you prefer. I always choose the responsive size.

When done click "Save & get code".

The ad code will pop up, copy the code and don't forget to delete the script part which is "<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>".

That's all.

Add the code to an HTML widget at the sidebar, inside the theme etc.

What do you think?

So how do you normally add Adsense code to blogger?

Did the new method apart your blog page speed?

Am anxious to hear what you have experienced at the comment section.