• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating high-performance-web-sites
 

Creating high-performance-web-sites

on

  • 1,264 views

Brief overview of Steve Souders web optimization techniques.

Brief overview of Steve Souders web optimization techniques.

Statistics

Views

Total Views
1,264
Views on SlideShare
1,263
Embed Views
1

Actions

Likes
2
Downloads
26
Comments
0

1 Embed 1

https://twitter.com 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

    Creating high-performance-web-sites Creating high-performance-web-sites Presentation Transcript

    • Creating High Performance Web Sites
    • Agenda
      Steve Souders
      My Experiences
      Tools
      The Rules
      References
      Questions?
    • Steve Souders
      Works at Google
      Author
      Creator of YSlow
      Teacher at Stanford
      Former Chief Performance Yahoo!
      Startup Veteran
    • My Experiences
      1.5 Million Unique Users
      10 Million Page Views
      .Net Technology Stack
      Ektron
      Cachefly CDN
    • Tools
      Firefox
      + Firebug
      + YSlow
      • JS Lint
      • JS Beautified
      • JS Minified
      • CSS Compressor
      • Smush It
      Chrome
      IE Dev Tools
      Fiddler
      Microsoft Network Monitor
    • The Performance Golden Rule
      80-90% of the end user response time is spent on the front end. Start there.
      Greater potential for improvement
      Simpler
      Proven to work
    • User Perception
      User perception is more relevant than actual unload-to-onload response time
      Varies from one web page to the next
    • The (First Set of) Rules
      Make Fewer HTTP Requests
      Use a Content Delivery Network
      Add an Expires Header
      Gzip Components
      Put Stylesheets at the Top
      Put Scripts at the Bottom
      Avoid CSS Expressions
      Make JavaScript and CSS External
      Reduce DNS Lookups
      Minify JavaScript
      Avoid Redirects
      Remove Duplicates Scripts
      Configure ETags
      Make Ajax Cacheable
    • Make Fewer HTTP Requests
      Combined files
      CSS sprites
      Image maps
      Inline images
      In a stylesheet
    • Use a Content Delivery Network
      Akamai
      EdgeCast
      Level3
      Static content
      Offload traffic
      Locate content geographically closer to users
    • Add an Expires Header
      Static components – use Expires header
      Something like 10 years from now
      Dynamic components – use Cache-Control header
      Max-age in seconds
      Use this to “prime” the browser cache
      Need to change filename or use a “cache buster” when contents change
      yahoo_2.0.6.js
      yahoo.js?20110310
    • Gzip Components
      Web server compression of files being served
      Generally reduces size by 70%
      Supported by about 90% browsers used today
    • Put Stylesheets at the Top
      Makes page appear to render faster
      Allows page to render progressively
    • Put Scripts at the Bottom
      Scripts block parallel downloads
      Even across hostnames
    • Avoid CSS Expressions
      Not commonly used
      Deprecated starting with IE8
      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
    • Make JavaScript and CSS External
      Improves cacheability
    • Reduce DNS Lookups
      Typical lookup takes 20-120ms per hostname
      Cached for performance
      IE ~30 minutes
      FF ~60 minutes
      Reduce the number of unique hostnames
      Leverage CNAMES
      media1.spacex.com, media2.spacex.com, etc
      Rough guideline is 2-4 for static files
    • Minify JavaScript
      Remove unnecessary characters to reduce size and improve load time
      Removes comments and unnecessary whitespace characters
      Can obfuscate as well
      myReallyLongVariableName becomes x
    • Avoid Redirects
      301 and 302 status codes
      Wasteful and slows down response times
      http://astrology.yahoo.com/astrologyresults in a 301 redirect to http://astrology.yahoo.com/astrology/
      Can use CNAMEs here as well
    • Remove Duplicates Scripts
      2 of 10 Top US websites contain at least one duplicate script
      Doubles execution time and blocking time
    • Configure ETags
      aka Entity Tags
      Sort of like a checksum for a file
      Used as a caching mechanism
      Be careful in web farm scenarios
      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195
      GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified
    • Make Ajax Cacheable
      Apply all the concepts to your ajax responses
      These could include xml results, web service calls/responses, etc.
    • More Rules
      Use GET for AJAX requests
      Post-load components
      Preload components
      Reduce the number of DOM elements
      Split components across domains
      Minimize the number of iframes
      No 404s
      Reduce cookie size
      Use cookie free domains for components
      Minimize DOM access
      Develop smart event handlers
      Choose <link> over @import
      Avoid filters
      Optimize images
      Optimize CSS sprites
      Don’t scale images in HTML
      Make favicon.ico small and cacheable
      Keep components under 25K
      Pack components into a multipart document
      Avoid empty image src
    • References
      http://getfirebug.com/
      http://developer.yahoo.com/yslow/
      http://developer.yahoo.com/performance/rules.html
      http://stevesouders.com/hpws/rules.php