100 likes | 345 Views
CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile. Steve Souders Google souders@cs.stanford.edu. 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.
E N D
CS193H:High Performance Web SitesLecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google souders@cs.stanford.edu
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).
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: freshness (expiration date) validity (updates since last-modified date)
Basic HTTP Request 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 headers status code Response 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 headers response body
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 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: 6230 function d(s) {... 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 XmoÛHþ\ÿFÖvã*wØoq... 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...
Conditional GET (IMS) sometime after 3pm PT 9/24/08: 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 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
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/
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.
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?