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

Optimizing Client-Side Performance

on

  • 942 views

 

Statistics

Views

Total Views
942
Views on SlideShare
941
Embed Views
1

Actions

Likes
1
Downloads
20
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 Optimizing Client-Side Performance Presentation Transcript

    • Optimizing Client-Side Performance
      by Andrew Ivachewsky
    • Motivation
      • Enhance User Experience
      • Accept Slow Networks
      • Meet Performance Requirements
      • Improve Website Consistency
    • HTTP Requests Reduction
      • Reduce number of page components
      • Make stylesheets and scripts external
      • Create sprites for CSS background images
      • Create image maps for page images
      • 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
      • Keep scripts at the bottom
      • Remove duplicate scripts
      • Strive to make page render progressively
      • Browsers download no more than 2 resources in parallel per hostname
    • Think About User Experience
    • DNS Lookup
      • DNS takes about 20-120ms to resolve IP
      • DNS information is stored at OS DNS cache and browser cache
      • Keep balance between number of unique hostnames on page and parallel downloads
      • 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%
      • Some resources don’t need GZIP compression like images, pdf files and media
    • Web Caching
      Web Caching Benefits:
      • Reduces latency between request and response
      • Saves network bandwidth
      • Reduces server load
      Types of Web Caches:
      • Browser cache
      • Proxy cache
      • 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
      • s-maxage=[seconds] which applies to proxy caches
      • public indicates that response may be cached
      • private indicates that response is intended for single user only and must not be cached by a proxy cache
      • no-cache forces cache to submit the request to origin server for validation before releasing a cached copy
      • 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
      • Cache static content for a longer period
      • Use a cache-friendly folder structure
      • Reuse common graphics files
      • Change filename when you want to expire a cache
      • Use a version number when accessing static files like /static/images/image.gif?v=23424
      • Store cacheable files in a different domain
      • SSL, HTTP POST requests are never cached
      • Generate Content-Length response header
    • Minification of JavaScript and CSS
      • Minification reduces size by removing unnecessary characters. About 20% less size
      • Popular minification tools JSMin and YUI Compressor
      • Obfuscation additionally changes the code but may introduce bugs. About 25% less size
    • Minification Example
    • Content Delivery Networks (CDN)
      • 80% of end-user response time is spent downloading page resources
      • CDN servers are distributed across multiple locations
      • For incoming request CDN selects server with fewest network hops or server with quickest response time
      • Popular networks are Akamai, EdgeFast, level3, Amazon CDN, Yahoo Traffic Server
      Two types of CDNs:
      • Upload content to CDN’s servers via FTP
      • Store static content on your own site but use domain alias: CNAME mapping for <static.testdomain.com> to <cache.somecdn.net>
    • CDNresource linking
    • 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
      ?