Creating high-performance-web-sites

  • 1,007 views
Uploaded on

Brief overview of Steve Souders web optimization techniques.

Brief overview of Steve Souders web optimization techniques.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,007
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
28
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Creating High Performance Web Sites
  • 2. Agenda
    Steve Souders
    My Experiences
    Tools
    The Rules
    References
    Questions?
  • 3. Steve Souders
    Works at Google
    Author
    Creator of YSlow
    Teacher at Stanford
    Former Chief Performance Yahoo!
    Startup Veteran
  • 4. My Experiences
    1.5 Million Unique Users
    10 Million Page Views
    .Net Technology Stack
    Ektron
    Cachefly CDN
  • 5. Tools
    Firefox
    + Firebug
    + YSlow
    Chrome
    IE Dev Tools
    Fiddler
    Microsoft Network Monitor
  • 10. 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
  • 11. User Perception
    User perception is more relevant than actual unload-to-onload response time
    Varies from one web page to the next
  • 12. 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
  • 13. Make Fewer HTTP Requests
    Combined files
    CSS sprites
    Image maps
    Inline images
    In a stylesheet
  • 14. Use a Content Delivery Network
    Akamai
    EdgeCast
    Level3
    Static content
    Offload traffic
    Locate content geographically closer to users
  • 15. 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
  • 16. Gzip Components
    Web server compression of files being served
    Generally reduces size by 70%
    Supported by about 90% browsers used today
  • 17. Put Stylesheets at the Top
    Makes page appear to render faster
    Allows page to render progressively
  • 18. Put Scripts at the Bottom
    Scripts block parallel downloads
    Even across hostnames
  • 19. Avoid CSS Expressions
    Not commonly used
    Deprecated starting with IE8
    background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
  • 20. Make JavaScript and CSS External
    Improves cacheability
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. Remove Duplicates Scripts
    2 of 10 Top US websites contain at least one duplicate script
    Doubles execution time and blocking time
  • 25. 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
  • 26. Make Ajax Cacheable
    Apply all the concepts to your ajax responses
    These could include xml results, web service calls/responses, etc.
  • 27. 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
  • 28. References
    http://getfirebug.com/
    http://developer.yahoo.com/yslow/
    http://developer.yahoo.com/performance/rules.html
    http://stevesouders.com/hpws/rules.php