Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google

Similar presentations


Presentation on theme: "CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google"— Presentation transcript:

1 CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google

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/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 Request HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :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/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :14:35 GMT Content-Length: 6230 function d(s) {... GET /v-app/scripts/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :14:35 GMT Content-Length: 2066 Content-Encoding: gzip XmoÛHþ\ÿFÖvã*wØoq...

6 HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :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/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 Accept-Encoding: gzip,deflate HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Fri, 26 Sep :00:00 GMT XmoÛHþ\ÿFÖvã*wØoq...

7 HTTP/ OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep :14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Fri, 26 Sep :00:00 GMT XmoÛHþ\ÿFÖvã*wØoq... HTTP/ 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/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 Accept-Encoding: gzip,deflate GET /v-app/scripts/ dom.common.js HTTP/1.1 Host: User-Agent: Mozilla/5.0 (…) Gecko/ Firefox/3.0.1 Accept-Encoding: gzip,deflate If-Modified-Since: Mon, 22 Sep :14:35 GMT sometime after 3pm PT 9/24/08:

8 Web 100 Performance Profile Read the instructions: You'll receive an invitation to edit the spreadsheet today. You need Firebug and YSlow

9 Homework Evaluate 5 sites in the Web 100 Performance Profile spreadsheet. Get the link from the class web site: 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?


Download ppt "CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google"

Similar presentations


Ads by Google