17% 83% igoogle, primed cache the importance of frontend performance 9%91% igoogle, empty cache
TRANSCRIPT
![Page 1: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/1.jpg)
![Page 2: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/2.jpg)
17%
83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
![Page 3: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/3.jpg)
![Page 4: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/4.jpg)
![Page 5: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/5.jpg)
![Page 6: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/6.jpg)
Sept 2007
![Page 7: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/7.jpg)
14 RULES
1. MAKE FEWER HTTP REQUESTS
2. 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 8: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/8.jpg)
June 2009
![Page 9: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/9.jpg)
Even Faster Web SitesSplitting the initial payloadLoading scripts without blockingCoupling asynchronous scriptsPositioning inline scriptsSharding dominant domainsFlushing the document earlyUsing iframes sparinglySimplifying CSS Selectors
Understanding Ajax performance..........Doug CrockfordCreating responsive web apps............Ben Galbraith, Dion
AlmaerWriting efficient JavaScript.............Nicholas ZakasScaling with Comet.....................Dylan SchiemannGoing beyond gzipping...............Tony GentilcoreOptimizing images...................Stoyan Stefanov, Nicole
Sullivan
![Page 10: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/10.jpg)
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
![Page 11: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/11.jpg)
scripts block
<script src="A.js"> blocks parallel downloads and rendering
7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4
9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3
![Page 12: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/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: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/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: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/14.jpg)
XHR Eval
script must have same domain as main page
must refactor 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: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/15.jpg)
XHR Injectionvar xhrObj = getXHRObject();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; };xhrObj.open('GET', 'A.js', true);xhrObj.send('');
script must have same domain as main page
![Page 16: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/16.jpg)
Script in Iframe<iframe src='A.html' width=0 height=0 frameborder=0 id=frame1></iframe>
iframe must have same domain as main page
must refactor script:// access iframe from main pagewindow.frames[0].createNewDiv();
// access main page from iframeparent.document.createElement('div');
![Page 17: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/17.jpg)
Script DOM Elementvar se = document.createElement('script');se.src = 'http://anydomain.com/A.js';document.getElementsByTagName('head')[0].appendChild(se);
script and main page domains can differ
no need to refactor JavaScript
![Page 18: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/18.jpg)
<script defer src='A.js'></script>
only supported in IE (just landed in FF 3.1)
script and main page domains can differ
no need to refactor JavaScript
Script Defer
![Page 19: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/19.jpg)
document.write("<script type='text/javascript' src='A.js'> <\/script>");
parallelization only works in IE
parallel downloads for scripts, nothing else
all document.writes must be in same script block
document.write Script Tag
![Page 20: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/20.jpg)
|| down-loads
domains can differ
existing
scripts
browser busy
ensures order
size (bytes
)
normal Script Src no yes yes IE,FF IE,FF ~50
XHR Eval IE,FF no no no no ~500
XHR Injection IE,FF no yes no no ~500
Script in Iframe IE,FF no no IE,FF no ~50
Script DOM Element
IE,FF yes yes FF FF ~200
Script Defer IE yes yes IE,FF IE ~50
document.write Script Tag
IE* yes yes IE,FF IE ~100
*Only other document.write scripts are downloaded in parallel (in the same script block).
Load Scripts Without Blocking
![Page 21: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/21.jpg)
XHR EvalXHR InjectionScript in iframeScript DOM ElementScript Defer
Script DOM ElementScript Defer
Script DOM Element
Script DOM Element (FF)Script Defer (IE)
XHR EvalXHR InjectionScript in iframeScript DOM Element (IE)
XHR InjectionXHR EvalScript DOM Element (IE)
Managed XHR InjectionManaged XHR EvalScript DOM Element
Managed XHR InjectionManaged XHR Eval
Script DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injection
Script DOM Element (FF)Script Defer (IE)Managed XHR EvalManaged XHR Injection
different domains same domains
no order
preserve order
no order
no busyshow busy
show busyno busy
preserve order
and the winner is...
![Page 22: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/22.jpg)
![Page 23: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/23.jpg)
asynchronous JS example: menu.js
<script type="text/javascript">var domscript = document.createElement('script');domscript.src = "menu.js"; document.getElementsByTagName('head')
[0].appendChild(domscript);
var aExamples = [ ['couple-normal.php', 'Normal Script Src'], ['couple-xhr-eval.php', 'XHR Eval'], ... ['managed-xhr.php', 'Managed XHR'] ];
function init() { EFWS.Menu.createMenu('examplesbtn', aExamples);}
init();</script>
script DOM element approach
![Page 24: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/24.jpg)
before
after
![Page 25: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/25.jpg)
|| down-loads
domains can differ
existing
scripts
browser busy
ensures order
size (bytes
)
normal Script Src no yes yes IE,FF IE,FF ~50
XHR Eval IE,FF no no no no ~500
XHR Injection IE,FF no yes no no ~500
Script in Iframe IE,FF no no IE,FF no ~50
Script DOM Element
IE,FF yes yes FF FF ~200
Script Defer IE yes yes IE,FF IE ~50
document.write Script Tag
IE* yes yes IE,FF IE ~100
*Only other document.write scripts are downloaded in parallel (in the same script block).
!IE
Loading Scripts Without Blocking
![Page 26: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/26.jpg)
what about
inlined code that depends on the script?
![Page 27: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/27.jpg)
coupling techniques
hardcoded callback
window onload
timer
degrading script tags
script onload
![Page 28: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/28.jpg)
technique 5: script onload<script type="text/javascript">var aExamples = [['couple-normal.php', 'Normal Script Src'], ...];
function init() { EFWS.Menu.createMenu('examplesbtn', aExamples);}
var domscript = document.createElement('script');domscript.src = "menu.js";
domscript.onloadDone = false;domscript.onload = function() { if ( ! domscript.onloadDone ) { init(); } domscript.onloadDone = true; };domscript.onreadystatechange = function() { if ( "loaded" === domscript.readyState ) { if ( ! domscript.onloadDone ) { init(); } domscript.onloadDone = true; }}
document.getElementsByTagName('head')[0].appendChild(domscript);</script>
pretty nice, medium complexity
![Page 29: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/29.jpg)
going beyond gzipping
Tony Gentilcore, Chapter 9, Even Faster Web Sites
Rule 4: Gzip Components from HPWSHTTP/1.1
request: Accept-Encoding: gzip,deflateresponse: Content-Encoding: gzip
Apache 2.x:AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
![Page 30: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/30.jpg)
benefits of gzipping
70% reduction in transfer sizenot just for HTML!!
all text: JavaScript, CSS, XML, JSONnot binary: images, PDF, Flash
![Page 31: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/31.jpg)
so what's the issue?
15% of your users get uncompressed responses
surprize! why?
old browsers? noNetscape Navigator 3 – 0.0%Netscape Communicator 4 – 0.1%Opera 3.5 – 0.0%IE <3 – 0.01%
clue: most prevalent in the Middle East
![Page 32: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/32.jpg)
who's stripping?proxy, A-V software Accept-Encoding header
Ad Muncher stripped
CA Internet Security Suite Accept-EncodXng: gzip, deflate
CEQURUX stripped
Citrix Application Firewall stripped
ISA 2006 stripped
McAfee Internet Security 6.0
XXXXXXXXXXXXXXX: +++++++++++++
Norton Internet Security 6.0
---------------: -------------
Novell iChain 2.3 stripped
Novell Client Firewall stripped
WebWasher stripped
ZoneAlarm Pro 5.5 XXXXXXXXXXXXXXX: XXXXXXXXXXXXXproxies and anti-virus software disable compression for easier response filtering
![Page 33: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/33.jpg)
what to do
don't assume compressiongo the extra mile to reduce response
size• event delegation (-5%)• relative URLs (-3%)• minify HTML, JavaScript, and CSS (-4%)• use CSS rules over inline styles (-1%)• alias long JavaScript symbol names (??)
Thanks, Tony!see Tony's chapter in Even Faster Web Sites
![Page 34: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/34.jpg)
homage to Open Source
UA Profiler
Cuzillion
Episodes
Hammerhead
SpriteMe
![Page 35: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/35.jpg)
![Page 36: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/36.jpg)
UA Profiler
tracks browser performance traits
http://stevesouders.com/ua/
go to the test page
your browser automatically walks through the tests (requires JS)
results recorded and shared publicly
currently 20K test results, 13K unique testers, 70 browsers
help out by running the test!
![Page 37: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/37.jpg)
![Page 38: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/38.jpg)
a tool for quickly constructing web pages to see how components interact
http://stevesouders.com/cuzillion/
Cuzillion'cuz there are a zillion pages to check
![Page 39: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/39.jpg)
![Page 40: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/40.jpg)
Episodes
framework for timing web sites• based on JavaScript timers• works on Ajax web apps• uses window.postMessage (multiple
listeners)• potential industry standard
http://stevesouders.com/episodes/
![Page 41: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/41.jpg)
Measuring Performance
Episodes
dev box synthetic testing
bucket testing
real user data
Hammerhead
![Page 42: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/42.jpg)
![Page 43: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/43.jpg)
Hammerheadmoving performance testing upstream
http://stevesouders.com/hammerhead/
Firebug extension
load M URLs N times, empty & primed cache
record average & median time
add'l features: export dataload time measurementmodal cache clearing
combine with bandwidth throttler
![Page 44: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/44.jpg)
![Page 45: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/45.jpg)
SpriteMedon't say "bite me!#*", say "SpriteMe!"
create sprites with ease
http://spriteme.org/
bookmarklet
sprite generator:
coolRunnings by Jared Hirschhttp://jaredhirsch.com/coolrunnings/about/
http://bitbucket.org/jared/coolrunnings/
![Page 46: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/46.jpg)
focus on the frontend
run YSlow (http://developer.yahoo.com/yslow)
and Page Speed! (http://code.google.com/speed/page-speed/)
speed matters
takeaways
![Page 47: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/47.jpg)
Bing:
Yahoo:
Google:
AOL:
Shopzilla:
1 http://en.oreilly.com/velocity2009/public/schedule/detail/8523 2 http://www.slideshare.net/stoyan/yslow-20-presentation3 http://en.oreilly.com/velocity2009/public/schedule/detail/75794 http://en.oreilly.com/velocity2009/public/schedule/detail/7709
+2000 ms -4.3% revenue/user1
+400 ms -5-9% full-page traffic2
+400 ms -0.59% searches/user1
fastest users +50% page views3
-5000 ms +7-12% revenue4
impact on revenue
![Page 48: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/48.jpg)
hardware – reduced loadShopzilla – 50% fewer servers
bandwidth – reduced response size
http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf
cost savings
![Page 49: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/49.jpg)
if you want better user experience more revenue reduced operating costs
the strategy is clear
Even Faster Web Sites
![Page 50: 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache](https://reader035.vdocuments.us/reader035/viewer/2022062715/56649d8d5503460f94a750dd/html5/thumbnails/50.jpg)
Steve [email protected]
http://stevesouders.com/docs/oscon-20090722.ppt
1:00 – book signing at Barnes & Noble
3:20 – free consulting at Google booth