even faster web sites l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Even Faster Web Sites PowerPoint Presentation
Download Presentation
Even Faster Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 47

Even Faster Web Sites - PowerPoint PPT Presentation


  • 515 Views
  • Uploaded on

Even Faster Web Sites Steve Souders souders@google.com 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

Even Faster Web Sites


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

Even Faster Web Sites

Steve Souders

souders@google.com

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

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

the importance of frontend performance
the importance of frontend performance

9%

91%

17%

83%

iGoogle, primed cache

iGoogle, empty cache

14 rules

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
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
why focus on JavaScript?

Yahoo!

Wikipedia

eBay

AOL

MySpace

YouTube

Facebook

scripts block
scripts block

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

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

msn com parallel scripts
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
asynchronous script loading

XHR Eval

XHR Injection

Script in Iframe

Script DOM Element

Script Defer

document.write Script Tag

xhr eval
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
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
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
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
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
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
load scripts without blocking

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

asynchronous js example menu js
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

before

after

load scripts without blocking26
load scripts without blocking

!IE

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

slide27

what about

inlined code

that depends on the script?

coupling techniques
coupling techniques

hardcoded callback

window onload

timer

degrading script tags

script onload

technique 5 script onload
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
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
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
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
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
don't scatter inline scripts

MSN

Wikipedia

eBay

MySpace

iframes most expensive dom element
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
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
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
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
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
iframes: no free connections

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

parent

iframe

flush the document early
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
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
takeaways

focus on the frontend

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

this year's focus: JavaScript

speed matters

impact on revenue
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
cost savings

hardware – reduced load

bandwidth – reduced response size

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

slide46
if you want

better user experience

more revenue

reduced operating expenses

the strategy is clear

Even Faster Web Sites

slide47

Steve Souders

souders@google.com

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