Optimizing Client-Side Performance
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Optimizing Client-Side Performance

on

  • 985 views

 

Statistics

Views

Total Views
985
Views on SlideShare
984
Embed Views
1

Actions

Likes
1
Downloads
21
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optimizing Client-Side Performance Presentation Transcript

  • 1. Optimizing Client-Side Performance
    by Andrew Ivachewsky
  • 2. Motivation
    • Enhance User Experience
    • 3. Accept Slow Networks
    • 4. Meet Performance Requirements
    • 5. Improve Website Consistency
  • HTTP Requests Reduction
    • 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
  • Distribute Page Resources Properly
    • 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
  • Think About User Experience
  • 14. DNS Lookup
    • 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
  • GZIP Compression
    • Web client indicates compression support with appropriate header in HTTP request:
    Accept-Encoding: gzip, deflate
    • Web server notifies client about compression via header in HTTP response:
    Content-Encoding: gzip
    • GZIP reduces response size for about 70%
    • 18. Some resources don’t need GZIP compression like images, pdf files and media
  • Web Caching
    Web Caching Benefits:
    • Reduces latency between request and response
    • 19. Saves network bandwidth
    • 20. Reduces server load
    Types of Web Caches:
    • Browser cache
    • 21. Proxy cache
    • 22. Gateway cache
  • Cache-control HTTP Headers
    • Expiresheader which sets absolute expiration:
    Expires: Mon, 15 Aug 2011 20:00:00 GMT
    • 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
  • Best Use of Cache
    • 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
  • Minification of JavaScript and CSS
    • 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
  • Minification Example
  • 38. Content Delivery Networks (CDN)
    • 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
    Two types of CDNs:
    • 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>
  • CDNresource linking
  • 43. Tools:
    Firebug http://getfirebug.com/
    HttpWatchhttp://www.httpwatch.com/
    YSlowhttp://developer.yahoo.com/yslow/
    JSMinhttp://crockford.com/javascript/jsmin
    YUI Compressor http://developer.yahoo.com/yui/compressor/
    Apache Benchmark http://httpd.apache.org/docs/2.0/programs/ab.html
    Contacts:
    skype: iv_andrew
    ?