Presentation is loading. Please wait.

Presentation is loading. Please wait.

CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components Steve Souders Google

Similar presentations


Presentation on theme: "CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components Steve Souders Google"— Presentation transcript:

1 CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components Steve Souders Google

2 Announcements Web 100 Performance Profile (round 1) class project has been graded – contact Aravind if you want to know your grade

3 Compression (encoding) typically reduces size by 70% ( )/6230 = 67% 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...

4 Gzip vs. Deflate gzip (default settings) compresses more GzipDeflate Size SavingsSizeSavings Script3.3K1.1K67%1.1K66% Script39.7K14.5K64%16.6K58% Stylesheet1.0K0.4K56%0.5K52% Stylesheet14.1K3.7K73%4.7K67%

5 Pros and Cons Pro: smaller transfer size Con: CPU cycles – on client and server Don't compress resources < 1K

6 Gzip configuration Apache 1.3: mod_gzip mod_gzip_item_include file \.html$ mod_gzip_item_include mime ^text/html$ mod_gzip_item_include file \.js$ mod_gzip_item_include mime ^application/x- javascript$ mod_gzip_item_include file \.css$ mod_gzip_item_include mime ^text/css$ Apache 2.x: mod_deflate AddOutputFilterByType DEFLATE text/html text/css application/x-javascript control compression level: DeflateCompressionLevel

7 HTMLScriptsStylesheets amazon.com x aol.com xsome cnn.com ebay.com x froogle.google.com xxx msn.com xdeflate myspace.com xxx wikipedia.org xxx yahoo.com xxx youtube.com xsome Gzip: not just for HTML HTMLScriptsStylesheets aol.com xxx ebay.com xsome facebook.com xxx google.com/search xxna search.live.com/results xxx msn.com xxx myspace.com xxx en.wikipedia.org/wiki xsome yahoo.com xxx youtube.com xxx gzip scripts, stylesheets, XML, JSON (not images, Flash, PDF) March 2007 October 2008

8 Edge Case: Proxies Proxy Origin Server 6 GET main.js (no Accept-Encoding) 2 GET main.js Accept-Encoding: gzip 3 main.js Content-Encoding: gzip 4 main.js Content-Encoding: gzip 5 main.js Content-Encoding: gzip 1 GET main.js Accept-Encoding: gzip 7 main.js Content-Encoding: gzip proxies may serve gzipped content to browsers that don't support it, and vice versa

9 Edge Case: Proxies w/ Vary Proxy Origin Server 6 GET main.js (no Accept-Encoding) 2 GET main.js Accept-Encoding: gzip 3 main.js Content-Encoding: gzip Vary: Accept-Encoding 4 main.js Content-Encoding: gzip [Accept-Encoding: gzip] 5 main.js Content-Encoding: gzip 1 GET main.js Accept-Encoding: gzip 10 main.js (no gzip) 7 GET main.js (no Accept-Encoding) 9 main.js [Accept-Encoding: ] 8 main.js Vary: Accept-Encoding 11 GET main.js Accept-Encoding: gzip 12 main.js Content-Encoding: gzip 13 GET main.js (no Accept-Encoding) 14 main.js (no gzip) add Vary: Accept-Encoding

10 Edge Case: Bad Browsers < 1% of browsers have problems with gzip IE 5.5: IE 6.0: Netscape 3.x, 4.x User-Agent white list for gzip Apache 1.3: mod_gzip_item_include reqheader "User-Agent: MSIE [6-9]" mod_gzip_item_include reqheader "User-Agent: Mozilla/[5-9]" Apache 2.0: BrowserMatch ^MSIE [6-9] gzip BrowserMatch ^Mozilla/[5-9] gzip

11 Edge Case: Bad Browsers (cont'd) proxies could mix-up responses give cached response from useragent1 to useragent2 could add Vary: User-Agent so many possibilities, defeats proxy caching better to add Cache-Control: Private downside: disables all proxy caches is it a serious problem? hard to diagnose; problem getting smaller

12 Edge Case: ETags what happens when proxy makes Conditional GET requests? Last-Modified date for gzipped vs. ungzipped is different => If-Modified-Since works fine ETag is the same in Apache for gzipped & ungzipped => If-None-Match succeeds, proxy could give browser mismatched content remove Etags! (Rule 13)

13 Edge Case: ETags present Proxy Origin Server 6 GET main.js (no Accept-Encoding) 2 GET main.js Accept-Encoding: gzip 3 main.js Content-Encoding: gzip Cache-Control: max-age=0 ETag: "de158-e58-c7ee4140" 4 main.js Content-Encoding: gzip Cache-Control: max-age=0 ETag: "de158-e58-c7ee4140" 5 main.js Content-Encoding: gzip 1 GET main.js Accept-Encoding: gzip 7 GET main.js If-None-Match: "de158-e58-c7ee4140" Not Modified 9 main.js Content-Encoding: gzip proxy gives browser mismatched content

14 Edge Case: ETags removed Proxy Origin Server 6 GET main.js (no Accept-Encoding) 2 GET main.js Accept-Encoding: gzip 3 main.js Content-Encoding: gzip Cache-Control: max-age=0 Last-Modified: Thu, 21 Aug :53:57 GMT 4 main.js Content-Encoding: gzip Cache-Control: max-age=0 Last-Modified: Thu, 21 Aug :53:57 GMT 5 main.js Content-Encoding: gzip 1 GET main.js Accept-Encoding: gzip 7 GET main.js If-Modified-Since: Thu, 21 Aug :53:57 GMT 8 main.js Cache-Control: max-age=0 Last-Modified: Fri, 22 Aug :43:15 GMT removing ETags avoids the problem 10 main.js (no gzip) 9 main.js Cache-Control: max-age=0 Last-Modified: Fri, 22 Aug :43:15 GMT

15 Edge Case Fixes Vary: Accept- Encoding Cache-Control: private ETag aol.com x ebay.com xxx (IIS) facebook.com x google.com/search x search.live.com/results xx (IIS) msn.com x (IIS) myspace.com xx (Apa) en.wikipedia.org/wiki x (Apa) yahoo.com x youtube.com xsome Vary: User-Agent – not used March 2007 October 2008

16 Homework "Improving Top Site" class project: add improvements for Rule 4 measure improvements using Hammerhead record results in your personal Web 100 sheet read Chapter 5 of HPWS for 10/17

17 Questions How much are file sizes typically reduced by using gzip compression? What types of resources (images, scripts, etc.) should not be compressed? For the resource types that should be compressed, should they always be compressed? How do you prevent proxies from serving gzipped resources to browsers that don't support gzip? How can ETags cause proxies to serve mismatched content to browsers?


Download ppt "CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components Steve Souders Google"

Similar presentations


Ads by Google