Sunday, May 13, 2012

Improving page load performance

Here are some general recommendations that can be given.

Start by running your site through a tool like http://gtmetrix.com/ which uses YSlow from Yahoo and a custom validation engine to provide recommendations. The recommendations you will get from GT Metrix will cover 95%+ of the most common web best practices. (Not affiliated; just really like their tool).

If your site isn't publicly available, you can use Chrome's developer tools (run an audit to get a list performance recommendations on the whole page, and also on JS and CSS interpretation times--very useful).

Validate your document for errors using http://validator.w3.org. Even if your site isn't public, you can paste the source into the validator engine as text.

If images are your main concern, use lazy loading techniques to only load visible content, such as the jQuery lazy loader for images. Use the correct size/format for web images. Use a tool like http://www.smushit.com/ysmush.it/ to compress images.

General Page Performance Factors

From YSlow, in alphabetical order

  • Add Expires headers
  • Avoid AlphaImageLoader filter
  • Avoid CSS expressions
  • Avoid empty src or href
  • Avoid HTTP 404 (Not Found) error
  • Avoid URL redirects
  • Compress components with gzip
  • Configure entity tags (ETags)
  • Do not scale images in HTML
  • Make AJAX cacheable
  • Make favicon small and cacheable
  • Make fewer HTTP requests
  • Make JavaScript and CSS external
  • Minify JavaScript and CSS
  • Put CSS at the top
  • Put JavaScript at bottom
  • Reduce cookie size
  • Reduce DNS lookups
  • Reduce the number of DOM elements
  • Remove duplicate JavaScript and CSS
  • Use a Content Delivery Network (CDN)
  • Use cookie-free domains
  • Use GET for AJAX requests