Post on 07-May-2015
description
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/astrology
results 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 scenariosHTTP/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/rul
es.html• http://stevesouders.com/hpws/rules.php