Even faster web sites
Download
1 / 47

Even Faster Web Sites - PowerPoint PPT Presentation


  • 497 Views
  • Updated On :

Even Faster Web Sites Steve Souders [email protected] http://stevesouders.com/docs/sxsw-20090314.ppt Disclaimer: This content does not necessarily reflect the opinions of my employer. the importance of frontend performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Even Faster Web Sites' - johana


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Even faster web sites l.jpg

Even Faster Web Sites

Steve Souders

[email protected]

http://stevesouders.com/docs/sxsw-20090314.ppt

Disclaimer: This content does not necessarily reflect the opinions of my employer.


The importance of frontend performance l.jpg
the importance of frontend performance

9%

91%

17%

83%

iGoogle, primed cache

iGoogle, empty cache



14 rules l.jpg

  • Make fewer HTTP requests

  • Use a CDN

  • Add an Expires header

  • Gzip components

  • Put stylesheets at the top

  • Put scripts at the bottom

  • Avoid CSS expressions

  • Make JS and CSS external

  • Reduce DNS lookups

  • Minify JS

  • Avoid redirects

  • Remove duplicate scripts

  • Configure ETags

  • Make AJAX cacheable

14 Rules





Even faster websites l.jpg
Even Faster Websites

Split the initial payload

Load scripts without blocking

Couple asynchronous scripts

Don't scatter inline scripts

Split the dominant domain

Flush the document early

Use iframes sparingly

Simplify CSS Selectors

Ajax performance (Doug Crockford)

Writing efficient JavaScript (Nicholas Zakas)

Creating responsive web apps (Ben Galbraith, Dion Almaer)

Comet (Dylan Schiemann)

Beyond Gzipping (Tony Gentilcore)

Optimize Images (StoyanStefanov, Nicole Sullivan)


Why focus on javascript l.jpg
why focus on JavaScript?

Yahoo!

Wikipedia

eBay

AOL

MySpace

YouTube

Facebook


Scripts block l.jpg
scripts block

<script src="A.js"> blocks parallel downloads and rendering

http://stevesouders.com/cuzillion/?ex=10008


Msn com parallel scripts l.jpg
MSN.com: parallel scripts

MSN

Scripts 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)


Asynchronous script loading l.jpg
asynchronous script loading

XHR Eval

XHR Injection

Script in Iframe

Script DOM Element

Script Defer

document.write Script Tag


Xhr eval l.jpg
XHR Eval

varxhrObj = getXHRObject();

xhrObj.onreadystatechange =

function() {

if ( xhrObj.readyState != 4 ) return;

eval(xhrObj.responseText);

};

xhrObj.open('GET', 'A.js', true);

xhrObj.send('');

script must have same domain as main page

must refactor script

http://stevesouders.com/cuzillion/?ex=10009


Xhr injection l.jpg
XHR Injection

varxhrObj = 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

http://stevesouders.com/cuzillion/?ex=10015


Script in iframe l.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 page

    • window.frames[0].createNewDiv();

    • // access main page from iframe

    • parent.document.createElement('div');

http://stevesouders.com/cuzillion/?ex=10012


Script dom element l.jpg
Script DOM Element

var 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

http://stevesouders.com/cuzillion/?ex=10010


Script defer l.jpg
Script Defer

<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

http://stevesouders.com/cuzillion/?ex=10013


Document write script tag l.jpg
document.write Script Tag

document.write("<scr" +

"ipt type='text/javascript' src='A.js'>" + "</scr" + "ipt>");

parallelization only works in IE

parallel downloads for scripts, nothing else

all document.writes must be in same script block

http://stevesouders.com/cuzillion/?ex=10014


Load scripts without blocking l.jpg
load scripts without blocking

*Only other document.write scripts are downloaded in parallel (in the same script block).


Asynchronous js example menu js l.jpg
asynchronous JS example: menu.js

script DOM element approach

<script type="text/javascript">

vardomscript = document.createElement('script');

domscript.src = "menu.js";

document.getElementsByTagName('head')[0].appendChild(domscript);

varaExamples =

[

['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>


Slide25 l.jpg

before

after


Load scripts without blocking26 l.jpg
load scripts without blocking

!IE

*Only other document.write scripts are downloaded in parallel (in the same script block).


Slide27 l.jpg

what about

inlined code

that depends on the script?


Coupling techniques l.jpg
coupling techniques

hardcoded callback

window onload

timer

degrading script tags

script onload


Technique 5 script onload l.jpg
technique 5: script onload

<script type="text/javascript">

varaExamples = [['couple-normal.php', 'Normal Script Src'], ...];

function init() {

EFWS.Menu.createMenu('examplesbtn', aExamples);

}

vardomscript = 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


Case study google analytics l.jpg
case study: Google Analytics

recommended pattern:1

<script type="text/javascript">

vargaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

varpageTracker = _gat._getTracker("UA-xxxxxx-x");

pageTracker._trackPageview();

</script>

document.write Script Tag approach blocks other resources

1http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55488


Case study dojox analytics urchin 1 l.jpg
case study: dojox.analytics.Urchin1

_loadGA: function(){

vargaHost = ("https:" == document.location.protocol) ?

"https://ssl." : "http://www.";

dojo.create('script', {

src: gaHost + "google-analytics.com/ga.js"

}, dojo.doc.getElementsByTagName("head")[0]);

setTimeout(dojo.hitch(this, "_checkGA"), this.loadInterval);

},

_checkGA: function(){

setTimeout(dojo.hitch(this, !window["_gat"] ? "_checkGA" : "_gotGA"), this.loadInterval);

},

_gotGA: function(){

this.tracker = _gat._getTracker(this.acct); ...

}

Script DOM Element approach

"timer" coupling technique (script onload better)

1http://docs.dojocampus.org/dojox/analytics/Urchin


Asynchronous loading coupling l.jpg
asynchronous loading & coupling

async technique: Script DOM Element

  • easy, cross-browser

  • doesn't ensure script order

    coupling technique: script onload

  • fairly easy, cross-browser

  • ensures execution order for external script and inlined code


Bad stylesheet followed by inline script l.jpg
bad: stylesheet followed by inline script

browsers download stylesheets in parallel with other resources that follow...

...unless the stylesheet is followed by an inline script

http://stevesouders.com/cuzillion/?ex=10021

best to move inline scripts above stylesheets or below other resources

use Link, not @import


Don t scatter inline scripts l.jpg
don't scatter inline scripts

MSN

Wikipedia

eBay

MySpace


Iframes most expensive dom element l.jpg
iframes: most expensive DOM element

load 100 empty elements of each type

tested in all major browsers1

1IE 6, 7, 8; FF 2, 3.0, 3.1b2; Safari 3.2, 4; Opera 9.63, 10; Chrome 1.0, 2.0


Iframes block onload l.jpg
iframes block onload

parent's onload doesn't fire until iframe and all its components are downloaded

workaround for Safari and Chrome: set iframe src in JavaScript

<iframe id=iframe1 src=""></iframe>

<script type="text/javascript">

document.getElementById('iframe1').src="url";

</script>


Scripts block iframe l.jpg
scripts block iframe

IE

script

no surprise – scripts in the parent block the iframe from loading

Firefox

script

script

Safari

Chrome

Opera


Stylesheets block iframe ie ff l.jpg
stylesheets block iframe (IE, FF)

IE

stylesheet

surprise – stylesheets in the parent block the iframe or its resources in IE & Firefox

Firefox

stylesheet

stylesheet

Safari

Chrome

Opera


Stylesheets after iframe still block ff l.jpg
stylesheets after iframe still block (FF)

IE

stylesheet

surprise – even moving the stylesheet after the iframe still causes the iframe's resources to be blocked in Firefox

Firefox

stylesheet

Safari

Chrome

Opera

stylesheet


Iframes no free connections l.jpg
iframes: no free connections

iframe shares connection pool with parent (here – 2 connections per server in IE 7)

parent

iframe


Flush the document early l.jpg
flush the document early

gotchas:

  • PHP output_buffering – ob_flush()

  • Transfer-Encoding: chunked

  • gzip – Apache's DeflateBufferSize before 2.2.8

  • proxies and anti-virus software

  • browsers – Safari (1K), Chrome (2K)

    other languages:

    $| or FileHandleautoflush (Perl), flush (Python), ios.flush (Ruby)

html

image

image

script

call PHP's flush()

html

image

image

script


Flushing and domain blocking l.jpg
flushing and domain blocking

you might need to move flushed resources to a domain different from the HTML doc

html

image

image

script

blocked by HTML document

html

image

image

script

different domains

case study: Google search

google

image

image

script

image

204


Takeaways l.jpg
takeaways

focus on the frontend

run YSlow: http://developer.yahoo.com/yslow

this year's focus: JavaScript

speed matters


Impact on revenue l.jpg
impact on revenue

Google:

Yahoo:

Amazon:

+500 ms  -20% traffic1

+400 ms  -5-9% full-page traffic2

+100 ms  -1% sales1

1 http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt

2 http://www.slideshare.net/stoyan/yslow-20-presentation


Cost savings l.jpg
cost savings

hardware – reduced load

bandwidth – reduced response size

http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf


Slide46 l.jpg

if you want

better user experience

more revenue

reduced operating expenses

the strategy is clear

Even Faster Web Sites


Slide47 l.jpg

Steve Souders

[email protected]

http://stevesouders.com/docs/sxsw-20090314.ppt


ad