cs193h: high performance web sites lecture 18: vol 2 – split the initial payload steve souders...
TRANSCRIPT
CS193H:High Performance Web Sites
Lecture 18: Vol 2 – Split the Initial Payload
Steve SoudersGoogle
announcements11/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 payload2. Load scripts without blocking3. Don't scatter inline scripts4. Split dominant domains5. Make static content cookie-free6. Reduce cookie weight7. Minify CSS8. Optimize images9. Use iframes sparingly10. To www or not to www
} part 1
AOLeBayFacebookMySpaceWikipediaYahoo!
Why focus on JavaScript?
YouTube
Scripts Block
<script src="A.js"> blocks parallel downloads and rendering
What's "Cuzillion"?
http://stevesouders.com/cuzillion/?ex=10008
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
JavaScript
Functions Executed 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 18%
26% avg252K avg
Initial Payload and Execution
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?
Homework11/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
QuestionsWhat'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?