Performance Tuning Resources For Web Clients

Recently I have been doing some research on tweaking websites to make them faster (either in reality, or at least in appearance to the client). Specifically the research has been focused on the actual client tier interaction - requesting the page, downloading the assets and rendering the page in the browser. In this post I will document some of the better resources I have found, focusing on client-side tweaks, so these resources should be relevant no matter if you are a Java, PHP, .Net or any other flavor of developer.

Why Should I Care About Website Performance?

It used to be that website performance (or lack of) was simply the cause of a poor user experience, which some sites cared about, and clearly other sites did not. So, if a bad user experience was not enough motivation for you to solve your performance problems, then how about losing money? As this article Proof that speeding up websites improves online business shows a slow site could be costing you money. Whether it is shopping cart conversions, or simply ad click conversions, a slow site is going to hurt you. And the situation is only going to get worse in the future if Google has its way.

Google

When it comes to all things web related, it is hard to not talk about Google. However, when it comes to discussing the speed of the web, Google has recently become even more relevant with a three pronged attack.

In early November Google's Matt Cutts discussed in a presentation about things to look out for in 2010 that there is a strong push internally at Google to include page speed into Google's page ranking algorithm - in other words, the faster your page loads, the better your page would rank in Google's search results.

Secondly, around the same time, a post appeared on The Chromium Blog entitled A 2x Faster Web which introduced a new technology named SPDY (pronounced Speedy) which is an experimental application layer protocol that addresses many of the causes of latency in the web browsing experience.

And thirdly, back in the middle of the year, Google added a section to the Google Code website, simply titled Let's make the web faster which contains a cornucopia of tweaks and articles on speeding up your website (although some have critiqued some of the suggestions).

One of the big pieces of this new section is the inclusion of the Page Speed tool, which is a free Firefox plugin that allows you to run performance diagnostics on an individual page from within the browser itself and get suggestions on how to speed it up. The Page Speed tool can also be installed from within Google's Webmaster Tools site under Labs > Site performance.

Even from within Google Analytics there are now ways to extend the reporting functionality with timing data (see Extending Event Tracking) so that you could conceivably create reports that track most popular pages against fastest loading pages, allowing you to focus resources in the right place.

Finally, if you have a spare hour and you count yourself as a genuine developer type person, then Steve Souders' presentation from Google I/O 2009 entitled Even Faster Websites is definitely worth watching. Many of the tips in the presentation are significantly more technical than the others you will find in the other resources. Interestingly Steve now works for Google, but was previously at Yahoo!

Yahoo!

Most of the critics of the new Google pages and the Page Speed tool point to the Performance page and the YSlow tool on the Yahoo! Development Network (YDN) site, which have been around much longer.

The Performance page on YDN presents its own set of tweaks and articles for improving the performance of your website. The main content is contained on the Best Practices for Speeding Up Your Web Site page which lists 34 rules broken down into 7 categories.

The Yahoo! YSlow tool is very similar to Google's Page Speed tool (or most likely it is the other way around) and is another Firefox plugin that allows you to run diagnostics against a single page right from within the browser and receive suggestions on how to improve its loading speed.

Firebug

If you are a web developer of any kind you MUST have Firebug as part of your toolkit. It will help you debug JavaScript and CSS problems as well as problems with your markup. The Page Speed tool from Google functions as an add-on to Firebug, so if you want to use Page Speed you will have to install Firebug anyway.

Other Resources

• How would you make Mahalo's pages load faster?
  
  Recently Jason Calacanis posted a question on the Mahalo Answers site asking How would you make Mahalo's pages load faster? There is a very long thread of responses which is actually worth reading because some of the ideas are quite novel compared to the rest of the related resources on the web.
  

• 12 Things To Make Your Websites FASTER -- interworksinc.com
  
  In an entry on his blog, Brad Fair posts his own experience with some of the tips listed on the Google speed pages.
  

• How to build faster loading websites -- techradar.com
  
  Craig Grannell's article How to build faster loading websites has a good overview of many tweaks without getting too technical and includes a reference to the YSlow tool.
  

• Web Site Performance Tips and Tools -- java.net
  
  Carol McDonald's blog entry on the java.net site is not specific to Java and contains a great list of links to tools to help with finding and diagnosing performance issues, including issues once the page has finished loading, like slow AJAX.
  

• 7 Professional Web Design Tips for a Faster Website -- networksolutions.com
  
  This a short, fast, concise article of 7 tips for increasing website performance. All of the tips are solid and all are worthy of your attention.
  

• 10 Tips for a Fast Website -- layersmagazine.com
  
  Layer's Magazine is targeted directly at the users of Adobe's tools, so not surprisingly this article by Nicolle Sullivan is focused on tweaks related to the visual design of your site as opposed to the technical side. While all of the tweaks are valuable, I am not 100% convinced that all of them would directly impact the speed at which your website initially loads.
  

• How to Make Your Website Load Faster by Resizing Your Pictures -- associatedcontent.com
  
  As the title implies, this article specifically deals with resizing images to optimize your media for better website performance. The only downside is that it deals specifically with Photoshop, so if you don't have a license this is not for you.
  

• 6 Useful Tips Making a Website Load Faster -- layoutspack.com
  
  This is a short simple article that emphasizes many of the same tweaks as the other references already mentioned above.
  
• Building a Faster Web Site: An Overview -- help4web.net
  
  This article by Bruce Waldack is very technical and deals more with network level technologies, with only a brief mention of images and optimizing CGI scripts towards the end. This is really an article for System Administrators, rather than your average Web Developer.
  

• Optimization section -- yourhtmlsource.com
  
  The Optimization section on the HTML Source site is broken into three sections - Basic Optimizations, Optimizing Images and Extreme Optimizations. Most of the tips are worthy for your consideration, however some of the content seems to indicate the pages are quite dated (even though the last modified dates on the pages show they were "updated" in the last week). For example there is no mention of PNG format images on the Optimizing Images page, and the reference to Netscape in the Basic Optimization page.
  

 What resources for tweaking web clients can you recommend?