Your SlideShare is downloading. ×
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


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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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: is not equal to
  • 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:
  • 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 <> to <>
  • CDNresource linking
  • 43. Tools:
    YUI Compressor
    Apache Benchmark
    skype: iv_andrew