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.
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.
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.
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.
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
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>
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
<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
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.