1. CS193H: High Performance Web Sites Lecture 18: Vol 2 – Split the Initial Payload Steve Souders Google souders@cs.stanford.edu

2. 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)

3. 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 } part 1

4. AOL eBay Facebook MySpace Wikipedia Yahoo! Why focus on JavaScript? YouTube

5. Scripts Block blocks parallel downloads and rendering What's "Cuzillion"? http://stevesouders.com/cuzillion/?ex=10008

6. a tool for quickly constructing web pages to see how components interact Open Source http://cuzillion.com/ Cuzillion 'cuz there are a zillion pages to check

7. JavaScript Functions Executed before onload www.aol.com115K30% www.ebay.com183K44% www.facebook.com1088K 9% www.google.com/search15K45% search.live.com/results17K24% www.msn.com131K31% www.myspace.com297K18% en.wikipedia.org/wiki114K32% www.yahoo.com321K13% www.youtube.com240K18% 26% avg 252K avg Initial Payload and Execution

8. 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

9. 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?

10. 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

11. 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?