As mentioned by Jeff Atwood, ‘performance is a feature’. Having a fast and responsive web application really makes the difference. But how do you get there?
The best place to start is to have a look at the performance rules list created by the Exceptional Performance team at Yahoo. They have identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories.
- Content
- Minimize HTTP requests
- Reduce DNS lookups
- Avoid redirects
- Make Ajax cacheable
- Post-load components
- Preload components
- Reduce the number of DOM elements
- Split components across domains
- Minimize the number of iframes
- No 404s
- Server
- Use a Content Delivery Network
- Add an Expires or a Cache-Control Header
- Gzip components
- Configre ETags
- Flush the buffer early
- Use GET for AJAX requests
- Avoid empty image src
- Cookie
- Reduce cookie size
- Use cookie-free domains for components
- CSS
- Put stylesheets at the top
- Avoid CSS expressions
- Make CSS external
- Minify CSS
- Choose <link> over @import
- Avoid filters
- JavaScript
- Put scripts at the bottom
- Make JavaScript external
- Minify JavaScript
- Remove duplicate scripts
- Minimize DOM access
- Develop Smart Event handlers
- Images
- Optimize images
- Optimize CSS sprites
- Don’t scale images in HTML
- Make favicon.ico small and cacheable
- Mobile
- Keep components under 25K
- Pack components into a multipart document
There’s also a tool available called YSlow which helps you to analyze web pages and suggests ways to improve their performance.