High Performance Web Sites 14 rules for faster-loading pages

Document Sample
High Performance Web Sites 14 rules for faster-loading pages Powered By Docstoc
					            Even Faster Web Sites




http://stevesouders.com/docs/jquery-20090913.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
           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
Sept 2007
June 2009
          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
    initial payload and execution
                                       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
               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
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
<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
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 src='A.js'></script>



supported in IE and FF 3.1+
script and main page domains can differ
no need to refactor JavaScript
  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
                                        ||  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!
                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

          Bing: +2000 ms  -4.3% revenue/user1
       Yahoo: +400 ms  -5-9% full-page traffic                    2


     Google: +400 ms  -0.59% searches/user1
           AOL: fastest users  +50% page views3
    Shopzilla: -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
                         cost savings

    hardware – reduced load
        Shopzilla – 50% fewer servers
    bandwidth – reduced response size




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

Even Faster Web Sites
book signing now




                           Steve Souders
                         souders@google.com
http://stevesouders.com/docs/jquery-20090913.ppt

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:5
posted:3/19/2011
language:English
pages:36