CS193H: High Performance Web Sites
Class Schedule   |  Web 100 Performance Profile   |  Class Project   |  Assignments   |  Grading
This class was taught at Stanford in Autumn 2008. You can register to watch all 25 CS193H lecture videos through the Stanford Center for Professional Development.
Instructor: Steve Souders
CA: Aravind Narayanan
Schedule: 9/22/08-12/5/08, Mon, Wed, Fri - 3:15-4:05
Office Hours: Mon 4:15-6pm, Gates 195
Location: Gates, B01
Textbook: High Performance Web Sites and Even Faster Web Sites by Steve Souders
Lecture Videos: SCPD course videos

Class Schedule

Date Title Notes/Homework Slides
9/22 Introduction background, course logistics, web hosting facilities
homework: HPWS Chapter A, join CS193H HPWS Google Group
ppt, GDoc
9/24 The Importance of Frontend Performance homework: HPWS Chapter B, install Firebug, YSlow, HTTPWatch ppt, GDoc
9/26 HTTP
Web 100 Performance Profile
Use YSlow to measure key performance characteristics of top web sites.
homework (due by 10/6): fill out Web 100 Performance Profile spreadsheet for 5 sites (only do sites that aren't already taken), HPWS Chapter 1
ppt, GDoc
9/29 Joseph Smarr (Plaxo)
Performance Challenges for the Open Web
Guest lecturer while Steve's out. This content will be included in the Midterm ppt
10/1 Lindsey Simon (Google)
Front End Kung Fu
Guest lecturer while Steve's out. This content will be included in the Midterm  
10/3 Bill Scott (Netflix)
High Performance Web Pages – Real World Examples: Netflix Case Study
Guest lecturer while Steve's out. This content will be included in the Midterm pdf, key.zip
10/6 Class Project: Improving a Top 100 Web Site Learn how to download a public web site, make performance improvements to it, and measure the impact.
homework: Each student picks one web site from the Alexa Top 100 (dupes are ok). This is the web site they'll use throughout the quarter to apply performance best practices to. Download the web site and all resources and host it on your own server.
ppt, GDoc
10/8 Make Fewer HTTP Requests homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 2 ppt, GDoc
10/10 Use a Content Delivery Network homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 3 ppt, GDoc
10/13 Add an Expires Header homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 4 ppt, GDoc
10/15 Gzip Components homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 5 ppt, GDoc
10/17 Put Stylesheets at the Top homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 6 ppt, GDoc
10/20 Put Scripts at the Bottom homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 7 ppt, GDoc
10/22 Avoid CSS Expressions
Reduce DNS Lookups
homework: Apply the best practics from today's class to your chosen web site. Record the performance improvements in the class spreadsheet. HPWS Chapter 8 & 9 ppt, GDoc
10/24 Make JavaScript and CSS External homework: Read HPWS Chapter 10. Check five Web 100 Performance Profile sites due 3:15pm 10/29. ppt, GDoc
10/27 Minify JavaScript homework: HPWS Chapter 11 ppt, GDoc
10/29 Avoid Redirects homework: study for midterm ppt, GDoc
10/31 MIDTERM EXAM   test, answers
11/3 Doug Crockford (Yahoo!)
Ajax Performance
homework: HPWS Chapter 12 ppt
11/5 Remove Duplicate Scripts homework: HPWS Chapter 13 ppt, GDoc
11/7 assignment #4 due
Configure ETags
homework: HPWS Chapter 14 ppt, GDoc
11/10 Make Ajax Cacheable & Split the Initial Payload homework: Read HPWS Vol 2 handout. ppt, GDoc, ppt, GDoc
11/12 assignment #5 due
Load Scripts Without Blocking
homework: Read HPWS Vol 2 handout. ppt, GDoc
11/14 Don't Scatter Inline Scripts   ppt, GDoc
11/17 Robert Johnson (Facebook)
Fast Data at Massive Scale - lessons learned at Facebook
homework: Read HPWS Vol 2 handout. ppt
11/19 Shard Dominant Domains   ppt, GDoc
11/21 Optimize Images, Use Iframes Sparingly, Flush the Document Early   ppt, GDoc
12/1 assignment #6 due
Serve Static Resources Cookie-Free, Reduce Cookie Weight, To WWW or not to WWW
  ppt, GDoc
12/3 CSS Descendant Selectors, Forced Compression   ppt, GDoc
12/5 State of Performance   ppt, GDoc
12/9 12:15-3:15 - FINAL EXAM (alternate time slot) (Gates B03) The Final Exam is not inclusive – it includes only the material covered since the Midterm Exam. test, answers
12/12 12:15-3:15 - FINAL EXAM (Gates B01) The Final Exam is not inclusive – it includes only the material covered since the Midterm Exam. test, answers

Web 100 Performance Profile

Early in the quarter, each student will pick five web sites from the Web 100 Performance Profile spreadsheet. Students fill out the spreadsheet by running YSlow on their five sites. Only one person can do a given web site. The first person to put their name in the "Student" column claims that web site. It would be smart to "stake out" your five sites by adding your name before running YSlow, otherwise, by the time you finish running YSlow someone else might have claimed the site. You can't claim sites until the homework is assigned in class (probably on 9/26).

To edit the spreadsheet, you need to be a member of the class' Google Group. (Go to http://groups.google.com/group/cs193h-hpws and "Apply for group membership".) If there aren't five web sites left, you can add more sites from the Alexa Top 500. (The spreadsheet will have more than 100 web sites, but we'll stick with the "Web 100" moniker.) Only add sites with acceptable content (no porn, pirated software, etc.).

At the end of the quarter, students will update the spreadsheet so we can see changes in the Web 100's performance profile.

Note: There is not necessarily any connection between the five web sites chosen here and the web site chosen for the Class Project.

Class Project: Improving a Top 100 Web Site

Each student will apply the performance best practices learned in class to a web site of their choice. Guidelines for selecting a web site follow.

Students will download the web site to a local server. You can do this, for example, by selecting File | Save Page As... in Firefox 3 and choosing the "Web Page, complete" type. The files can then be FTPed to a web server to recreate a consistent version of the selected web site. It might be necessary to modify the page to make it work, e.g., adding a BASE HREF tag to the page. The tricky part of this will be that some of the performance changes require modifying the web server configuration. If possible, the department will provide server access for hosting this content. If students have their own web hosting facilities, that can be used. We'll review this in class and further assistance will be provided during office hours.

Make sure to save a packet sniffer trace of the original web site, e.g., in HTTPWatch choose Save | Save... and select Http Watch Log File (*.hwl).

After each class, students will apply the best practices discussed to their project web site. For example, if the class discusses spriting images, the student will sprite appropriate images in the web site. Each improvement will be measured in terms of load time, # of requests, etc., for comparison to the baseline. Load time measurements will be attained using Hammerhead. The results will be recorded in a shared class spreadsheet. Each student should add their own sub-spreadsheet to the Web 100 spreadsheet.

It's okay if multiple people choose the same web site, but they must still work independently. It would be interesting to see if one person's performance improvements differed from another's, for the same web site.

Maintain a document that is a summary write-up of your improvements. Provide a link to this document from within your sub-spreadsheet. If it's a Google Doc, make sure to either publish it or add the professor and TA to the access list.

Assignments

Assignment #1 - Web 100 Performance Profile

due date: 10/6/08

Gather stats for five top web sites. See the Web 100 class project description for more information.

Assignment #2 - Improving a Top Site, Rules 1-3

due date: 11:59pm 10/20/08

Implement the best practices from rules 1-3 to your class project web site. See the Improving a Top Site class project description for more information.

Assignment #3 - check Web 100 Performance Profile

due date: 3:15pm 10/29/08

I found several errors in the Web 100 Performance Profile data. To sanity check the results, each student will pick five sites THAT ARE NOT THEIR OWN and test them again. Insert a row BELOW the site's original row. Add your name to the reviewer column. Run it through YSlow, and HTTPWatch or Firebug Net Panel and fill out your new row. See the Web 100 class project description for more information.

Assignment #4 - Improving a Top Site, Rules 4-10

due date: 11:59pm 11/7/08

Implement the best practices from rules 4-10 to your class project web site. See the Improving a Top Site class project description for more information.

Assignment #5 - Web 100 Double Check

due date: 3:15pm 11/12/08

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. Images should include IMG images as well as CSS background images. JavaScript and Stylesheets sizes should be uncompressed. Total size should just be the sum of the columns (e.g., doesn't include Flash). See the Web 100 class project description for more information.

Assignment #6 - Improving a Top Site, Rules 11-14 plus Vol 2

due date: 11:59pm 12/1/08

Implement the best practices from rules 11-14 plus the rules from HPWS Vol 2 (Split the Initial Payload, Load Scripts Without Blocking, Don't Scatter Inline Scripts, Shard Dominant Domains, and Optimize Images) to your class project web site. See the Improving a Top Site class project description for more information.

Grading

25% Midterm Exam
25% Final Exam (not inclusive)
40% Class Projects, Homework
10% Participation (asking & answering questions, making observations, etc.)