- January 6th, 2010
- 96 Comments
Website performance is a hugely important topic, so much so that the big companies of the Web are obsessed with it. For the Googles, Yahoos, Amazons and eBays, slow websites mean fewer users and less happy users and thus lost revenue and reputation.
In your case, annoying a few users wouldn’t be much of a problem, but if millions of people are using your product, you’d better be snappy in delivering it. For years, Hollywood movies showed us how fast the Internet was: time to make that a reality.
Even if you don’t have millions of users (yet), consider one very important thing: people are consuming the Web nowadays less with fat connections and massive computers and more with mobile phones over slow wireless and 3G connections, but they still expect the same performance. Waiting for a slow website to load on a mobile phone is doubly annoying because the user is usually already in a hurry and is paying by the byte or second. It’s 1997 all over again.
Performance is an expert’s game… to an extent. You can do innumerable things to make a website perform well, and much of it requires in-depth knowledge and boring testing and researceh. I am sure a potential market exists for website performance optimization, much like there is one now for search engine optimization. Interestingly, Google recently announced that it will factor performance into its search rankings1, so this is already happening. That said, you can do a lot of things without having to pay someone to point out the obvious.
Know Your Performance Blockers
So here are the things that slow down your page the most.
External Resources (Images, Scripts, Style Sheets)
Every time you load something from another server, the following happens:
- The browser opens up the Internet’s address book and looks up the number associated with the name of the server that’s holding the things you want (i.e. its DNS2 entry).
- It then negotiates a delivery.
- It receives the delivery (waiting for all the bytes to come in).
- It tries to understand what was sent through and displays it.
The first thing to know about scripts that you include in a document is that they are not HTML or CSS; the browser has to call in an expert to do something with them. Here is what happens:
- Whenever the browser encounters a
- The script engine then looks at the content in the script block (which may have been delivered earlier), sighs, complains about the poor code, scratches its head and then does what the script tells it to do.
- Once the script engine is done, it reports back to the browser, which puts down its coffee, says good-bye to the script engine and looks at the rest of the document (which might have been changed, because the script may have altered the HTML).
Here is where things get interesting. Optimizing images has always been the bane of every visual designer. We build our beautiful images in Illustrator, Photoshop or Fireworks and then have to save them as JPG, GIF or PNG, which changes the colors and deteriorates the quality; and if we use PNG, then IE6 arrives as the party-pooper, not letting us take advantage of PNG’s cool features.
Finding the right balance between visual loss and file size can be daunting, but be grateful for the Web preview tool, because we didn’t always have it. I recall using Photoshop 4 and then Photoshop with the Ulead SmartSaver, for example.
The interesting thing about images, though, is that after you have optimized them you can still save many more bytes by stripping unnecessary data from the files and running the files through tools that further compress the images but are non-lossy. The bad news is that many of them are out there, and you’ll need different ones for different image formats. The good news is that tools exist that do all that work for you, and we will come back to this later. For more advanced optimizaition techniques feel free to take a closer look at the Smashing Magazine’s articles Clever JPEG Optimization Techniques3, PNG Optimization Guide4 and Clever PNG Optimization Techniques5.
Simple Tools You Can Use Now To Improve Performance
All of those companies that obsess about page performance offer tools that allow you to check your own website automatically and make it easy to work around problems.
Test Your Performance
The first thing to do is find out how your website can be optimized. Here are three great tools (among others that crop up all the time) to use and combine.
YSlow6 is a Firebug add-on from Yahoo that allows you to automatically check your website for performance issues. The results are ranked like American school grades, with A being the best and F being the worst. The grades are cross-linked to best practice documentation on the Yahoo performance pages7. You can test several settings: “classic YSlow,” which is targeted to Yahoo-sized websites, “YSlow 2″ and “small site or blog.” Results are listed clearly and let you click through to learn.
In the components view, YSlow lists all of the issues it has found on your website and how serious they are:
The statistics view in YSlow gives you all information in pie charts:
The tools section in YSlow offers a lot of goodies:
- All JS
- All JS Beautified
- All JS Minified
- All CSS
Show all CSS code in a document
- All Smush.it
Automatically compresses all of your images (more on this later).
- Printable View
Creates a printable document of all of YSlow’s results (great for showing to a client after you’ve optimized the page!)
Google’s Page Speed
Page Speed’s other extra is that it monitors the overall activity of your page, allowing you to see when a document loads other resources after it has been loaded and to see what happens when a user rolls over elements or opens tabs and menus that load content via AJAX.
Be careful with this feature, though: it hammers your browser quite hard.
Rather late to the game, AOL’s WebPageTest16 is an application with some very neat features. (It is also available as a desktop application, in case you want to check Intranets or websites that require authentication.)
WebPageTest allows you to run tests using either IE8 or IE7 from a server in the US or the UK, and it allows you to set all kinds of parameters, such as speed and what to check for:
Once you have defined your parameters and the testing is completed, you will get in-depth advice on what you can do to optimize. You’ll get:
- A summary,
- Detailed results,
- A performance review,
- An optimization report,
- The content breakdown,
- The domain breakdown,
- A screenshot.
One very cool feature of WebPageTest is the visual recording you get of how long it takes for page elements to show up on screen for users. The following screenshot compares the results of this blog, Ajaxian and Nettuts+:
You can even create a video of the rendering, which is another very cool thing to show clients.
Once you get the test results, it is time to fix any problems.
Use Image Sprites
Image Sprites20 were first discussed in an article published by Dave Shea and based on the work of Petr Stanicek21. They have been covered extensively here before22, but understanding their full benefit is important before you start using them:
- All of your images will be available as soon as the main image has loaded (no flickering on roll-overs or other annoyances).
- One HTTP request is made, instead of dozens (or hundreds, in some cases).
- Images have a much higher chance of staying cached on the user’s machine because they are contained in a single file.
Shea’s article points out a lot of cool resources for creating CSS Sprites but misses one that was released not long ago. Sprite Me23 was produced by Google (under the supervision of Steve Souders) and allows you to create Sprites automatically from any website, even via a bookmarklet. It analyzes the images on a page and offers you various options before generating the Sprite and CSS for you.
Optimize Your Images
You know now that Page Speed can automatically optimize your images. Another way to do this is with Yahoo’s Smush It, which is a set of image optimization tools that analyze your images, create the smallest possible versions and sends you a ZIP file of them all.
You can use Smush.it26 directly in the browser or automatically from YSlow. The website tells you how many bytes you can save by optimizing your images. This is yet another cool thing to show potential clients when pitching for a job.
Collate Scripts and Load Scripts on Demand
As noted, try not to spread your
<script> nodes all over the document, because the browser stops whenever it encounters one. Instead, insert them as far down in the document as possible.
Notice that a tab tells you what the overall size of the library will be.
Use Network Distributed Hosting
If you use a library or CSS provided by a library, make sure to use the hosted versions of the files. In the case of YUI, this is done for you if you use the configurator. And you can pick from Yahoo or Google’s network.
- There is a high probability that these servers are faster than yours.
- Visitors who have visited other websites that use the same includes will already have them on their computers and won’t need to load them again.
- You save on bandwidth and can easily upgrade the library by changing the version number of the include.
While you probably wouldn’t be able to afford distributed hosting for your own files, Coral35 makes an interesting offer to distribute your data onto a network of servers for an affordable $50 a month.
Watch Some Videos
If you want to see how some of this work, check out the following videos, especially Nicole Sullivan’s, which shows some very cool CSS tricks:
- Using YSLow 2.036
- Using Google Page Speed37
- Nicole Sullivan tells you not to blame the rounded corners but to design for fast websites38
- Steve Souders showing Sprite Me39
- Douglas Crockford on AJAX performance40.
Follow The Leaders
To learn more about website performance, here are some resources and people to follow. (Be warned: some of the content is technically tough.)
- The Yahoo Developer Network Performance Section41
Home of YSLow and probably the first official performance research website.
- Performance Planet42
A collation of all performance blogs and posts in one RSS feed.
- Steve Souders43 (@souders44)
Ex-maintainer of the performance section of Yahoo, now at Google. Author of the biggest performance books. And organizer of the Velocity conference.
- Nicole Sullivan45 (@stubbornella46)
Ex-team member of the performance group at Yahoo and co-creator of Smush.it. Also CSS performance goddess with great tips for designers. Currently working on making Facebook perform better.
- Stoyan Stefanov47 (@stoyanstefanov48)
Coder of Smush.it and member of the performance team at Yahoo. Created his own advent calendar of performance tips49 this year, and runs Performance Planet, as mentioned above.
- Ed Eliot and Stuart Colville50
Builders of the CSS Sprite Generator51.
- Jake Archibald52 (@jaffathecake53)
Lead developer of the BBC’s Glow library. Delivered a great talk on performance54 at this year’s Full Frontal conference.
- Phillip Tellis55 (@bluesmoon56)
Performance junkie at Yahoo.
- And me, their fanboy and person asking for features: Chris Heilmann57 (@codepo858).
- 1 http://www.downloadsquad.com/2009/11/14/google-to-use-page-load-speed-as-a-search-result-ranking-factor/
- 2 http://en.wikipedia.org/wiki/Domain_Name_System
- 3 http://www.smashingmagazine.com/2009/07/01/clever-jpeg-optimization-techniques/
- 4 http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/
- 5 http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
- 6 http://developer.yahoo.com/yslow/
- 7 http://developer.yahoo.com/performance/
- 8 http://www.flickr.com/photos/codepo8/4198617150/sizes/o/
- 9 http://www.flickr.com/photos/codepo8/4197863687/sizes/o/
- 10 http://www.flickr.com/photos/codepo8/4198630210/sizes/o/
- 11 http://www.jslint.com/
- 12 http://www.flickr.com/photos/codepo8/4197872303/sizes/o/
- 13 http://code.google.com/speed/page-speed/
- 14 http://www.flickr.com/photos/codepo8/4198657574/sizes/o/
- 15 http://www.flickr.com/photos/codepo8/4198689498/sizes/o/
- 16 http://www.webpagetest.org/
- 17 http://www.flickr.com/photos/codepo8/4198701698/sizes/o/
- 18 http://www.flickr.com/photos/codepo8/4198726620/sizes/l/
- 19 http://www.flickr.com/photos/codepo8/4198697096/sizes/o/
- 20 http://www.alistapart.com/articles/sprites/
- 21 http://wellstyled.com/css-nopreload-rollovers.html
- 22 http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
- 23 http://spriteme.org/
- 24 http://www.youtube.com/watch?v=pNfRL-TwzZY#t=27m21s
- 25 http://www.youtube.com/watch?v=pNfRL-TwzZY#t=27m21s
- 26 http://www.smushit.com/ysmush.it/
- 27 http://www.flickr.com/photos/codepo8/4197963651/sizes/o/
- 28 http://www.flickr.com/photos/codepo8/4197968099/sizes/o/
- 29 http://www.ejeliot.com/blog/72
- 30 http://www.unwrongest.com/projects/lazy/
- 31 http://developer.yahoo.com/yui/3/configurator/
- 32 http://developer.yahoo.com/yui/3/configurator/
- 34 http://code.google.com/apis/ajaxlibs/
- 35 http://www.coralcdn.org/
- 36 http://developer.yahoo.net/blogs/theater/archives/2009/04/yslow_update_screencast.html
- 37 http://www.youtube.com/watch?v=a-9pCfyYPdQ
- 38 http://yuiblog.com/blog/2008/12/23/video-sullivan/
- 39 http://www.youtube.com/watch?v=pNfRL-TwzZY#t=27m21s
- 40 http://www.yuiblog.com/blog/2008/12/23/video-crockford-performance/
- 41 http://developer.yahoo.com/performance/
- 42 http://www.perfplanet.com/
- 43 http://www.stevesouders.com/
- 44 http://www.twitter.com/souders
- 45 http://stubbornella.org/content/
- 46 http://www.twitter.com/stubbornella
- 47 http://phpied.com/
- 48 http://www.twitter.com/stoyanstefanov
- 49 http://www.phpied.com/performance-advent-calendar-2009/
- 50 http://website-performance.org/
- 51 http://spritegen.website-performance.org/
- 52 http://www.jakearchibald.com/
- 53 http://www.twitter.com/jaffathecake
- 54 http://www.jakearchibald.com/jsperformance/
- 55 http://bluesmoon.info/
- 56 http://twitter.com/bluesmoon
- 57 http://wait-till-i.com/
- 58 http://www.twitter.com/codepo8