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