Even Faster Web Sites
Download
1 / 63

Even Faster Web Sites - PowerPoint PPT Presentation


  • 248 Views
  • Updated On :

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.

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


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



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




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?



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



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



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



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


ad