Optimizing My Flickr Badge (Ads, Too)
The Flickr badge at the top of my blog was hanging up the entire page, i.e. nothing rendered until Flickr's Javascript came back and ran (which sometimes took a couple seconds). To remedy the situation, I replaced the badge with an empty div:
<div id="badge"></div>Next I loaded the actual badge into a hidden div at the bottom of my page and fired some Javascript to copy the contents into the empty div at the top of the page:
<div id="hiddenBadge"
style="visibility: hidden">
<!-- Flickr badge goes here -->
</div>
<script language="javascript">
document.getElementById(
"badge").innerHTML =
document.getElementById(
"hiddenBadge").innerHTML;
</script>
Works like a charm!
Update: Todd Huss pointed out this can work for ads, too (such as AdSense).
4 Comments:
This is a great tip! My company uses a hosted ad serving company, however, in the rare cases that they have latency issues it affects the load time of our pages to the point of almost making the site unusable. I'm going to look into this technique and see if it will work for serving ads as well!
Absolutely. Hope you're using AdSense. :)
We use a combination of Adsense for contextual ads and another ad serving software suite for ad space that the advertising dept sells on our site. Your technique should work for both though and I'm thrilled you pointed it out since we've had a few minor outages during peak hours that have forced us to turn off ads for the duration of the outage to keep our site usable. With your proposed solution this should no longer be a problem for us!
This comment has been removed by a blog administrator.
Post a Comment
<< Home