Your SlideShare is downloading. ×
0
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Optimizing Client-Side Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optimizing Client-Side Performance

855

Published on

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
855
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Optimizing Client-Side Performance<br />by Andrew Ivachewsky<br />
  • 2. Motivation<br /><ul><li>Enhance User Experience
  • 3. Accept Slow Networks
  • 4. Meet Performance Requirements
  • 5. Improve Website Consistency</li></li></ul><li>HTTP Requests Reduction<br /><ul><li>Reduce number of page components
  • 6. Make stylesheets and scripts external
  • 7. Create sprites for CSS background images
  • 8. Create image maps for page images
  • 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. Keep scripts at the bottom
  • 11. Remove duplicate scripts
  • 12. Strive to make page render progressively
  • 13. Browsers download no more than 2 resources in parallel per hostname</li></li></ul><li>Think About User Experience<br />
  • 14. DNS Lookup<br /><ul><li>DNS takes about 20-120ms to resolve IP
  • 15. DNS information is stored at OS DNS cache and browser cache
  • 16. Keep balance between number of unique hostnames on page and parallel downloads
  • 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. 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. Saves network bandwidth
  • 20. Reduces server load</li></ul>Types of Web Caches:<br /><ul><li>Browser cache
  • 21. Proxy cache
  • 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. s-maxage=[seconds] which applies to proxy caches
  • 24. public indicates that response may be cached
  • 25. private indicates that response is intended for single user only and must not be cached by a proxy cache
  • 26. no-cache forces cache to submit the request to origin server for validation before releasing a cached copy
  • 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. Cache static content for a longer period
  • 29. Use a cache-friendly folder structure
  • 30. Reuse common graphics files
  • 31. Change filename when you want to expire a cache
  • 32. Use a version number when accessing static files like /static/images/image.gif?v=23424
  • 33. Store cacheable files in a different domain
  • 34. SSL, HTTP POST requests are never cached
  • 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. Popular minification tools JSMin and YUI Compressor
  • 37. Obfuscation additionally changes the code but may introduce bugs. About 25% less size</li></li></ul><li>Minification Example<br />
  • 38. Content Delivery Networks (CDN)<br /><ul><li>80% of end-user response time is spent downloading page resources
  • 39. CDN servers are distributed across multiple locations
  • 40. For incoming request CDN selects server with fewest network hops or server with quickest response time
  • 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. 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. 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 />

×