Learning Center
Plans & pricing Sign in
Sign Out

High Performance Web Sites 14 rules for faster-loading pages


									Even Faster Web Sites
best practices for faster pages

                                                      Steve Souders
     Disclaimer: This content does not necessarily reflect the opinions of my employer.
The Importance of Frontend
    9%               91%

    17%               83%

          iGoogle, primed cache

          iGoogle, empty cache
    Time Spent on the Frontend
                          Empty Cache   Primed Cache                       97%            97%                      95%           81%                  95%           81%             47%            0%           67%            0%                       98%           94%                   98%           98%             94%           91%                     97%           96%                   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
  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

High Performance Web Sites   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?

                 Scripts Block
<script src="A.js"> blocks parallel
 downloads and rendering

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

a tool for quickly constructing web pages to
  see how components interact
Open Source
    Initial Payload and Execution
                                       Functions Executed
                          JavaScript     before onload                 115K              30%                183K              44%           1088K               9%        15K              45%      17K              24%                 131K              31%             297K              18%       114K              32%               321K              13%             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
separate manually (Firebug); tools needed
  to automate this (Doloto from Microsoft)
load scripts without blocking – how? Parallel Scripts

      Scripts and other resources downloaded
      in parallel! How?
      var p=
      var c=g.createElement("script");
      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;
  };'GET', 'A.js', true);

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');
     se.text = xhrObj.responseText;
  };'GET', 'A.js', true);

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

   // access main page from iframe
          Script DOM Element
var se = document.createElement('script');
se.src = '';

script and main page domains can differ
no need to refactor JavaScript
                Script Defer
<script defer src='A.js'></script>

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

Avoid scripts executing in order:
  faster – first script back is executed immediately
                            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

   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

best to move inline scripts above
  stylesheets or below other resources
use Link, not @import
Examples of Scattered Scripts

  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

focus on the frontend
run 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
 previously IE only
 Firefox private beta now
 Firebug 1.05 Net Panel buggy
Announcement 2: Firebug Lite 1.2
Announcement 3: Mozilla & Firebug

 John Resig, Rob Campbell, Jan Odvarko
 Firebug Working Group
 stability, performance, bug fixes
   Steve Souders

To top