One effort shared by both browsers and developers is making the web browsing experience faster.  There are many common-known ways to keep your websites fast:  using CSS sprites and image optimization, using .htaccess to set file headers for longer caching, javascript file compression, using CDNs, and so on.  I’ve even detailed some of the website optimization efforts used on this website.  Firefox introduces a new strategy for website optimization:  link prefetching.

What is link prefetching?  From the MDC:

One of my most popular posts has been Using MooTools 1.2 for Drag, Drop, Sort, Save. My post detailed how you can create a drag’n'drop, AJAX-ified system to allow the user to drag and drop elements and quickly save them with PHP and MySQL on the server side. I’ve chosen to update the post with a faster, more efficient set of MooTools and PHP code. I’ve also provided a jQuery equivalent. Enjoy!

The MySQL Table

A few days back I was perusing the ESPN.com source code when I found the following snippet of code:

<script>
	ESPN_refresh=window.setTimeout(function(){window.location.href=window.location.href},900000);
</script>
<noscript>
	<meta http-equiv="refresh" content="900" />
</noscript>

I understand what the code was supposed to do but was confused as to why they’d use JavaScript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

CSS sprites are all the rage these days. And why shouldn’t be? They’re easy to implement, have great upside, and usually take little effort to create. Dave Shea wrote an epic CSS sprites navigation post titled CSS Sprites2 – It’s JavaScript Time. In his post he outlined a method for enhancing the CSS sprite menu with jQuery. I loved his post so much that I converted his jQuery CSS sprites menu to MooTools.

The Sprite Image

This is a great example of an efficient, useful sprite image.

One of the biggest goals with my website redesign was to update something no one sees — website speed. Sure I’m using different colors, fonts, JavaScript techniques, and images but I’m most proud of the the speed increases I made. Let me explain the ways I’ve improved my website performance — maybe you can learn something from what I implemented.

Image Optimization – PNG Crush

Unlike varying content pages, Images are a fixed download size so I sought out to optimize image sizes. I used PNGCrush to compress images without loss of image quality. Using PNGCrush I was able to knock off 120KB of useless image space.