High Performance Web Sites 14 ru

Document Sample
High Performance Web Sites 14 ru Powered By Docstoc
					            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
                          Empty Cache   Primed Cache
www.aol.com                       97%            97%
www.ebay.com                      95%            81%
www.facebook.com                  95%            81%
www.google.com/search             47%             0%
search.live.com/results           67%             0%
www.msn.com                       98%            94%
www.myspace.com                   98%            98%
en.wikipedia.org/wiki             94%            91%
www.yahoo.com                     97%            96%
www.youtube.com                   98%            97%
                                              April 2008
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
Sept 2007
June 2009
           1. MAKE FEWER HTTP REQUESTS
           2. USE A CDN
           3. ADD AN EXPIRES HEADER
           4. GZIP COMPONENTS
           5. PUT STYLESHEETS AT THE TOP
           6. PUT SCRIPTS AT THE BOTTOM
14 RULES   7. AVOID CSS EXPRESSIONS
           8. MAKE JS AND CSS EXTERNAL
           9. REDUCE DNS LOOKUPS
           10.MINIFY JS
           11.AVOID REDIRECTS
           12.REMOVE DUPLICATE SCRIPTS
           13.CONFIGURE ETAGS
           14.MAKE AJAX CACHEABLE
          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?

                      Yahoo!
                   Wikipedia
                        eBay
                         AOL
                    MySpace
                    YouTube
                   Facebook
                  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
                                       Functions Executed
                          JavaScript     before onload
www.aol.com                 115K              30%
www.ebay.com                183K              44%
www.facebook.com           1088K               9%
www.google.com/search        15K              45%
search.live.com/results      17K              24%
www.msn.com                 131K              31%
www.myspace.com             297K              18%
en.wikipedia.org/wiki       114K              32%
www.yahoo.com               321K              13%
www.youtube.com             240K 252K avg     18% 26% avg
  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
      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

XHR Eval
XHR Injection
Script in Iframe
Script DOM Element
Script Defer
document.write Script Tag
          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
    Loading Scripts Without Blocking
                                        ||  domains
                                                    existing browser ensures                         size
                                      down-   can
                                                    scripts    busy   order                        (bytes)
                                      loads  differ
normal Script Src                        no         yes          yes        IE,FF        IE,FF      ~50
XHR Eval                               IE,FF        no           no           no          no       ~500
XHR Injection                          IE,FF        no           yes          no          no       ~500
Script in Iframe                       IE,FF        no           no         IE,FF         no        ~50
Script DOM Element                     IE,FF        yes          yes          FF          FF       ~200
Script Defer                             IE         yes          yes        IE,FF             IE    ~50
document.write                           IE*        yes          yes        IE,FF             IE   ~100
Script Tag


*Only   other document.write scripts are downloaded in parallel (in the same script block).
                       and the winner is...
                                XHR Eval
                                XHR Injection
                                Script in iframe
                                Script DOM Element
                                Script Defer

                                                             same domains
            different domains


           Script DOM Element                          no order                        preserve order
           Script Defer
                                            XHR Eval                           Script DOM Element (FF)
      no order                              XHR Injection                      Script Defer (IE)
                                            Script in iframe                   Managed XHR Eval
                          preserve order
                                            Script DOM Element (IE)            Managed XHR Injection
Script DOM Element
                                                                             no busy                    show busy
                 Script DOM Element (FF)
                 Script Defer (IE)
                                                                      Managed XHR Injection        Script DOM Element (FF)
                                                                      Managed XHR Eval             Script Defer (IE)
                                                                                                   Managed XHR Eval
                                     no busy
                                                         show busy                                 Managed XHR Injection


                             XHR Injection                 Managed XHR Injection
                             XHR Eval                      Managed XHR Eval
                             Script DOM Element (IE)       Script DOM Element
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(domscri
    pt);
 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>
before

after
    Loading Scripts Without Blocking
                                        ||  domains
                                                    existing browser ensures                         size
                                      down-   can
                                                    scripts    busy   order                        (bytes)
                                      loads  differ
normal Script Src                        no         yes          yes        IE,FF        IE,FF      ~50
XHR Eval                               IE,FF        no           no           no          no       ~500
XHR Injection                          IE,FF        no           yes          no          no       ~500
Script in Iframe                       IE,FF        no           no         IE,FF         no        ~50
Script DOM Element                     IE,FF        yes          yes          FF          FF !IE ~200
Script Defer                             IE         yes          yes        IE,FF         IE      ~50
document.write                           IE*        yes          yes        IE,FF             IE   ~100
Script Tag


*Only   other document.write scripts are downloaded in parallel (in the same script block).
       what about
     inlined code
that depends on the script?
        coupling techniques

hardcoded callback
window onload
timer
degrading script tags
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
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
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

                           MSN
                     Wikipedia
                          eBay
                      MySpace
   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
news.google.com
          http://news.google.com
connections per server by browser
                                 HTTP/1.1            HTTP/1.0
          IE 6,7                       2                   4
          IE 8                         6                   6
          Firefox 1.5, 2               2                   8
          Firefox 3                    6                   6
          Safari 3,4                   4                   4
          Chrome                       6                   6
          Opera 9                      4                   4

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
             html
             image
             image
             script


             html
             image
             image
             script
                              call PHP's flush()
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 FileHandle autoflush (Perl), flush
   (Python), ios.flush (Ruby)
             successful flushing

Google Search
    google
    image
    image
    script
    image
    204




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




external resource downloaded early
content visible to the user
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
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
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
                      # Rules # elements   Avg Depth
AOL                     2289      1628        13
eBay                     305       588        14
Facebook                2882      1966        17
Google Search             92       552         8
Live Search              376       449        12
MSN.com                 1038       886        11
MySpace                  932       444         9
Wikipedia                795      1333        10
Yahoo!                   800       564        13
YouTube                  821       817         9
            average     1033       923        12
                  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 DIV DIV P A.class0007 { ... }
http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-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 DIV DIV P A.class0007 { ... }
the key is the key selector – the rightmost
  argument
     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
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.it http://smush.it/
CSS Sprite Generator http://spritegen.website-
  performance.org/
SpriteMe http://spriteme.org/ (in progress)
Hammerhead http://stevesouders.com/hammerhead/
Cuzillion http://cuzillion.com/
Performance Analyzers: HPWS rules
                            YSlow Page Speed Pagetest   VRTA neXpert
combine JS & CSS              X        X        X
use CSS sprites               X                          X
use a CDN                     X                 X
set Expires in the future     X        X        X        X      X
gzip text responses           X        X        X        X      X
put CSS at the top            X        X
put JS at the bottom          X
avoid CSS expressions         X        X
make JS & CSS external
reduce DNS lookups            X       X
minify JS                     X       X         X
avoid redirects               X       X                  X      X
remove dupe scripts           X
remove ETags                  X                 X               X
Performance Analyzers: EFWS rules
                          YSlow Page Speed Pagetest   VRTA neXpert
 don't block UI thread
    split JS payload                X
   load scripts async                                  X
inline JS b4 stylesheet             X
   write efficient JS
min. uncompressed size
    optimize images                 X         X
     shard domains                  X                  X
  flush the document
     avoid iframes
 simplify CSS selectors             X                  X
Performance Analyzers: other rules
                          YSlow Page Speed Pagetest   VRTA neXpert
use persistent conns                          X        X      X
reduce cookies             2.0      X         X               X
avoid net congestion                                   X
increase MTU, TCP win                                  X
avoid server congestion                                X
remove unused CSS                   X
specify image dims                  X
use GET for Ajax           2.0
reduce DOM elements        2.0
avoid 404 errors           2.0
avoid Alpha filters        2.0
don't scale images         2.0      X
optimize favicon           2.0
                 Top 10 Performance
                          YSlow Page Speed
       AOL                 ?*     yellow
       eBay                82     yellow
       Facebook            68      red
       Google Search       95     green
       Live Search         93     green
       MSN.com             72     yellow
       MySpace             84     yellow
       Wikipedia           66     yellow
       Yahoo!              96     yellow
       YouTube             77     yellow
* YSlow wouldn't start.
               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!

shard l.yimg.com
46K (49%) unused CSS
~90 very inefficient CSS selectors
                     1
        2 3
              4
                         4   4       5      www.ebay.com
                                 4
1. long HTML doc response
2. flush (good)
3. inline script blocks .js
  var pageName='HomePagePortal';
4. scripts block
5. ads .js non-blocking (good)           6 7 8
6. 26 bg images – no sprites
7. sharded domains – pics & rtm (good)
8. compress images by 20%
9. thumbs load slowly – HTTP/1.0?
10. remove ETags (?)
11. ~40 inefficient CSS selectors
    .playgrnd * {}
                                                  9
                    AOL

shard portal.aolcdn.com
combine 8 scripts
simplify CSS selectors
avoid inline script after stylesheet
  jQueryEnabled = true;
remove 97K (49%) unused CSS
               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

combine 13 scripts
sprite 26 background images
put stylesheets above scripts
avoid inline script after stylesheet
               YouTube

add Expires header (can't?)
minify JavaScript, save ~29K (14%
       CNet Performance Analysis
                               requests: 107
cool                           load time: 3.7 secs
  flushed document             xfer size: 436K
                               YSlow: F (48)
  HTTP/1.0 downgrade
opportunities
  load oreo.moo.rb.combined.js async
  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

  • 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

focus on the frontend
run Page Speed and YSlow
speed matters
                   impact on revenue

    Google: +500 ms  -20% traffic1
     Yahoo: +400 ms  -5-9% full-page traffic                        2


    Amazon: +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

    hardware – reduced load
    bandwidth – reduced response size




http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf
if you want
    better user experience
    more revenue
    reduced operating expenses
the strategy is clear

Even Faster Web Sites
                             Steve Souders
                           souders@google.com
http://stevesouders.com/docs/velocity-20090622.ppt

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:9
posted:10/11/2010
language:English
pages:63