Transcript CS193H: High Performance Web Sites Class 1

CS193H:
High Performance Web Sites
Lecture 18:
Vol 2 – Split the Initial Payload
Steve Souders
Google
[email protected]
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
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
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
JavaScript
Functions Executed
before onload
www.aol.com
www.ebay.com
www.facebook.com
www.google.com/search
115K
183K
1088K
15K
30%
44%
9%
45%
search.live.com/results
www.msn.com
www.myspace.com
en.wikipedia.org/wiki
17K
131K
297K
114K
24%
31%
18%
32%
www.yahoo.com
www.youtube.com
321K
240K 252K avg
13%
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?