Performance Is a Feature

Writing fast and responsive apps isn't just important for your users, it's important for your bottom line. For example, Google now incorporates site speed in page ranking. Amazon has found that every 100 ms increase in page load time decreased sales by 1%. Also, Microsoft found that slowing a page by 2 seconds decreased ad clicks by 4%.

Web app optimization cross cuts all aspects of development, from the server to the network to the client. Focusing on performance is critical to success.

Themes

• Store locally. Data stored on the client is quicker to access than data stored on the server. Also, data stored closer to the calculation is quicker to access.
• Process in the background. Anything that doesn't help the user see a response to their action should be performed in the background.
• Minimize connections. Each connection requires work for setup and teardown.
• Decrease bandwidth. Less bandwidth means a faster response.

Technologies

• HTTP caching Allow clients and servers to reduce connections and bandwidth.
• HTTP caching servers Servers like Varnish and Squid can cache your content.
• Memcache Efficient server side storage and retrieval of key/value data
• Web workers Run JavaScript in the background, in parallel with the main window
• Web sockets Efficient bi-directional streaming communication
• Local storage Client side key/value data storage
• Indexed database Client side simple object storage
• App cache Caching web app assets locally for offline use
• CSS3 transitions and animations Native (and possibly hardware accelerated) property changes for elements
• CSS sprites Combining many small images into one image, reduce downloads
• Link prefetching Ask the browser to download other pages in the background
• Native client Run native code (C/C++) in a browser sandbox
• HTTP persistent connections send multiple resources over the same connection
• Web fonts natively render text instead of download images
• Data URI Embed binary data such as images into HTML, reducing HTTP requests

Techniques

• HTTP Caching Use If-Modified-Since and ETags to reduce content over the wire.
• Data caching Use systems like Memcache for frequently accessed data.
• Local data caching Put data on the client for faster access.
• Content delivery networks Place the content closer to the client with a CDN.
• Efficient data retrieval Minimize SQL calls, reduce joins, retrieve via an index.
• Pre-calculating results Denormalize or pre-calculate frequently retrieved data.
• Minification Shrink your JavaScript, CSS, and even HTML files.
• Compression Compress your assets via HTTP's Accept-Encoding.
• Asynchronous callbacks Defer the work, get notified when it’s done.
• Hardware acceleration Browsers are now using the GPU for things like canvas and transforms.
• Moving calculations close to data Data is bigger than algorithms, move code and not data.
• Profiling Use tools to understand and collect real life data. Measure, don’t guess.
• Sprites Place many images into one file, minimizing HTTP requests.
• Image optimization Compress your images, pick the right format for the job.
• Specify image width and heights Tell the browser how to render around images before they are downloaded.
• Place JavaScript at the bottom of your HTML Let the page download and begin rendering.
• Rendering on the client Use canvas to draw images, or web fonts to render text, instead of downloading assets.
• Read 'High Performance Web Sites' and 'Even Faster Web Sites' Covers web app performance in great detail

Tools

• Developer tools for Chrome and Safari Peer into requests, walk the DOM, set JavaScript breakpoints, get behind the scenes
• Dragonfly for Opera Similar to Webkit Developer Tools, but for Opera
• Firebug for Firefox Similar to Opera Dragonfly, but for Firefox.
• Audit panel in the Developer tools Get suggestions for speeding up your web app
• Speedtracer - not just for GWT, check out the Ruby plugin Identify and fix performance problems in your web app
• YSlow for Firebug Like the Developer Tools' Audit Panel, but for Firefox
• Closure JavaScript compiler Minify, reduce, and obfuscate your JavaScript
• YUI Compressor Minify and obfuscate your JavaScript and CSS
• WebPageTest An industry collaboration providing the testing infrastructure for testing from around the globe

Further Reading

• Let's make the web faster
• High Performance Web Sites
• Even Faster Web Sites
• The psychology of web performance
• Practical guide to controller experiments on the Web