Optimizing Client-Side Performance


Published on

Published in: Design, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Optimizing Client-Side Performance

  1. 1. Optimizing Client-Side Performance<br />by Andrew Ivachewsky<br />
  2. 2. Motivation<br /><ul><li>Enhance User Experience
  3. 3. Accept Slow Networks
  4. 4. Meet Performance Requirements
  5. 5. Improve Website Consistency</li></li></ul><li>HTTP Requests Reduction<br /><ul><li>Reduce number of page components
  6. 6. Make stylesheets and scripts external
  7. 7. Create sprites for CSS background images
  8. 8. Create image maps for page images
  9. 9. Always use same path to the same resources: http://www.testdomain.com/image.gif is not equal to testdomain.com/image.gif</li></li></ul><li>Distribute Page Resources Properly<br /><ul><li>Keep stylesheets at the top
  10. 10. Keep scripts at the bottom
  11. 11. Remove duplicate scripts
  12. 12. Strive to make page render progressively
  13. 13. Browsers download no more than 2 resources in parallel per hostname</li></li></ul><li>Think About User Experience<br />
  14. 14. DNS Lookup<br /><ul><li>DNS takes about 20-120ms to resolve IP
  15. 15. DNS information is stored at OS DNS cache and browser cache
  16. 16. Keep balance between number of unique hostnames on page and parallel downloads
  17. 17. Avoid HTTP redirects</li></li></ul><li>GZIP Compression<br /><ul><li>Web client indicates compression support with appropriate header in HTTP request:</li></ul>Accept-Encoding: gzip, deflate<br /><ul><li>Web server notifies client about compression via header in HTTP response:</li></ul>Content-Encoding: gzip<br /><ul><li>GZIP reduces response size for about 70%
  18. 18. Some resources don’t need GZIP compression like images, pdf files and media</li></li></ul><li>Web Caching<br />Web Caching Benefits:<br /><ul><li>Reduces latency between request and response
  19. 19. Saves network bandwidth
  20. 20. Reduces server load</li></ul>Types of Web Caches:<br /><ul><li>Browser cache
  21. 21. Proxy cache
  22. 22. Gateway cache</li></li></ul><li>Cache-control HTTP Headers<br /><ul><li>Expiresheader which sets absolute expiration:</li></ul>Expires: Mon, 15 Aug 2011 20:00:00 GMT<br /><ul><li>max-age=[seconds] which sets max amout of time the content is considered fresh
  23. 23. s-maxage=[seconds] which applies to proxy caches
  24. 24. public indicates that response may be cached
  25. 25. private indicates that response is intended for single user only and must not be cached by a proxy cache
  26. 26. no-cache forces cache to submit the request to origin server for validation before releasing a cached copy
  27. 27. no-store instructs caches not to keep a content under any condition</li></li></ul><li>Best Use of Cache<br /><ul><li>Use URLs consistently: when URL changes the browser fetches a new version from the origin server
  28. 28. Cache static content for a longer period
  29. 29. Use a cache-friendly folder structure
  30. 30. Reuse common graphics files
  31. 31. Change filename when you want to expire a cache
  32. 32. Use a version number when accessing static files like /static/images/image.gif?v=23424
  33. 33. Store cacheable files in a different domain
  34. 34. SSL, HTTP POST requests are never cached
  35. 35. Generate Content-Length response header</li></li></ul><li>Minification of JavaScript and CSS<br /><ul><li>Minification reduces size by removing unnecessary characters. About 20% less size
  36. 36. Popular minification tools JSMin and YUI Compressor
  37. 37. Obfuscation additionally changes the code but may introduce bugs. About 25% less size</li></li></ul><li>Minification Example<br />
  38. 38. Content Delivery Networks (CDN)<br /><ul><li>80% of end-user response time is spent downloading page resources
  39. 39. CDN servers are distributed across multiple locations
  40. 40. For incoming request CDN selects server with fewest network hops or server with quickest response time
  41. 41. Popular networks are Akamai, EdgeFast, level3, Amazon CDN, Yahoo Traffic Server</li></ul>Two types of CDNs:<br /><ul><li>Upload content to CDN’s servers via FTP
  42. 42. Store static content on your own site but use domain alias: CNAME mapping for <static.testdomain.com> to <cache.somecdn.net></li></li></ul><li>CDNresource linking<br />
  43. 43. Tools:<br />Firebug http://getfirebug.com/<br />HttpWatchhttp://www.httpwatch.com/<br />YSlowhttp://developer.yahoo.com/yslow/<br />JSMinhttp://crockford.com/javascript/jsmin<br />YUI Compressor http://developer.yahoo.com/yui/compressor/<br />Apache Benchmark http://httpd.apache.org/docs/2.0/programs/ab.html<br />Contacts:<br />skype: iv_andrew<br />?<br />