fast
DESCRIPTION
fast. by. default. http:// stevesouders.com/docs/amazon-20091030.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/1.jpg)
fast
by
default
http://stevesouders.com/docs/amazon-20091030.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
![Page 2: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/2.jpg)
GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html
SproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523
Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation
Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709
Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster
HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
![Page 3: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/3.jpg)
Happy Halloween!
![Page 4: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/4.jpg)
![Page 5: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/5.jpg)
17% 83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
![Page 6: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/6.jpg)
14 RULES
1. MAKE FEWER HTTP REQUESTS2. USE A CDN3. ADD AN EXPIRES HEADER4. GZIP COMPONENTS5. PUT STYLESHEETS AT THE TOP6. PUT SCRIPTS AT THE BOTTOM7. AVOID CSS EXPRESSIONS8. MAKE JS AND CSS EXTERNAL9. REDUCE DNS LOOKUPS10.MINIFY JS11.AVOID REDIRECTS12.REMOVE DUPLICATE SCRIPTS13.CONFIGURE ETAGS14.MAKE AJAX CACHEABLE
![Page 7: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/7.jpg)
Even Faster Web SitesSplitting 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
![Page 8: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/8.jpg)
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
![Page 9: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/9.jpg)
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
![Page 10: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/10.jpg)
JavaScript
Functions Executed before onload
www.aol.com 115K 30%www.ebay.com 183K 44%www.facebook.com 1088K 9%www.google.com/search
15K 45%
search.live.com/results
17K 24%
www.msn.com 131K 31%www.myspace.com 297K 18%en.wikipedia.org/wiki 114K 32%www.yahoo.com 321K 13%www.youtube.com 240K 18%
26% avg252K avg
initial payload and execution
![Page 11: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/11.jpg)
splitting the initial payloadsplit 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 – how?
![Page 12: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/12.jpg)
MSNScripts and other resources downloaded in parallel! How? Secret sauce?!
var p=
g.getElementsByTagName("HEAD")[0];
var c=g.createElement("script");
c.type="text/javascript";
c.onreadystatechange=n;
c.onerror=c.onload=k;
c.src=e;
p.appendChild(c)
MSN.com: parallel scripts
![Page 13: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/13.jpg)
Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
![Page 14: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/14.jpg)
XHR Eval
script & page must be same domain
massage script?
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
![Page 15: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/15.jpg)
Script DOM Elementvar se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);
script & page domains can differ
no need to massage JavaScript
may not preserve execution order
![Page 16: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/16.jpg)
GMail Mobile<script type="text/javascript">
/*
var ...
*/
</script>
get script DOM element's text
remove comments
eval() when invoked
inline or iframe
awesome for prefetching JS that might (not) be needed
![Page 17: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/17.jpg)
SproutCorevar module1 = "...";
var module2 = "...";
eval() modules as needed
2nd
fastest downloading
2nd
fastest loading symbols
best alternative
![Page 18: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/18.jpg)
stylesheets load in parallel with other resources...
...unless followed by an inline scriptput inline JS above stylesheets or
below other resourcesuse Link, not @import
bad: stylesheet followed by inline script
![Page 19: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/19.jpg)
eBayMSNMySpaceWikipedia
mispositioned inline scripts
![Page 20: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/20.jpg)
onload
last resource
deferred ads!
![Page 21: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/21.jpg)
background-image: url(http://…/navPackedSprites_v12._V222883957_.png);
<img src="http://.../navPackedSprites_v12._V222883957_.png" style="display:none"/>
</style>
<script type="text/javascript">
var amznJQ = {
_a: [], _s: [], _d: [], _l: [], _o: [], _c: [], _cs: [],
addLogical: function() {
onload
last resource
![Page 22: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/22.jpg)
onload
last resource
var swmsMainContentImage_67691 =
'<img src="http://.../wl10_marquee_wk4-kindlelove._V228858619_.png">';
<!--[if (gte IE 5.5)&(lt IE 7)]>
<script type="text/javascript">
if (document.body.filters) {
swmsMainContentImage_67691 = '<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(en
![Page 23: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/23.jpg)
onload
last resource
three script blocks between
![Page 24: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/24.jpg)
onload
last resource
two script blocks between
![Page 25: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/25.jpg)
onload
last resource
loaded twice
![Page 26: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/26.jpg)
![Page 27: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/27.jpg)
![Page 28: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/28.jpg)
Google+ 0.4 sec
searches 0.6%
![Page 29: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/29.jpg)
Yahoo!+ 0.4 sec
traffic 5-9%
![Page 30: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/30.jpg)
Bing+2 sec
revenue 4.3%
![Page 31: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/31.jpg)
Shopzilla-5 sec
revenue 12%
hw 50%
![Page 32: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/32.jpg)
Netflixoutbound bandwidth
43%
![Page 33: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/33.jpg)
![Page 34: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/34.jpg)
fast performance =
better user experience
more traffic
more revenue
reduced costs
![Page 35: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/35.jpg)
so...
why don't more people do it?
![Page 36: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/36.jpg)
it's
too
hard!
![Page 37: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/37.jpg)
![Page 38: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/38.jpg)
"the hard is what makes it great""if it wasn't hard everyone would
do it"
![Page 39: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/39.jpg)
this year's theme:
Fast by Default
![Page 40: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/40.jpg)
Aptimize WAXconcatenate scripts
concatenate stylesheets
sprites, data: URIs
far future Expires
minify JS and CSS
automatically in real time
![Page 41: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/41.jpg)
WAX on:http://sharepoint.microsoft.com
# requests empty: 96 35
# requests primed: 50 9
scripts 7, stylesheets 12, images 25
pages faster: 46-64% empty, 15-53% primed
![Page 42: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/42.jpg)
Strangeloop Networks
"typical ecommerce site"
pages per visit: 11 16
time on site: 24 30 mins
conversions: 16%
order value: 5.5%
![Page 43: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/43.jpg)
Railsfar future Expires
concatenate scripts
domain sharding
configure ETags
in pipeline: async scripts, spriting, minification, flushing
![Page 44: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/44.jpg)
SproutCoreconcatenate scripts
concatenate stylesheets
versioning (future Expires)
stylesheets at the top
scripts at the bottom
minify JS & CSS
remove dupe scripts
![Page 45: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/45.jpg)
Why do some sites feel slow
?
![Page 46: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/46.jpg)
AOL
![Page 47: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/47.jpg)
![Page 48: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/48.jpg)
Best Buy
![Page 49: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/49.jpg)
CNN
![Page 50: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/50.jpg)
(lack of)
Progressive Rendering
![Page 51: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/51.jpg)
Search
![Page 52: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/52.jpg)
WebPagetest.org
VA, UK, NZ
IE7, IE8
Dial, DSL, FIOS
empty, empty & primed
quad corePat Meenan (AOL)
![Page 54: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/54.jpg)
Shopping
![Page 55: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/55.jpg)
Sports
![Page 56: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/56.jpg)
Progressive Enhancement
deliver HTML
defer JS
avoid DOM
decorate later
![Page 57: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/57.jpg)
Progressive Enhancement
Progressive Rendering
![Page 58: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/58.jpg)
news
![Page 59: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/59.jpg)
finds BG images
groups into sprites
generates sprite
recomputes BG pos
injects into page
http://spriteme.org/
![Page 60: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/60.jpg)
Browserscope
![Page 61: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/61.jpg)
HTTP Archive Format
(HAR)
![Page 62: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/62.jpg)
Velocity OnLine Conference
Dec 8, 9am-12:30pm PT
Hooman Beheshti (StrangeLoop)
Charles Jolley (SproutCore)
Matt Cutts (Google)
Artur Bergman (Wikia)
Damien Katz (CouchDB)
![Page 63: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/63.jpg)
focus on the frontendrun YSlow and Page Speed!progressive enhancement progressive rendering
takeaways
![Page 64: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/64.jpg)
SPEED is the next competitive advantageuse it...before someone else does
![Page 66: fast](https://reader035.vdocuments.us/reader035/viewer/2022070501/56816968550346895de131be/html5/thumbnails/66.jpg)
GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html
SproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
Google, Bing biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/8523
Yahoo! biz metrics: http://www.slideshare.net/stoyan/yslow-20-presentation
Shopzilla biz metrics: http://en.oreilly.com/velocity2009/public/schedule/detail/7709
Netflix outbound traffic: http://en.oreilly.com/velocity2008/public/schedule/detail/3632
Google, Bing charts: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
Aptimize WAX: http://blogs.msdn.com/sharepoint/archive/2009/09/28/how-we-did-it-speeding-up-sharepoint-microsoft-com.aspx
Strangeloop Networks: http://www.watchingwebsites.com/archives/proof-that-speeding-up-websites-improves-online-business
SproutCore: http://blog.sproutcore.com/post/196959232/how-sproutcore-makes-your-app-run-faster
HTTP Archive Format: http://www.stevesouders.com/blog/2009/10/19/http-archive-specification-firebug-and-httpwatch/
@font-face: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/