slide1
Download
Skip this Video
Download Presentation
Even Faster Web Sites

Loading in 2 Seconds...

play fullscreen
1 / 63

Even Faster Web Sites - PowerPoint PPT Presentation


  • 249 Views
  • Uploaded 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

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
the importance of frontend performance

9%

91%

17%

83%

iGoogle, primed cache

iGoogle, empty cache

the performance golden rule
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

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

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

What\'s Cuzillion?

splitting the initial payload
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
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

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

loading scripts without blocking20
Loading 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">
  • 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

before

after

loading scripts without blocking25
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">
  • 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
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
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
Positioning Inline Scripts

MSN

Wikipedia

eBay

MySpace

sharding dominant domains
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
news.google.com

http://news.google.com

connections per server by browser
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
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
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
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
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
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
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
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
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
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/
top 10 performance
Top 10 Performance

* YSlow wouldn\'t start.

wikipedia
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
Yahoo!
  • shard l.yimg.com
  • 46K (49%) unused CSS
  • ~90 very inefficient CSS selectors
slide52

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
AOL
  • shard portal.aolcdn.com
  • combine 8 scripts
  • simplify CSS selectors
  • avoid inline script after stylesheet
    • jQueryEnabled = true;
  • remove 97K (49%) unused CSS
facebook
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
MSN.com
  • combine 13 scripts
  • sprite 26 background images
  • put stylesheets above scripts
  • avoid inline script after stylesheet
youtube
YouTube
  • add Expires header (can\'t?)
  • minify JavaScript, save ~29K (14%
cnet performance analysis
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
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
takeaways
  • focus on the frontend
  • run Page Speed and YSlow
  • 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

slide62
if you want
    • better user experience
    • more revenue
    • reduced operating expenses
  • the strategy is clear
  • Even Faster Web Sites
slide63

Steve Souders

[email protected]

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

ad