1. CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google souders@cs.stanford.edu

2. Announcements No office hours on Monday 9/29. Today is the last chance to get a free copy of HTTPWatch Professional for Windows. Contact me. Guest lecturers next week: Joseph Smarr (Plaxo), Lindsey Simon (Google), and Bill Scott (Netflix).

3. Previous Class Performance Golden Rule: 80-90% of the end-user response time is spent on the frontend. Start there. Browser cache makes a big difference Reading resources from cache depends on: 1.freshness (expiration date) 2.validity (updates since last-modified date)

4. Basic HTTP GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Request HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 6230 function d(s) {... Response status code response headers request headers response body

5. Compression Might want to set Vary:Accept-Encoding and Cache-control:private GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 6230 function d(s) {... GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip XmoÛHþ\ÿFÖvã*wØoq...

6. HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip XmoÛHþ\ÿFÖvã*wØoq... Expires Expiration date determines freshness. Can also use Cache-control:max-age GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Fri, 26 Sep 2008 22:00:00 GMT XmoÛHþ\ÿFÖvã*wØoq...

7. HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Fri, 26 Sep 2008 22:00:00 GMT XmoÛHþ\ÿFÖvã*wØoq... HTTP/1.1 304 Not Modified Conditional GET (IMS) IMS determines validity. IMS is used when Reload is pressed. ETag and If-None-Match also determine validity. GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1 Accept-Encoding: gzip,deflate If-Modified-Since: Mon, 22 Sep 2008 21:14:35 GMT sometime after 3pm PT 9/24/08:

8. Web 100 Performance Profile Read the instructions: http://cs193h.stevesouders.com/#web100 You'll receive an invitation to edit the spreadsheet today. You need Firebug and YSlow http://getfirebug.com/ http://developer.yahoo.com/yslow/

9. Homework Evaluate 5 sites in the Web 100 Performance Profile spreadsheet. Get the link from the class web site: http://cs193h.stevesouders.com Read HPWS, Chapter 1: Make Fewer HTTP Requests for Mon, 10/6.

10. Questions What are the two key questions when reading resources from the cache? What is the request header and response header used to negotiate compression? What do the 200 and 304 status codes mean? What are the two response headers you can use to set an expiration date? What response header provides the file timestamp of the requested resource? What are the two request headers used to determine resource validity?