- Avoiding Unnecessary Paints
- CSS Paint Times and Page Render Weight
- Profiling Mobile HTML5 Apps With Chrome DevTools
- Accelerated Rendering in Chrome
- Scrolling Performance
- Jank Busting for Better Rendering Performance
- Using the PageVisibility API
- Leaner, Meaner, Faster Animations with requestAnimationFrame
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.
- 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.
- 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 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
- 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.
- 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.
- 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
- 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
- WebPageTest An industry collaboration providing the testing infrastructure for testing from around the globe