Slide1 l.jpg
This presentation is the property of its rightful owner.
Sponsored Links
1 / 63

Even Faster Web Sites PowerPoint PPT Presentation


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

Even Faster Web Sites. http://stevesouders.com/docs/velocity-20090622.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. time spent on the frontend.

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


Slide1 l.jpg

Even Faster Web Sites

http://stevesouders.com/docs/velocity-20090622.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


Time spent on the frontend l.jpg

time spent on the frontend

April 2008


The performance golden rule l.jpg

The Performance Golden Rule

80-90% of the end-user response time is

spent on the frontend. Start there.

greater potential for improvement

simpler

proven to work


Slide8 l.jpg

Sept 2007


Slide9 l.jpg

June 2009


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 web sites l.jpg

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

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

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

What's Cuzillion?


Slide14 l.jpg

Splitting the Initial Payload

26% avg

252K avg


Splitting the initial payload l.jpg

Splitting the Initial Payload

split your JavaScript between what's needed to render the page and everything else

load "everything else" after the page is rendered

separate manually (Firebug); tools needed to automate this (Doloto from Microsoft)

load scripts without blocking – how?


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)


Loading scripts without blocking l.jpg

Loading Scripts Without Blocking

XHR Eval

XHR Injection

Script in Iframe

Script DOM Element

Script Defer

document.write Script Tag


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


Browser busy indicators l.jpg

browser busy indicators


Loading scripts without blocking20 l.jpg

Loading Scripts Without Blocking

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


And the winner is l.jpg

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


Slide24 l.jpg

before

after


Loading scripts without blocking25 l.jpg

Loading Scripts Without Blocking

!IE

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


Slide26 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


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

  • multiple interdependent external and inline scripts:

    • much more complex (see hidden slides)

    • concatenate your external scripts into one!


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


Positioning inline scripts l.jpg

Positioning Inline Scripts

MSN

Wikipedia

eBay

MySpace


Sharding dominant domains l.jpg

Sharding Dominant Domains

  • but Rule 9 says "Reduce DNS lookups"?!

    • remove DNS lookups that aren't heavily used

    • split domains that are on the critical path

  • how find "critical path"?


Www yahoo com l.jpg

www.yahoo.com


News google com l.jpg

news.google.com

http://news.google.com


Connections per server by browser l.jpg

connections per server by browser

  • newer browsers open more connections*

  • best to shard across 2-4 domains**

* http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/

** http://yuiblog.com/blog/2007/04/11/performance-research-part-4/


Flushing the document early l.jpg

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

    • HTML document blocks resources

  • other languages:

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

html

image

image

script

call PHP's flush()

html

image

image

script


Successful flushing l.jpg

successful flushing

  • Google Search

  • external resource downloaded early

  • content visible to the user

http://www.google.com/images/nav_logo4.png

google

image

image

script

image

204


Using iframes sparingly l.jpg

Using Iframes Sparingly

  • most expensive DOM element

  • blocks parent's onload

  • workaround: set iframe src via setTimeout

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

<script type="text/javascript">

function setSrc() {

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

}

setTimeout(setSrc, 0);

</script>


Types of css selectors l.jpg

types of CSS selectors

  • ID selectors: #toc {}

  • class selectors: .chapter {}

  • type selectors: A {}

  • adjacent sibling selectors: H1 + #toc {}

  • child selectors: #toc > LI {}

  • descendant selectors: #toc A {}

  • universal selectors: * {}

  • attribute selectors: href="#index"] {}

  • psuedo classes and elements: A:hover {}


Writing efficient css l.jpg

writing efficient CSS

https://developer.mozilla.org/en/Writing_Efficient_CSS

  • "The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch."

  • #toc > LI { font-weight: bold; }

    find every LI whose parent is id="toc"

  • #toc A { color: #444; }

    find every A and climb its ancestors until id="toc" or DOM root (!) is found


Real world levels of css l.jpg

real world levels of CSS


Testing typical css l.jpg

testing typical CSS

1K rules (vs. 20K)

same amount of CSS in all test pages

30 ms avg delta

  • "costly"selectors aren't always costly (at typical levels)

  • are these selectors "costly"?

    • DIV DIVDIV P A.class0007 { ... }

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/


Testing expensive selectors l.jpg

testing expensive selectors

1K rules (vs. 20K)

same amount of CSS in all test pages

2126 ms avg delta!

truly expensive selector

A.class0007 * { ... }

  • compare to:

    • DIV DIVDIV P A.class0007 { ... }

      the key is the key selector – the rightmost argument


Simplifying css selectors l.jpg

Simplifying CSS Selectors

  • efficient CSS comes at a cost – page weight

  • focus optimization on selectors where the key selector matches many elements

  • reduce the number of selectors


Performance tools l.jpg

Performance Tools

  • HttpWatch http://www.httpwatch.com/

  • Firebug http://getfirebug.com/

  • Page Speed http://code.google.com/speed/page-speed/

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

  • Smush.ithttp://smush.it/

  • CSS Sprite Generator http://spritegen.website-performance.org/

  • SpriteMehttp://spriteme.org/ (in progress)

  • Hammerheadhttp://stevesouders.com/hammerhead/

  • Cuzillion http://cuzillion.com/


Performance analyzers hpws rules l.jpg

Performance Analyzers: HPWS rules


Performance analyzers efws rules l.jpg

Performance Analyzers: EFWS rules


Performance analyzers other rules l.jpg

Performance Analyzers: other rules


Top 10 performance l.jpg

Top 10 Performance

* YSlow wouldn't start.


Wikipedia l.jpg

Wikipedia

  • combine 6 scripts, 8 stylesheets

  • add Expires header

  • minify JavaScript, save 39K (36%)

  • avoid inline script after stylesheet

  • 31K (41%) unused CSS

  • remove ETags


Yahoo l.jpg

Yahoo!

  • shard l.yimg.com

  • 46K (49%) unused CSS

  • ~90 very inefficient CSS selectors


Slide52 l.jpg

1

www.ebay.com

2

3

4

4

4

5

4

  • long HTML doc response

  • flush (good)

  • inline script blocks .js

    • varpageName='HomePagePortal';

  • scripts block

  • ads .js non-blocking (good)

  • 26 bg images – no sprites

  • sharded domains – pics & rtm (good)

  • compress images by 20%

  • thumbs load slowly – HTTP/1.0?

  • remove ETags (?)

  • ~40 inefficient CSS selectors

    • .playgrnd * {}

6

7

8

9


Slide53 l.jpg

AOL

  • shard portal.aolcdn.com

  • combine 8 scripts

  • simplify CSS selectors

  • avoid inline script after stylesheet

    • jQueryEnabled = true;

  • remove 97K (49%) unused CSS


Facebook l.jpg

Facebook

  • combine 13 scripts, 6 stylesheets

  • sprite 31 background images

  • reduce images by 106K (44%)

  • put stylesheets above scripts

  • remove 102K (50%) unused CSS


Msn com l.jpg

MSN.com

  • combine 13 scripts

  • sprite 26 background images

  • put stylesheets above scripts

  • avoid inline script after stylesheet


Youtube l.jpg

YouTube

  • add Expires header (can't?)

  • minify JavaScript, save ~29K (14%


Cnet performance analysis l.jpg

CNet Performance Analysis

requests: 107

load time: 3.7 secs

xfer size: 436K

YSlow: F (48)

  • cool

    • flushed document

    • HTTP/1.0 downgrade

  • opportunities

    • load oreo.moo.rb.combined.jsasync

    • split i.i.com.com across two domains

    • concatenate 10 scripts

    • sprite 25 CSS background images

    • 30 resources with short Expires

    • 62% (62K) of CSS not used


Http www shopping com l.jpg

http://www.shopping.com

  • slow spots:

    • top – shard CSS and JS, flush

    • middle – shard images

    • bottom – scripts (async?)

  • use CSS sprites (42 bg images)

  • add future Expires header

  • optimize images (50K, 20%)

  • remove ETags


Takeaways l.jpg

takeaways

  • focus on the frontend

  • run Page Speed and YSlow

  • 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


Slide62 l.jpg

  • if you want

    • better user experience

    • more revenue

    • reduced operating expenses

  • the strategy is clear

  • Even Faster Web Sites


Slide63 l.jpg

Steve Souders

[email protected]

http://stevesouders.com/docs/velocity-20090622.ppt


  • Login