Every blogger on this earth would like to earn some money out of their blog. So, they post ads or promote affiliate products. Coming to ads side, one has many options. There are so many ad networks available on internet to choose from. To earn anything from the ads on your blog, you must have decent traffic which in turn requires good ranking on search engines like Google.
Every blog must fulfill certain criteria to rank top on Google. One among which is pagespeed. The ads you serve may slow down your page speed eventually it affects your search rankings badly because, ad networks use javascripts to serve ads on publisher pages which is why you have to load ads asynchronously or after the document is completed loading.
I presume you know the basic things about render blocking, asynchronous script loading etc. If you don't know much about those things this guide could help.
Also see: How to increase Page load speed of Blogger Blog
If you're running Adsense, BuySell ads, Chitika you need not worry about page speed. As they have adopted asynchronous script loading techniques which doesn't hinder page loading. Adnetworks like Adversal don't provide asynchronous ad codes which on use would slow down your page terribly.
So, in this post I'm going to share tips for Blogger users to load ad codes which are not asynchronous in a manner that won't slow down your page. Also, this post is only apt for banner ads.
How to find if any ad increases page load time
Any ad code when it loads, that blocks the loading of on page content is considered to be render blocking elements. Those kind of codes can easily be found using page speed testing tools like Webpagestest & Pingdom. Still clueless? read the guide mentioned above.
Instructions to load ads on document complete
Search engines calculate page load time by considering how long it takes to fully load the on page content (texts & images). So, if we find a way to serve ads after the complete loading of on page content, we will get the following benefits.
- Bounce rate will be reduced as users don't have to wait until ads load.
- As a result of point #1, page speed will be improved.
- As a result of point #2, your rankings will improve.
- Top ranking pages will generate more traffic.
- More traffic = More bucks in your pocket.
This trick can be broken down into following three steps.
- Creating pages for ad codes & parsing the codes
- Including customized JS in the blogger template
- Including div elements to load ads
Creating pages for ad codes & parsing the codes
How we are going to derive the result what we intend? It's simple. We are going to load the ads through iframes. Iframes are HTML tags by which we can load a webpage inside a webpage. You may be a novice blogger, so you just do what I mention further.
Those iframes must be on the same domain where the ads are loaded. For instance let us take the following adcode.
<script src="http://go.adversal.com/ttj?id=2986687&size=300x250&promo_sizes=250x250,200x200,180x150"></script>
First you must parse the HTML ad code. Use this link to do the same.
After parsing the code it will look like the following code, here the example ad code given above has been parsed.
<script src="http://go.adversal.com/ttj?id=2986687&size=300x250&promo_sizes=250x250,200x200,180x150"></script>
This code will be replaced by a 300 X 250 ad banner on load. Indeed, it blocks on page content. In this trick, it is loaded as an iframe. So, you have to create pages on your blog domain exclusively to load ads. Go to Pages on your blogger dashboard and click on new page enter a title like 'rectangle' or 'skyscrapper' and then publish. Note the url of the page. Let us take the following url as example
http://www.syncwithtech.org/p/rectad.html
Including customized JS & codes in the blogger template.
The first thing you must do is including the parsed ad code & page URL in your blogger template. Just post the following code above <b:skin> after replacing the URL & adcode with yours
<b:if cond='data:blog.url == "http://www.syncwithtech.org/p/rectad.html"'>
<script src="http://go.adversal.com/ttj?id=2986687&size=300x250&promo_sizes=250x250,200x200,180x150"></script>
</b:if>
We are half done. Now, you must include the javascript code in your template which loads the iframe containing your adcode on load. This code was taken from go4expert blog.
Paste the above code above </body>. You can modify three parameters in the above code. They are width, height & src. Change those attributes according to your needs. If you need to place more than one ad by this method add two variables for every single ad unit. For example if you want to display 3 different ad units on the page, you will need 6 variables (c1, adauth1, c2, adauth2, c3, adauth3).
So, for two ad units the code will be,
Here also replace the URL & ad dimensions accordingly. Pages dedicated for ads when loading, request the CSS rules & HTML code like regular item pages. We must prevent it from loading. Paste the below code above <b:skin> tag & below <body> tag.
<b:if cond='data:blog.url != "http://www.syncwithtech.org/p/rectad.html"'>
Separate if conditions must be added for distinct URLs. If you create 2 different URLs for 2 distinct ad units, there will be two if condition statements. The if tag must be properly closed. So, paste the below closing tag above </head> tag & above </body> tag.
</b:if>
The number of if conditions & closing tags must be equal.
Including div elements to load ads.
It is the last step you must do. Add the following code wherever you want to display ad.
<div id="AdAuth1"></div>
<div id="AdAuth2"></div> //if you had added more than one ad unit
Here, you cannot use the same div tag in two different places. Every ad unit must have its own div tag. Create variables accordingly to display more ad units.
I hope this guide helped you to improve page speed. Do you have any queries? Please don't hesitate to leave a comment.
