Design Tips: Website Speed Optimization for Dummies
… and by dummies, I mean me.
Jeff Atwood at Coding Horror has been doing a series on website speed optimization hacks after one of his posts when viral (to a ridiculous level) last week. Daniel at DailyBloggingTips is starting up a “speed up your site” series today with even more tips. Needless to say I’m feeling the peer pressure to fix some of my site speed problems.
If a website takes longer than 1-2 seconds to load then most people give up on it, so doing what you can to make your site faster (and your readers happier) is in your best interest.
Quick Tips for Maximum Gain
With all apologies to Jeff and his commenters since I blatantly stole all of the ideas from them.
- Use an external RSS feed service like Feedburner.com.
- RSS usually accounts for 50-60% of bandwidth.
- Use an external image hosting service like Amazon S3
- Make sure your blog content comes before your sidebars in your theme.
- Use the correct file format for the kind of image you are displaying.
Using online tools to test your web site speed and find problems
One of the axioms of programming is “don’t optimize before profiling” and these online tools will let you find out where your problem areas are.
Several commenters on both blogs mentioned Website Optimizer.
Website Optimizer gives you an EXCELLENT breakdown of what issues you have and where you should spend time fixing. It clearly pointed out a really boneheaded design decisions I’d made — my Featured Posts thumbnails are all in PNG and coming in at around 17kb each… working out to being 50% of my total bandwidth for every page served.
… and they’re on every page.
Which image file format should I use?
- If it is a photograph then use JPG.
- High color depth and few areas with solid colours.
- If it is a diagram or screenshot then use PNG.
- Large blocks of solid colour and distinct edges.
- If it is a very small image or uses transparency then use GIF.
- IE6 doesn’t support PNG transparency.
Always optimize PNG files with PNGOUT. PNGOUT has command line and Windows GUI versions, as well as a plug-in for the very popular freeware image conversion utility Irfanview. Brief tests I performed shows that PNGOUT does a better optimization job than Adobe ImageReady.
A few other freeware PNG optimization tools were mentioned in Jeff’s comments: PNGOptimizer, PNGCrush, PNGQuant, PNGNQ, OptiPNG and AdvPNG (programmers sure do love to reinvent the wheel :) ). PNGOUT is thought to be the best, but I’d like to see a benchmark comparison of all of them.
One anonymous commenter at Jeff’s blog left:
One factor in all of this is the deflate implementation used. OptiPNG uses the standard zlib library while PNGOUT uses Ken Silverman’s proprietary but available-for-free deflate implementation. AdvPNG let’s you recompress the file with 7-Zip’s deflate implementation which is on par with Silverman’s deflate, and it’s open source. It’s best to run AdvPNG after running it through a png optimizer like OptiPNG or PNGOUT.
There’s also the possibility of lossly compressing pngs with PNGNQ (Linux/Mac) or PNGQuant (Cross platform). PNGNQ will give you the best file sizes out of all the utilities mentioned at the cost of a little bit of color information.