High Performance Web Sites 14 rules for faster-loading pages
High Performance Web Sites
54
High Performance Web Sites @souders stevesouders.com/docs/intuit-20120504.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
description
High Performance Web Sites. @ souders stevesouders.com /docs /intuit- 20120504 . pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. YSlow. Cuzillion. SpriteMe. Hammerhead. 2004. - PowerPoint PPT Presentation
Transcript of High Performance Web Sites
High
Performance
Web
Sites
@soudersstevesouders.com/docs/intuit-20120504.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
Cuzillion SpriteMeYSlow Hammerhead
2004
#1. Speed:
“First and foremost, we believe that speed is
more than a feature. Speed is the most important
feature.”
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/
en.oreilly.com/velocity2009/public/schedule/detail/8523
en.oreilly.com/velocity2009/public/schedule/detail/8523
Yahoo!
0.4 sec slower
traffic 5-9%slideshare.net/stoyan/yslow-20-presentationslideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
blog.mozilla.com/metrics/category/website-optimization/
blog.mozilla.com/metrics/category/website-optimization/
…shaved 2.2 seconds off the average page load
time and increased download conversions by
15.4%!
en.oreilly.com/velocity2009/public/schedule/detail/7709
en.oreilly.com/velocity2008/public/schedule/detail/3632
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377
Site speed in search rank
Screen shot of blog post…we've decided to take site speed into account in
our search rankings.
googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
drives traffic
improves UX
increases revenue
reduces costs
Web
Performance
OptimizationWPO
backend frontend
“waterfall chart”
Top 10
24% - backend
76% - frontend
9,990+
8% - backend
92% - frontend
Intuit
8% - backend
92% - frontend
80-90% of the end-user response time is spent
on the frontend. Start there.
• greater potential
• simpler
• proven to work
Performance Golden Rule
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. USE A CDN
3. ADD AN EXPIRES HEADER
4. GZIP COMPONENTS
5. PUT STYLESHEETS AT THE TOP
6. PUT SCRIPTS AT THE BOTTOM
7. AVOID CSS EXPRESSIONS
8. MAKE JS AND CSS EXTERNAL
9. REDUCE DNS LOOKUPS
10. MINIFY JS
11. AVOID REDIRECTS
12. REMOVE DUPLICATE SCRIPTS
13. CONFIGURE ETAGS
14. MAKE AJAX CACHEABLE
Splitting the initial payload
Loading scripts without blocking
Coupling asynchronous scripts
Positioning inline scripts
Sharding dominant domains
Flushing the document early
Using iframes sparingly
Simplifying CSS Selectors
Understanding Ajax performance Doug Crockford
Creating responsive web apps Ben Galbraith, Dion Almaer
Writing efficient JavaScript Nicholas Zakas
Scaling with Comet Dylan Schiemann
Going beyond gzipping Tony Gentilcore
Optimizing images Stoyan Stefanov, Nicole Sullivan
Rule 1: Make Fewer HTTP Requests
avg website: 86 HTTP requests, 966 kB*
each HTTP request has overhead – even with persistent connections
is it possible to reduce HTTP requests without reducing richness?
Yes!combine JS, CSSCSS spritesinline images
* Feb 1 2012: http://httparchive.org/trends.php
Rule 3: Add an Expires Header
expiration date determines freshnessuse Expires and Cache-Control: max-agemust rev filenames
GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
Accept-Encoding: gzip,deflate
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2011 21:14:35 GMT
Content-Length: 2066
Content-Encoding: gzip
Expires: Mon, 12 Oct 2012 14:57:34 GMT
Cache-Control: max-age=31536000
XmoÛHþ\ÿFÖvã*wØoq...
Rule 3: Add an Expires Header
Apache:<FilesMatch "\.(png|gif|jpg|js|css|ico)$"> ExpiresActive On ExpiresDefault "access plus 10 years" Header set ETag ""</FilesMatch>
domain sharding
6 connections per
hostname (generally)
What’s the #1 cause
of slow web pages?
JAVASCRIPT!
scripts block<script src="A.js"> blocks parallel downloads and rendering
7 secs: IE 8+, FF 3.5+, Chr 3+, Saf 4+
9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
JavaScript
Functions Executed before onload
www.aol.com 324 K 30%www.ebay.com 234 K 34%www.facebook.com 553 K 7%www.google.com/search
21 K ??%
www.bing.com/search 10 K 35%www.msn.com 152 K 55%www.myspace.com 248 K 29%en.wikipedia.org/wiki 99 K 19%www.yahoo.com 381 K 33%www.youtube.com 274 K 16% 29% avg229 K avg
initial payload and execution
splitting the initial payload
split your JavaScript between what's needed to render
the page and everything else
defer "everything else"
split manually (Page Speed), automatically (Microsoft
Doloto)
load scripts without blocking
1995: scripts in HEAD<head><script src=‘a.js’></script></head>
blocks other downloads (IE 6-7, images in IE, iframes)
downloaded sequentially (IE 6-7)blocks rendering during download &
parse-execute
2007: move scripts to bottom
...<script src=‘a.js’></script></body>
doesn’t block other downloadsdownloaded sequentially in IE 6-7blocks rendering during download &
parse-execute
2009: load scripts asyncvar se = document.createElement(‘script’);
se.src = ‘a.js’;document.getElementsByTagName(‘head’)[0].appendChild(se);
doesn’t block other downloadsdownloaded in parallel (all browsers)blocks rendering during parse-
execute
window.setTimeout(function(){ var a=document.createElement("script"); a.src="/extern_js/f/CgJlbhz8US8_w.js"; (document.getElementById("xjsd")|| document.body).appendChild(a);},0);
Google Search
Bootloader.setResourceMap({"CDYbm": {"name":"js\/32kskxvl4c8w0848.pkg.js", "type":"js", "src":"http:\/\/...\1fakc64i.js"}, ...});var c=a ? document.body : document.getElementsByTagName('head')[0];
var d=document.createElement('script');d.type='text/javascript';d.src=f;c.appendChild(d);
YUI.presentation.lazyScriptList = ["http://l.yimg.com/zz/combo?...13 scripts!..."];
d = w.document; h = d.getElementsByTagName("head")[0];n = d.createElement("script"),n.src = url;h.appendChild(n);
Yahoo! FP
var c=document.createElement("script");c.setAttribute("src",b);c.async=k;var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(c,d);
YouTube
var head= document.getElementsByTagName("head")[0];var script=document.createElement("script");script.src=s.url;script.onload=script.onreadystatechange= function(){...};head.appendChild(script);
Amazon
<script src="/js/jquery-1.4.2.js"></script></body></html>
subsequent page:<script src="/js/jquery-1.4.2.js"></script><script src="/js/toChecklist.js"></script><script src="/js/tocs.js"></script></body></html>
Craigslist
prefetching?
<body><script src="http://ir.ebaystatic.com/v4js/......<script src="http://ir.ebaystatic.com/v4js/......<script src="http://ir.ebaystatic.com/v4js/...</body>
eBay
(function loadrunner(E){ ... var e=V.createElement("script"); e.type="text/javascript"; e.async=true; e.onload=g; e.onreadystatechange=function(){...}; f=V.createElement("head"); f.insertBefore(e,f.firstChild)
var a=_d.createElement("script");a.type="text/javascript";a.src=b;_d.getElementsByTagName("head")[0].appendChild(a);
Bing
script=document.createElement('script');script.setAttribute('src',src);script.setAttribute('type','text/javascript');if($.isFunction(callback)){...}if(window.opera){$(function(){document.body.appendChild(script);});}
else{head=document.getElementsByTagName('head')[0];
(document.body||head).appendChild(script);}
Wikipedia
www.intuit.com
www.webpagetest.org/result/120503_RC_46SJA/
125
1,847
1.587
9.651
requests
kB
seconds start render
seconds PLTmbox.js docwrites /mbox/standard blocks ie7.css blocks
rendering
don’t docwrite scripts
domain sharding
PNGs take 3-6 seconds to download
quickbooks.intuit.com
www.webpagetest.org/result/120503_B9_46SJB/
106
632
1.265
5.740
requests
kB
seconds start render
seconds PLTmbox.js docwrites /mbox/standard blocks ie7.css blocks
rendering
don’t docwrite scripts
domain sharding
add caching headers
turbotax.intuit.com
www.webpagetest.org/result/120503_ZV_46SJC/
112
438
2.412
3.523
requests
kB
seconds start render
seconds PLTrendering extremely blocked
concat scripts, concat stylesheets
don’t mix inline & external scripts
don’t docwrite scripts
domain sharding
add caching headers
sprites
turbotax.intuit.com
www.webpagetest.org/compare
this is turbotax
this is turbotax on Page Speed
speed mattersfocus on frontendadopt best practices – caching, domain sharding, async scripts, !docwrite
WebPagetest, Velocity, PerfPlanet
takeaways
Steve Souders@souders
stevesouders.com/docs/intuit-20120504.pptx
