Even Faster Web Sites
This presentation is the property of its rightful owner.
Sponsored Links
1 / 50

Even Faster Web Sites PowerPoint PPT Presentation


  • 46 Views
  • Uploaded on
  • Presentation posted in: General

Even Faster Web Sites. http://stevesouders.com/docs/oscon-20090722.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. Sept 2007.

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

http://stevesouders.com/docs/oscon-20090722.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


Even faster web sites

Sept 2007


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 web sites

June 2009


Even faster web sites

Even Faster Web Sites

Splitting the initial payload

Loading scripts without blocking

Coupling asynchronous scripts

Positioning inline scripts

Sharding dominant domains

Flushing the document early

Using iframes sparingly

Simplifying CSS Selectors

Understanding Ajax performance..........Doug Crockford

Creating responsive web apps............Ben Galbraith, Dion Almaer

Writing efficient JavaScript.............Nicholas Zakas

Scaling with Comet.....................Dylan Schiemann

Going beyond gzipping...............Tony Gentilcore

Optimizing images...................Stoyan Stefanov, 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

9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

7 secs: IE 8, FF 3.5(?), Chr 2, Saf 4


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)


Loading scripts without blocking

Loading Scripts Without Blocking

XHR Eval

XHR Injection

Script in Iframe

Script DOM Element

Script Defer

document.write Script Tag


Xhr eval

XHR Eval

var xhrObj = 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


Xhr injection

XHR Injection

var 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

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');


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


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


Document write script tag

document.write Script Tag

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


Load scripts without blocking

Load Scripts Without Blocking

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


And the winner is

and the winner is...

XHR Eval

XHR Injection

Script in iframe

Script DOM Element

Script Defer

same domains

different domains

Script DOM Element

Script Defer

no order

preserve order

XHR Eval

XHR Injection

Script in iframe

Script DOM Element (IE)

Script DOM Element (FF)

Script Defer (IE)

Managed XHR Eval

Managed XHR Injection

no order

preserve order

Script DOM Element

no busy

show busy

Script DOM Element (FF)

Script Defer (IE)

Managed XHR Injection

Managed XHR Eval

Script DOM Element (FF)

Script Defer (IE)

Managed XHR Eval

Managed XHR Injection

no busy

show busy

XHR Injection

XHR Eval

Script DOM Element (IE)

Managed XHR Injection

Managed XHR Eval

Script DOM Element


Asynchronous js example menu js

asynchronous JS example: menu.js

script DOM element approach

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


Even faster web sites

before

after


Loading scripts without blocking1

Loading Scripts Without Blocking

!IE

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


Even faster web sites

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">

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

going beyond gzipping

Tony Gentilcore, Chapter 9, Even Faster Web Sites

Rule 4: Gzip Components from HPWS

HTTP/1.1

  • request: Accept-Encoding: gzip,deflate

  • response: Content-Encoding: gzip

    Apache 2.x:

    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript


Benefits of gzipping

benefits of gzipping

70% reduction in transfer size

not just for HTML!!

  • all text: JavaScript, CSS, XML, JSON

  • not binary: images, PDF, Flash


So what s the issue

so what's the issue?

15% of your users get uncompressed responses

surprize! why?

old browsers? no

  • Netscape 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

who's stripping?

proxies and anti-virus software disable compression for easier response filtering


What to do

what to do

Thanks, Tony!

see Tony's chapter in Even Faster Web Sites

don't assume compression

go 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 (??)


Homage to open source

homage to Open Source

UA Profiler

Cuzillion

Episodes

Hammerhead

SpriteMe


Ua profiler

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!


Cuzillion cuz there are a zillion pages to check

Cuzillion'cuz there are a zillion pages to check

a tool for quickly constructing web pages to see how components interact

http://stevesouders.com/cuzillion/


Episodes

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

Measuring Performance

  • Episodes

dev box

synthetic testing

bucket testing

real user data

Hammerhead


Hammerhead moving performance testing upstream

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 data

    load time measurement

    modal cache clearing

  • combine with bandwidth throttler


Even faster web sites

SpriteMedon't say "bite me!#*", say "SpriteMe!"

  • create sprites with ease

  • http://spriteme.org/

  • bookmarklet

  • sprite generator:

    • coolRunnings by Jared Hirsch

    • http://jaredhirsch.com/coolrunnings/about/

    • http://bitbucket.org/jared/coolrunnings/


Takeaways

takeaways

focus on the frontend

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

and Page Speed! (http://code.google.com/speed/page-speed/)

speed matters


Impact on revenue

impact on revenue

+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

1 http://en.oreilly.com/velocity2009/public/schedule/detail/8523

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

3 http://en.oreilly.com/velocity2009/public/schedule/detail/7579

4 http://en.oreilly.com/velocity2009/public/schedule/detail/7709

Bing:

Yahoo:

Google:

AOL:

Shopzilla:


Cost savings

cost savings

hardware – reduced load

  • Shopzilla – 50% fewer servers

    bandwidth – reduced response size

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


Even faster web sites

if you want

  • better user experience

  • more revenue

  • reduced operating costs

    the strategy is clear

    Even Faster Web Sites


Even faster web sites

1:00 – book signing at Barnes & Noble

3:20 – free consulting at Google booth

Steve Souders

[email protected]

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


  • Login