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