Load your advertisements after your content

Daniel Pataki — Sun, 05 Apr 2009 22:55:05 +0000

I didn’t have much use for loading ads after my content, since on most of my sites and those I worked on, they were near the end of the code anyway, but while working on a site today I ran into a problem. There is an ad at the top of the design which tends to load slowly. I have specific requirements that the site should be as fast as possible, so I had to devise a way of loading the ad last. I went through some methods I found online after things off the top of my head didn’t work, but none helped, so I came up with my own code for it.

I am not taking credit for this, so if you did this before me feel free to let us know, but I did arrive at it on my own. The methods you could try is the “defer” attribute, which defers loading to the end of the page load, however, this had no effect at all. You can also try a “window.onload”, but this didn’t help either. With any other function combinations the ad either loaded as usual or did some weird stuff.

In the end, I decided to load the ad at the bottom of the page, right before the “” tag, and then use javascript to “transfer” the contents to where I need it do be, while keeping the source hidden. This is achieved using the “document.getElementById” method, read on to take a look at a specific example.

So what we need to do is create a div at the bottom of our page, load the advertisement there, and transfer it to the place we want it to be. I will be using inline CSS and inline javascript, which should not be done in real “life”, the best practice is to have all your CSS in external stylsheets and you javascript called from files in the header (where possible). The bottom of our page would look like this:

So what is going on here? We have two divs, the first is “top_ad_loader”, which you can see right here. This div is hidden, but contains the ad code. When the code is being read, the javascript might take a while to load, but we’re right at the bottom, so all our content is displayed already. There is also another div, “top_ad”, which can not be seen here, it is somewhere way above this part of our code, somewhere near the “” tag.

There is javascript code right beneath the ad loader, the purpose of which is to transfer the loaded contents of the ad loader to te place where we want it to be. We “grab” the contents inside the ad loader using “document.getElementById(“top_ad_loader”).innerHTML“, and we want the contents of the actual ad block to equal this.

Once the page load gets to the ad it will slowly load it, when finished, parsing will continue, and our javascript will transfer the contents to the top.

If you have a page that loads a bit slowly, perhaps this method would be worth a try? Contents usually load faster than javascript, so if you place the javascript load last your content will load in 1-2 seconds (maybe much less), making the javascript load 1-2 seconds later. However, if a javascript at the beginning loads in 5 seconds, you need to wait that out just to start loading the content.

If you’d like to read some similar articles, take a look at Scriptastique, a blog all about web development and coding, with great tips on CSS, HTML, PHP, MySQL and Javascript and tutorials and screencasts coming soon! You can follow us on our RSS feed, or Twitter where we’re posting 3-4 short tips daily now!

Why I disabled Google Analytics and WP-Cache

Martin Brinkmann — Wed, 08 Aug 2007 20:32:04 +0000

I was planing to run some benchmarks on my website with various settings to find a result that would reduce loading time for my website for every visitor. I had one script and one plugin in mind that I wanted to test. The first one was the Google Analytics script which I used to be able to access site statistics on the Google Analytics website while the second was the wp-cache plugin for WordPress which cached database requests but required that gz compression was disabled which resulted in a larger html file that was transferred to each visitor.

I used the free Web Page Analyzer script to test four settings and compare the results that were shown on the website. I did test the following settings:

WP-Cache enabled, Google Analytics off
WP-Cache enabled, Google Analytics on
WP-Cache off, Google Analytics on
WP-Cache off, Google Analytics off

Let me give you a few instructions about the images below:

Object Type refers to all files that belong to a certain type such as HTML or CSS files.
Size is the total size of all files that belong to a certain type.
Download T1 the total loading time for a T1 connection (1.54 Mbps) in seconds.

WP-Cache enabled, Google Analytics off:

WP-Cache enabled, Google Analytics on:

WP-Cache disabled, Google Analytics on:

WP-Cache disabled, Google Analytics off:

The results are quite obvious. Loading time is reduced quite a bit when I turn off WP-Cache and Google Analytics. The total loading time for a T1 connection is 1.86 seconds while it is 2.25 seconds if both options are turned on.

Users with slower connections will see a hugh decrease in total loading time in seconds which is absolutely what I wanted to achieve. There are however two aspects that I have to consider.

Turning off wp-cache reduces the loading time but increases the load on the server because mysql requests are not cached anymore. This could lead to troubles for sites that face lots of visitors, e.g. if your site makes it on the digg frontpage. I would suggest to turn on wp-cache again if that happens to be able to handle the load.

Turning of Google Analytics does not have any negative impact on your site but webmasters with no other statistics script have the problem that they do not have access to their statistics anymore. I’m using awstats instead of Google Analytics on my server. If you are unsure contact your webhost and ask which script they are offering.

gHacks Technology News | Latest Tech News, Software And Tutorials » loading time

Load your advertisements after your content

Why I disabled Google Analytics and WP-Cache