Date post: | 22-Dec-2015 |
Category: |
Documents |
Upload: | douglas-wilkinson |
View: | 222 times |
Download: | 0 times |
17%
83%
iGoogle, primed cache
the importance of frontend performance
9% 91%
iGoogle, empty cache
Sept 2007
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
June 2009
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
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
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
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
Loading Scripts Without Blocking
XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
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('');
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
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');
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
<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
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
|| 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
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...
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
before
after
|| 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
what about
inlined code that depends on the script?
coupling techniques
hardcoded callback
window onload
timer
degrading script tags
script onload
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
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
benefits of gzipping
70% reduction in transfer sizenot just for HTML!!
all text: JavaScript, CSS, XML, JSONnot binary: images, PDF, Flash
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
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
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
homage to Open Source
UA Profiler
Cuzillion
Episodes
Hammerhead
SpriteMe
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!
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
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/
Measuring Performance
Episodes
dev box synthetic testing
bucket testing
real user data
Hammerhead
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
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/
focus on the frontend
run YSlow (http://developer.yahoo.com/yslow)
and Page Speed! (http://code.google.com/speed/page-speed/)
speed matters
takeaways
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
hardware – reduced loadShopzilla – 50% fewer servers
bandwidth – reduced response size
http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf
cost savings
if you want better user experience more revenue reduced operating costs
the strategy is clear
Even Faster Web Sites
Steve [email protected]
http://stevesouders.com/docs/oscon-20090722.ppt
1:00 – book signing at Barnes & Noble
3:20 – free consulting at Google booth