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

*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

*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 Souderssouders@google.com

http://stevesouders.com/docs/oscon-20090722.ppt

1:00 – book signing at Barnes & Noble

3:20 – free consulting at Google booth