slide1
Download
Skip this Video
Download Presentation
Even Faster Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 50

Even Faster Web Sites - PowerPoint PPT Presentation


  • 64 Views
  • Uploaded on

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.

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' - steel-monroe


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
slide1

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

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

slide24

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

slide26

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
slide45

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

slide49
if you want
  • better user experience
  • more revenue
  • reduced operating costs

the strategy is clear

Even Faster Web Sites

slide50

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

ad