CS193H High Performance Web Sites Lecture 18 Vol 2

							          CS193H:
High Performance Web Sites
          Lecture 18:
Vol 2 – Split the Initial Payload

          Steve Souders
             Google
     souders@cs.stanford.edu
             announcements
11/17 – guest lecturer: Robert Johnson
  (Facebook), "Fast Data at Massive Scale -
  lessons learned at Facebook"
handouts of Vol 2 chapters will be available
  next class (hardcopy only, will be sent to
  SCPD, video watchers will have to come to
  class or office hours)
       High Performance Web
       Sites, Vol 2

                                     }
1. Split the initial payload
2. Load scripts without blocking         part 1
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://cuzillion.com/
                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
              the other 74%
what's the other ~74% of JavaScript for?
  • conditional blocks – errors, specific browsers,
    edge cases
  • DHTML features – dynamic menus, popup DIVs,
    XHR
  • cruft!
given the blocking nature of JavaScript, it's
  painful to slowdown the page for JavaScript
  that may never be used
             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?
                 Homework
11/12 3:15pm – Web 100 Double Check
  •   look at your rows in Web 100 spreadsheet
  •   double-check your entries for any rows in red
  •   update incorrect entries
  •   enter "y" in "Double Checked" column
             Questions
What's the average percentage of JavaScript
 downloaded by the Alexa top ten? On average
 how much of that is executed before onload?
Why is this measurement done at the onload
 event?
Why is there so much JavaScript that's not called
 before onload?
What does "lazy load" mean? How do you lazy
 load a script?