Tuesday, June 28, 2011

Best practices to speed up your website

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.

No comments: