// Internet Duct Tape

Design Tips: Website Speed Optimization for Dummies

Posted in CSS and Web Design, Technology by engtech on March 09, 2007

Website 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.
  • Don’t use Javascript/Flash widgets in your sidebar.
    • External Javascript widgets can have cross-site scripting security issues as well.
  • 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.

Daniel recommends Website Speed Test. It doesn’t give you many details, but it will let you know how long your page takes to load which may point to larger server/hosting issues.

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.

Doh.

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.

11 Responses

Subscribe to comments with RSS.

  1. David Airey said, on March 09, 2007 at 3:43 pm

    Superb overview.

    I’ve got the feedburner feeds down but am keeping my images on my own server. I’ll check out Amazon S3 after your prompt.

  2. Madhur Kapoor said, on March 09, 2007 at 9:31 pm

    Nice post man , i especially liked the point “Make sure your blog content comes before your sidebars in your theme” , any idea how to do it if it is not happening .

  3. engtech said, on March 09, 2007 at 11:36 pm

    @madhur: You’d have to hack your theme so that the content comes first, and then play with the CSS so that it looks the way it did before. It’s not trivial if you aren’t familiar with CSS/PHP.

    Switching to another theme that “does things right” will usually be simpler.

    Themes with sidebars on the right (not left) usually have the sidebar come after the content, where as ones with the sidebar on the left or in the middle may be poorly coded.

  4. jhay said, on March 10, 2007 at 2:48 am

    Thanks for sharing so many tools about speed optimization, I’ve read a lot of this kind of posts before but most of them are just rhetoric.

  5. [...] first post being on Optimizing the images on the site and engtech has also written a good post on Optimizing the site . After reading these posts i was also concerned about the loading time of my site and what can i [...]

  6. Hans said, on March 13, 2007 at 10:45 pm

    I wouldn’t recommend imageshack.us since I recently got some issues with it because it seems when you host a lot of your post’s photo there, it reaches a max bandwidth allowed and so make all your images broken when that’s exceeded. That’s why I just turned to Flickr to avoid any such things….

  7. Can I Be More Optimize? said, on March 28, 2007 at 5:50 pm

    [...] Design Tips: Website Speed Optimization for Dummies from Engtech Blog. [...]

  8. Reader Tips: 08 April 2007 said, on April 08, 2007 at 10:38 pm

    [...] Design Tips: website speed optimization for dummies. I had this post from Engtech on the queue but somehow I forgot to include it on the previous weeks. [...]

  9. Vincent Chow said, on April 09, 2007 at 10:25 am

    Why would using external image host increase the loading speed of a website?

  10. engtech said, on April 15, 2007 at 8:57 pm

    @Vincent: external hosts are usually faster at delivering images then your web host, but the real time savings is because it reduces the amount of data your web server has to send… so if you are getting a lot of requests your web server isn’t slowed down because it’s serving images — a dedicate image server can handle it.

  11. [...] GIF, JPG, PNG? What image format should I use? [...]


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 287 other followers

%d bloggers like this: