So, you know Yahoo!’s Best Practices for Speeding Up Your Web Site by hart and you have already implemented most of the tips on your web site but you are still not satisfied with the performance bottlenecks caused by your banner serving services (OpenX, formerly known as OpenAds and PhpAdsNew in my case) and other stuff you need to use but have no control over it.
Fear no more!
The idea is not actually mine, so I have to give credit to Nivas and the post about how they solved the issue. There solution was to load the banner in a hidden div at the end of the page, and use jQuery’s appendTo() method to move the content to the place the banner is supposed to show. You can read more about their method here.
The problem (and the reason I’m writing this post) is that their method has a dependency on jQuery 1.2 (which is the last official build of the jQuery which doesn’t have problems using this method. Patching jQuery and potentially breaking some other stuff in it wasn’t really an option.
Since I’m dependant on the latest jQuery (1.2.6 at the time of the writing) I had to look for some other solution.
Chris Coyier’s article on How To Fix Video Slowing Down Your Page Load Time gave me an idea. Why don’t I move the banners invocation code to a separate file and try to work around the appendTo() issues.
So, here it goes:
- If you are using OpenX for serving your banners, first you have to get the invocation code for your banner (go for iframe version, worked for me).
- Put the invocation code into a separate file, let’s call it bannerInvocation.html
- Create an empty div with an ID (ID’s need to be unique on the page, but you already knew that) in your HTML that is going to be used as a banner placeholder until we fetch the banner. You can style it, and use a preloader GIF as a background if you like.
- Just before the closing