CS193H:
High Performance Web Sites
Lecture 4: Class Projects
Steve Souders
Google
souders@cs.stanford.edu
Announcements
Office hours start today: Mondays 4:15-6pm
Contact me by end of tomorrow (Tues 10/7) if
you still want HTTPWatch and missed the first
invite
Computer Forum Career Fair - 10/8 11am-4pm
between Gates and Packard
Guest Lecturer Review
Joseph Smarr, Plaxo
"Performance Challenges for the Open Web"
Minimizing roundtrips – discovery, association,
OpenID, OAuth; separate vs. bundled
Caching – freshness vs. speed
Pull vs. push – scalability issues
3rd party content – proxied vs. clientside; iframe
vs. inline; XFBML, Caja
Lindsey Simon, Google
"Front End Kung Fu"
When you have a CSS problem:
1. is it in or out of the flow?
2. is box block or inline display context?
Style specificity (higher wins):
•
•
•
•
tag: 1 point
className: 10 points
id: 100 points
inline style: 1000 points
Bill Scott, Netflix
"High Performance Web Pages – Real World
Examples: Netflix Case Study"
Established metrics first – "Round Trip Tracers"
Captured – bandwidth, browser, OS
Gzip, far future Expires, removing Etags – cut
outbound traffic in half
Issue: Apache compresses "204 – No Content"
responses; Safari 3 chokes
Bill Scott, Netflix (cont'd)
Surprises!
Spriting star bars slower – inline events
Preloading CSS bg images – don't!
IE7 twice as slow as FF3 – remember when
coding
"the little stuff multiplied matters"
takeaway: track your changes, estimate their
impact, go back and confirm and investigate
The Ajax Experience
smushit.com
image optimization
there's no such thing as a "smu"
Yahoo! Exceptional Performance talk
The 7 Habits for Exceptional Performance
I released Episodes and Hammerhead
http://stevesouders.com/episodes/
http://stevesouders.com/hammerhead
Class Projects
Web 100 Performance Profile
Improving a Top 100 Web Site
Homework
Download your class project web site and
uploading to your Stanford directory
Read HPWS, Chapter 1: Make Fewer HTTP
Requests (if you haven't already)