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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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