Docstoc

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
best practices for faster pages




                                                      Steve Souders
                                                  souders@google.com
                                               http://stevesouders.com/
     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%
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
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
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
                             YSlow




High Performance Web Sites
http://conferences.oreilly.com/velocity/   June 22-24, 2009
High Performance Web Sites, Vol 2

    1. Split the initial payload
    2. Load scripts without blocking
    3. Don't scatter inline scripts
    4. Split dominant domains
    5. Make static content cookie-free
    6. Reduce cookie weight
    7. Minify CSS
    8. Optimize images
    9. Use iframes sparingly
    10.To www or not to www
Why focus on JavaScript?

                      Yahoo!
                   Wikipedia
                        eBay
                         AOL
                    MySpace
                    YouTube
                   Facebook
                 Scripts Block
<script src="A.js"> blocks parallel
 downloads and rendering



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



What's "Cuzillion"?
                 Cuzillion
    'cuz there are a zillion pages to check


a tool for quickly constructing web pages to
  see how components interact
Open Source
http://stevesouders.com/cuzillion/
    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
     Split 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?
      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)
      Advanced Script Loading

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
http://stevesouders.com/cuzillion/?ex=10009
               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
http://stevesouders.com/cuzillion/?ex=10015
             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');


http://stevesouders.com/cuzillion/?ex=10012
          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
                Script Defer
<script defer src='A.js'></script>



only supported in IE
script and main page domains can differ
no need to refactor JavaScript




http://stevesouders.com/cuzillion/?ex=10013
   document.write Script Tag
document.write("<scri" +
  "ipt type='text/javascript' src='A.js'>" +
  "</scri" + "ipt>");


parallelization only works in IE
parallel downloads for scripts, nothing else
all document.writes must be in same
  script block


http://stevesouders.com/cuzillion/?ex=10014
Browser Busy Indicators
          Browser Busy Indicators
                     status   progress                     block    block
                                         logo    cursor
                      bar       bar                       render   onload

normal Script Src     FF       IE,FF     IE,FF    FF      IE,FF    IE,FF
XHR Eval              no        no        no      no       no       no
XHR Injection         no        no        no      no       no       no
Script in Iframe     IE,FF      FF       IE,FF    FF       no      IE,FF
Script DOM Element    FF        FF        FF      FF       no       FF
Script Defer          FF        FF        FF      FF       FF      IE,FF
document.write        FF       IE,FF     IE,FF    FF      IE,FF    IE,FF
Script Tag

good to show busy indicators when the user needs feedback
bad when downloading in the background
Ensure/Avoid Ordered Execution

Ensure scripts execute in order:
  necessary when scripts have dependencies
  IE: http://stevesouders.com/cuzillion/?ex=10017
  FF: http://stevesouders.com/cuzillion/?ex=10018

Avoid scripts executing in order:
  faster – first script back is executed immediately
  http://stevesouders.com/cuzillion/?ex=10019
                            Summary of Traits
                                        ||  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...
 Load Scripts without Blocking

don't let scripts block other downloads
you can still control execution order, busy
  indicators, and onload event


What about inline scripts?
          Inline Scripts Block

long executing inline scripts block
  rendering and downloads
http://stevesouders.com/cuzillion/?ex=10035

workarounds:
   initiate execution with setTimeout (>250 for
     FF, nglayout.initialpaint.delay)
   move JavaScript to external script with
     advanced downloading techniques
   use Defer attribute (IE only)
 Inline Scripts after Stylesheets
       Block Downloading
Firefox blocks parallel downloads when
  downloading stylesheets
IE doesn't...
...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
Examples of Scattered Scripts

                            MSN
                      Wikipedia
                           eBay
                       MySpace
  Don't Scatter Inline Scripts

remember inline scripts carry a cost
avoid long-executing inline scripts
don't put inline scripts between stylesheets
  and other resources
              Takeaways

focus on the frontend
run YSlow: http://developer.yahoo.com/yslow
this year's focus: JavaScript
  Split the Initial Payload
  Load Scripts without Blocking
  Don't Scatter Inline Scripts
speed matters
you CAN make your site even faster!
Announcement 1: HTTPWatch for FF

 http://httpwatch.com/
 previously IE only
 Firefox private beta now
 Firebug 1.05 Net Panel buggy
Announcement 2: Firebug Lite 1.2

http://getfirebug.com/lite.html
console.log
Inspect
DOM and CSS
Announcement 3: Mozilla & Firebug

 John Resig, Rob Campbell, Jan Odvarko
 Firebug Working Group
 stability, performance, bug fixes
   Steve Souders
 souders@google.com
http://stevesouders.com/

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