Presentation is loading. Please wait.

Presentation is loading. Please wait.

today's class morning: how we got here HTTP overview High Performance Web Sites: Rules 1-6 break exercise: Web 100 stats High Performance Web Sites: Rules.

Similar presentations


Presentation on theme: "today's class morning: how we got here HTTP overview High Performance Web Sites: Rules 1-6 break exercise: Web 100 stats High Performance Web Sites: Rules."— Presentation transcript:

1

2 today's class morning: how we got here HTTP overview High Performance Web Sites: Rules 1-6 break exercise: Web 100 stats High Performance Web Sites: Rules 7-14 afternoon: morning wrap-up Even Faster Web Sites: chapters 1-4 break Even Faster Web Sites: chapters 5-8 exercise: web site performance analysis state of performance

3 logistics slides: http://stevesouders.com/docs/oreilly-master-class.ppt install: Firebug - http://getfirebug.com/ YSlow - http://developer.yahoo.com/yslow/ Hammerhead – http://stevesouders.com/hammerhead/ ask questions! candidate questions appear after each section – if you can't answer these, ask

4 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

5 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache

6 time spent on the frontend Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97%

7 14 R ULES 1.M AKE FEWER HTTP REQUESTS 2.U SE A CDN 3.A DD AN E XPIRES HEADER 4.G ZIP COMPONENTS 5.P UT STYLESHEETS AT THE TOP 6.P UT SCRIPTS AT THE BOTTOM 7.A VOID CSS EXPRESSIONS 8.M AKE JS AND CSS EXTERNAL 9.R EDUCE DNS LOOKUPS 10.M INIFY JS 11.A VOID REDIRECTS 12.R EMOVE DUPLICATE SCRIPTS 13.C ONFIGURE ET AGS 14.M AKE AJAX CACHEABLE

8

9 evangelism Conferences Web 2.0 Expo The Ajax Experience OSCON Google/IO SXSW Companies Yahoo! Amazon Zillow Microsoft Conferences WordCamp Future of Web Apps Widget Summit Velocity Rich Web Experience Apple Netflix Twitter LinkedIn Google Facebook CBS Interactive

10

11

12 September 2007

13

14 June 2009

15 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

16 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

17 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...

18 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...

19 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:

20 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 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?

21 0.9200.515 primed (same session) : 1 HTTP request, 15 cache reads 8Kb xferred 0.515 seconds empty vs. primed cache empty: 30 HTTP requests 194Kb xferred 3.382 seconds cache reads primed (diff session) : 4 HTTP requests, 28 cache reads 13Kb xferred 0.920 seconds 0.03.382

22 memory cache Why is "primed cache same session" different from "primed cache different session"? Browsers store resources in memory so they don't need to read them from disk. What determines whether a resource is held in memory cache? I don't know. That'd be a good research project.

23 disk cache Two considerations with disk cache Is the resource fresh (vs. expired)? If it's expired, is it valid (vs. updated)? If a resource is fresh, no HTTP request is made – it's just read from disk. If a resource is expired, a Conditional GET request is made. If the resource is valid, it's read from disk and the Conditional GET response is empty. If the resource has been updated, the Conditional GET response contains the updated version.

24

25 packet sniffers measure HTTP requests HTTPWatch http://www.httpwatch.com/ IE and Firefox, Windows only Firebug net panel less accurate timings (includes blocking time) others: AOL Pagetest (web-based), Fiddler (Windows), Wireshark (low-level), IBM Page Detailer (Windows)

26

27 Firebug Joe Hewitt, January 2006 Firebug Working Group, Mozilla came onboard kit and caboodle: inspect HTML CSS explanation and modification DOM inspector network monitor JavaScript console, log, debugger and profiler add-on to Firefox Firebug Lite – bookmarklet for IE, Safari, Opera, etc. Open Source (free) http://getfirebug.com/http://getfirebug.com/

28 YSlow

29 Steve Souders, July 2007 web performance analysis tool add-on to Firebug (extension to an extension) Open Source (free), not open repository http://developer.yahoo.com/yslow/

30 questions What's the white space in the HTTP profiles? Why is the HTML document typically not cached? Why are packet sniffers not good for measuring page load time?

31 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

32 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache

33 definitions Backend Time from when the user makes the request to when the last byte of the HTML document arrives. Includes the time for the initial request to go up, the web server to stitch together the HTML, and for the response to come back. Frontend Shorthand for everything after the HTML document arrives. In reality, includes backend time (primarily reading static files) and network time, as well as true frontend activities such as parsing HTML, CSS, and JS, and executing JS.

34 time spent on the frontend Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97%

35 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work

36 Rule 1: Make Fewer HTTP Requests 80-90% of load time is the frontend the frontend time is dominated by HTTP HTTP requests growth since 2003: 25 to 50 * each HTTP request has overhead – even with persistent connections reducing HTTP requests has the biggest impact bigger benefit for users with higher latency parallelization reduces the need for this * http://www.websiteoptimization.com/speed/tweak/average-web-page/

37 Rule 1: Make Fewer HTTP Requests But... is it possible to reduce HTTP requests without reducing richness? Yes: combine JS, CSS image maps CSS sprites inline images

38 combine JS and CSS not combining scripts with stylesheets multiple scripts => one script multiple stylesheets => one stylesheet apache module: http://code.google.com/p/modconcat/ YUI Combo Handler http://yuiblog.com/blog/2008/07/16/combohandler/ http://stevesouders.com/examples/combo.php

39 image maps old school, CSS sprites is preferred image maps still useful when x,y coordinates are useful, for example, in maps http://stevesouders.com/examples/imagemap.php

40 CSS sprites multiple CSS background images => one image

overall size reduced generator: http://spritegen.website-performance.org/ http://stevesouders.com/examples/sprites.php

41 inline images (data: URLs) embed the content of an HTTP response in place of a URL Red Star if embedded in HTML document, probably not cached => embed in stylesheet instead base64 encoding increases total size works in IE8 (not IE7 and earlier) http://stevesouders.com/examples/inline-images.php

42 data: URLs not just for images Hammerhead:

43 Rule 2: Use a CDN Content Delivery Network geographically distributed servers => closer to your users also: backups, storage, caching, absorb spikes Akamai, Mirror Image, Limelight, Savvis new: Amazon S3, Panther Express (more affordable) dynamic content: 1 HTTP request static content: all the rest distribute your static content before distributing your dynamic content

44 CDN – reverse proxy Edge Servers Origin Server(s) Developer User name server ISP's DNS Resolver 198.87.82.45 CDN

45 CDN usage CDN www.aol.comAkamai www.ebay.comAkamai www.facebook.comAkamai www.google.com/search search.live.com/resultsAkamai www.msn.com www.myspace.comAkamai en.wikipedia.org/wiki www.yahoo.com www.youtube.com

46 questions What's the most important requirement for a CDN? How can you find out which CDN a company uses? What plays the key role in sending users to the appropriate edge server?

47 Rule 3: Add an Expires Header 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: Mon, 12 Oct 2009 14:57:34 GMT Cache-Control: max-age=31536000 XmoÛHþ\ÿFÖvã*wØoq...

48 Expires vs. max-age Expires works in HTTP/1.0, max-age in HTTP/1.1 Expires is an absolute date: 12 Oct 2009 14:57:34 GMT max-age is # of seconds until expiration: 31536000 Expires relies on clock synchronization between client and server for short expirations max-age takes precedence over Expires

49 sending Expires (Apache) mod_expires ExpiresDefault "access plus 1 year" sends both Expires and max-age: Expires: Mon, 12 Oct 2009 14:57:34 GMT Cache-Control: max-age=315360000

50 Expires in the wild – 2007 ImagesScriptsStylesheets % with Expires Median Age amazon.com 0/620/30/10%114 days aol.com 23/436/181/148%217 days cnn.com 0/1382/110/21%227 days ebay.com 16/200/70/255%140 days froogle.google.com 1/230/1 4%454 days msn.com 32/353/91/180%34 days myspace.com 0/180/2 0%1 day wikipedia.org 6/82/31/175%1 day yahoo.com 23/234/41/1100%na youtube.com 0/320/70/30%26 days average 10/40 (25%) 2/5 (38%) 0.5/2 (27%) 12/46 (26%) March 2007

51 Expires in the wild – 2008 ImagesScriptsStylesheets % with Expires Median Age aol.com 26/3513/201/171%189 days ebay.com 48/486/72/298%1 day facebook.com 93/9720/2220/2096%121 days google.com/search 1/10/10/050%1 day search.live.com/results 6/61/14/4100%na msn.com 45/453/3 100%na myspace.com 21/217/74/4100%na en.wikipedia.org/wiki 7/325/59/946%310 days yahoo.com 23/234/41/1100%na youtube.com 8/271/1 34%unk average 28/34 (83%) 6/7 (85%) 5/5 (100%) 38/45 (85%) October 2008

52 revving filenames (really, this is independent of Expires headers) once you make a resource public, you can never change it => aggressive proxies prevent 100% of users from getting the update best solution: change the filename date: trough_062308.gif version #: onload_1.6.1.js checksum: 1076572916-dom.common.js don't use querystring: wikibits.js?179 won't be cached by some proxies

53 questions What's are some differences between Expires and max-age? What types of resources should an Expires or a Cache-Control header be used with? Once a resource is cached with a far future expiration date, how can you push updates and ensure users get the new version?

54 Rule 4: Gzip Components typically reduces size by 70% (6230-2066)/6230 = 67% 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...

55 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%

56 pros and cons Pro: smaller transfer size Con: CPU cycles – on client and server Don't compress resources < 1K

57 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 http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

58 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

59 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

60 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

61 edge case: bad browsers < 1% of browsers have problems with gzip IE 5.5: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q313712 IE 6.0: http://support.microsoft.com/default.aspx?scid=kb;en-us;Q31249 Netscape 3.x, 4.x http://www.schroepl.net/projekte/mod_gzip/browser.htm 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

62 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

63 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) http://issues.apache.org/bugzilla/show_bug.cgi?id=39727

64 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" 8 304 Not Modified 9 main.js Content-Encoding: gzip proxy gives browser mismatched content

65 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 2008 23:53:57 GMT 4 main.js Content-Encoding: gzip Cache-Control: max-age=0 Last-Modified: Thu, 21 Aug 2008 23: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 2008 23:53:57 GMT 8 main.js Cache-Control: max-age=0 Last-Modified: Fri, 22 Aug 2008 09: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 2008 09:43:15 GMT

66 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

67 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?

68 Rule 5: Put Stylesheets at the Top progress indicators: * reassure the system is working convey how much time is left provide something to look at the web page is the progress indicator progressive rendering – draw content as soon as it's available stylesheets block progressive rendering in IE, and cause "flash" in Firefox David Hyatt talks about how browsers work: http://weblogs.mozillazine.org/hyatt/archives/2004_05.html#005496 * Jakob Nielson, http://www.useit.com/papers/responsetime.html

69 stylesheets in IE in IE, nothing in the page is drawn until all stylesheets are done downloading reasoning: parse all rules before drawing any element, avoids having to redraw when stylesheets are at the bottom, there is no progressive rendering => after a long delay the entire page blasts onto the screen http://stevesouders.com/examples/css-fouc.php

70 IE: fastest feels slowest......and slowest feels fastest stylesheet at bottom: content finishes downloading sooner, but rendering starts later => feels slower stylesheet at top: content finishes downloading later, but rendering starts sooner => feels faster true in IE 6, 7, 8

71 stylesheets in Firefox in Firefox, elements are drawn even if stylesheets aren't all downloaded reasoning: progressive rendering makes the page feel faster (most developers will follow the spec and put their stylesheets in HEAD ?) when stylesheets are at the bottom and they change style of rendered elements, elements have to be redrawn => flash of unstyled content http://stevesouders.com/examples/css-fouc.php

72 FF2: stylesheets block stylesheets block downloads in Firefox 2 fixed in Firefox 3

73 IE 6,7 and mime filters mime filter plug-ins alter behavior for specific mime types in IE 6,7 mime filters can affect performance

74 resource.cgi formerly sleep.cgi http://stevesouders.com/bin/resource.cgi ?type=[gif|js|css|html|swf] &sleep=n – number of seconds &expires=[-1|0|1] – sets Expires header in the past (-1), future (1), or none (0) useful in exaggerating load times making it possible to observe browser behavior

75 questions What is progressive rendering? How do stylesheets affect progressive rendering in IE? in Firefox? Why do they take different approaches? What's the best way to avoid these problems?

76 Rule 6: Put Scripts at the Bottom HTTP spec recommends only two connections (parallel downloads) per hostname http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.1.4 results in a stairstep pattern general rule: page load time increases for every two resources added

77 more connections newer browsers open more connections per hostname Chrome 6 Firefox 2 2 Firefox 3 6 IE 6,7 2 IE 8 6 Opera 8 Safari 4 domain sharding – split resources across multiple domains to increase parallelization previous example using two domains browser looks at name, not IP address

78 parallelization is an opportunity for improving load times

79 Rule 6: Put Scripts at the Bottom unfortunately, scripts block in two ways downloading resources below the script rendering elements below the script http://stevesouders.com/hpws/js-middle.php moving the scripts lower means less blocking

80 challenges document.write scripts that perform document.write must be placed where the content is to be inserted alternative: set element.innerHTML ads ads typically are at the top of the page and include scripts alternative: use iframes or lazy-load ads code dependencies some JavaScript must occur higher in the page, and it depends on other scripts alternative: move scripts as low as possible, combine them

81 parallel script loading execute scripts in order, but download them in parallel with other resources available in IE8, Safari 4, Chrome 2 coming in Firefox 3.5 IE6&7 will be around for years, we have to keep them in mind, so… put scripts at the bottom

82 questions How many connections per hostname is suggested in the HTTP/1.1 spec? Do all browsers follow this recommendation? What's domain sharding? In what way do scripts block a web page? Give a situation where you can't just move a script to the bottom of the page. Which browsers support parallel script loading?

83 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

84 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

85 exercise: Web 100 stats http://spreadsheets.google.com/ccc?key=pFI0gp5Gg0kHISKLVMRP9cQ 1.pick two web sites 2.put your name in "reviewer name" column (each web site has two reviewers) 3.use Hammerhead to measure total load time (columns B & C) 4.use YSlow to measure the rest 5.if you're the last one finished with a web site and your stats are very different, find the other reviewer and try to resolve

86 how we got here HTTP overview HPWS Rules 1-6 break web 100 HPWS 7-14

87 Rule 7: Avoid CSS Expressions used to set CSS properties dynamically in IE 5-7 fixes IE CSS 2.1 bugs and shortcomings, such as lack of support for min-width min-width: 600px; width: expression( document.body.clientWidth < 600 ? 600px : auto ); problem: expressions execute 1000s of times mouse move, key press, resize, scroll, etc. http://stevesouders.com/hpws/expression- counter.php (IE only!) expression's JavaScript can slow down pages

88 alternatives to expressions expressions are evaluated all the time (mouse move, etc.), this is what makes them easy but slow alternatives are more work, but reduce the amount of JavaScript code executed alternatives: one-time expressions event handlers

89 one-time expressions if an expression only needs to be calculated once, it can overwrite itself with the value #maindiv { min-width: 600px; width: expression(setW(this));} function setW(elem) { elem.style.runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" ); } doesn't handle window resizing overwrite the expression

90 event handlers tie the code to the specific event(s) of interest #maindiv { min-width: 600px; width: expression(setW(this));} function setW() { elem=document.getElementById('maindiv'); elem.style.runtimeStyle.width = ( document.body.clientWidth < 600 ? "600px" : "auto" ); } window.onresize = setW;

91 Expressions in IE8 expressions are no longer supported in IE8 standards mode reasons: standards compliance – issues fixed in IE8 performance security – "reduce browser attack surface" http://blogs.msdn.com/ie/archive/2008/10/16/ending- expressions.aspx but we'll still need to deal with IE6&7 for years to come

92 questions How do CSS expressions affect performance? What are two workarounds to this problem with CSS expressions?

93 Rule 8: Make JS and CSS External Browser Cache Expt: how much are resources cached? http://yuiblog.com/blog/2007/01/04/performance-research- part-2/ add transparent pixel image: with specific headers: Expires: Thu, 15 Apr 2004 20:00:00 GMT Last-Modified: Wed, 22 Oct 2008 23:49:57 GMT requests from the browser will have one of these response status codes: 200 – the browser does not have the image in its cache 304 – the browser has the image in its cache, but needs to verify the last modified date

94 desired metrics What percentage of users view with an empty cache? # unique users with at least one 200 response total # unique users What percentage of page views are done with an empty cache? total # of 200 responses # of 200 + # of 304 responses

95 cache results 40-60% of users/day visit with an empty cache 75-85% of page views/day are primed cache

96 inline or external? var favNumber = 128; OR

97 doc size, # requests, cache inline html 20K css 10K js 20K png 10K html 50K external html 20K css 10K js 20K png 10K html 50K read from cache empty cacheprimed cache 3 requests 70K faster 5 requests 70K slower 1 request 50K slower 1 request 20K faster

98 inline or external? inline: faster, but HTML document is bigger external: more HTTP requests, but cached variables page views per user (per session), external empty cache stats, external component re-use across pages, external external is typically better main exception: home pages best of both worlds post-onload download dynamic inlining

99 post-onload download inline in front page download external files after onload window.onload = downloadComponents; function downloadComponents() { var elem = document.createElement("script"); elem.src = "http://.../file1.js"; var head = document.getElementsByTagName('head')[0]; head.appendChild(elem);... } speeds up secondary pages

100 dynamic inlining start with post-onload download set cookie after components downloaded server-side: if cookie, use external else, do inline with post-onload download cookie expiration date is key speeds up initial and secondary pages

101 module boundaries fewer files are better – combine JS across all pages into one script? all CSS into one stylesheet? too much combining – a single page downloads more than it needs compromise define a few page "types", build JS and CSS modules for each page type define DHTML components, build JS and CSS modules for each component optimization – lazy-load modules for other pages from the landing page

102 questions What's a 200 status code? 304? If 40-60% of users come in with an empty cache once per day, why are only 15-25% of page views done with an empty cache? What's typically better, inlining or external? What are three variables to consider? Why are home pages the most likely candidates for inlining JS and CSS?

103 Rule 9: Reduce DNS Lookups typically take 20-100ms, sometimes > 500ms OS and browsers cache DNS resolutions

104 viewing DNS in Windows C:\>ipconfig /flushdns Windows IP Configuration Successfully flushed the DNS Resolver Cache. C:\>ipconfig /displaydns Windows IP Configuration www.google.com ---------------------------------------- Record Name..... : www.google.com Record Type..... : 5 Time To Live.... : 43 Data Length..... : 4 Section....... : Answer CNAME Record.... : www.l.google.com

105 TTL < 30 minutes might not impact users TTL (Time to Live) www.amazon.com1 minute www.aol.com1 minute www.cnn.com10 minutes www.ebay.com1 hour www.google.com5 minutes www.msn.com5 minutes www.myspace.com1 hour www.wikipedia.org1 hour www.yahoo.com1 minute www.youtube.com5 minutes March 2007

106 browser DNS cache IE 7 DnsCacheTimeout: 30 minutes KeepAliveTimeout: 1 minute ServerInfoTimeout: 2 minutes Firefox 2 network.dnsCacheExpiration: 1 minute network.dnsCacheEntries: 20 network.http.keep-alive.timeout: 5 minutes Fasterfox: 1 hour, 512 entries, 30 seconds

107 Reducing DNS Lookups use Keep-Alive adding DNS lookups vs. domain sharding identify dominant domain names, reduce non- dominant names for dominant domains – shard across 2-4 CNAMEs

108 questions How long does a DNS lookup typically take? What are three places where DNS resolutions are cached? What's a TTL? How do OSes and browsers (not) honor TTLs? What's the guideline for balancing DNS lookups and domain sharding?

109 Rule 10: Minify JavaScript minification: removing unnecessary characters from code (comments, white space, etc.) obfuscation: minify as well as reduce length of symbol names (munge)

110 original code YAHOO.util.CustomEvent = function(type, oScope, silent, signature) { this.type = type; this.scope = oScope || window; this.silent = silent; this.signature = signature || YAHOO.util.CustomEvent.LIST; this.subscribers = []; if (!this.silent) { } var onsubscribeType = "_YUICEOnSubscribe"; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true); } }; event.js from YUI – http://developer.yahoo.com/yui/

111 minified code YAHOO.util.CustomEvent=function(type,oScope,silent,signatur e){this.type=type;this.scope=oScope||window;this.silent=sil ent;this.signature=signature||YAHOO.util.CustomEvent.LIST;t his.subscribers=[];if(!this.silent){} var_onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscri beType){this.subscribeEvent=new_YAHOO.util.CustomEvent(onsu bscribeType,this,true);}}; JSMin http://crockford.com/javascript/jsmin YUI Compressor http://developer.yahoo.com/yui/compressor/ also munges and minifies CSS

112 obfuscated code YAHOO.util.CustomEvent=function(_1,_2,_3,_4){ this.type=_1; this.scope=_2||window; this.silent=_3; this.signature=_4||YAHOO.util.CustomEvent.LIST; this.subscribers=[]; if(!this.silent){ } var _5="_YUICEOnSubscribe"; if(_1!==_5){ this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true); } }; DoJo Compressor (ShrinkSafe) http://dojotoolkit.org/docs/shrinksafe/ YUI Compressor http://developer.yahoo.com/yui/compressor/

113 obfuscation costs obfuscation typically reduces size more, but has some costs bugs – symbol munged to "aa", namespace conflict maintenance – tag external symbols (eg, API) debugging – harder to read in production

114 minification vs. obfuscation Web Site Original Size After JSMin After ShrinkSafe amazon.com 204K173K156K aol.com 44K40K cnn.com 98K79K74K myspace.com 88K65K64K wikipedia.org 42K28K26K youtube.com 34K26K24K Average85K68K (-21%)64K (-25%) minify – extra savings from obfuscation is not worth the risk

115 gzip and minification Web Site Original Size After Gzip JSMIN & Gzip Shrink-Safe & Gzip amazon.com 204K48K41K42K aol.com 44K16K15K cnn.com 98K29K23K myspace.com 88K23K19K wikipedia.org 42K13K8K youtube.com 34K10K8K Average85K23K (-73%)19K (-78%) minify – obfuscation benefits decline with gzip

116 Top 10 minification Minify External?Minify Inline? Apr 07Oct 08Apr 07Oct 08 www.amazon.comyes www.aol.comsomemost www.cnn.com www.ebay.comyes froogle.google.comyes www.msn.comyes www.myspace.comsome www.wikipedia.org www.yahoo.comyes www.youtube.comyes

117 Minifying CSS savings are typically less compared to JavaScript not as much CSS as JavaScript CSS typically has fewer comments and whitespace greater savings from CSS optimizations merging identical rules abbreviations "#660066" => "#606" "0px" => "0" "background-color:" => "background:"

118 questions What's the difference between minification and obfuscation? How do they compare wrt reducing JavaScript size? What are three drawbacks to obfuscation?

119 Rule 11: Avoid Redirects 3xx status codes: "further action needs to be taken by the user agent in order to fulfill the request" 300 Multiple Choices (based on Content-Type) 301 Moved Permanently 302 Moved Temporarily (aka, Found) 303 See Other (clarification of 302) 304 Not Modified 305 Use Proxy 306 (no longer used) 307 Temporary Redirect (clarification of 302) http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.3 response for conditional GET request most popular HTTP/1.1

120 redirect example go to the new location instead of the original one why use redirects? prettier URLs track traffic authentication GET / HTTP/1.1 Host: astrology.yahoo.com Request HTTP/1.1 301 Moved Permanently Location: http://shine.yahoo.com/astrology/ Response

121 worst blocker inserting a redirect to the HTML document is worse than how stylesheets and scripts block all resources in the page are delayed the user gets very little feedback (nothing in the page) rendering, even the HTML text, is delayed 2 nd worse – redirecting to a script

122 "Moved Permanently" – is it cached? no spec: "cacheable if indicated by a Cache-Control or Expires header field" caching redirects GET / HTTP/1.1 Host: astrology.yahoo.com Request HTTP/1.1 301 Moved Permanently Date: Tue, 28 Oct 2008 07:39:53 GMT Location: http://shine.yahoo.com/astrology/ Cache-Control: private Connection: close Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 Response

123 caching: 301, 302, Expires past Expiresno Expiresfuture Expires 301 Moved Permanently don't cache: all don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome 302 Moved Temporarily don't cache: all don't cache: IE, FF3, Safari, Opera, Chrome cache: FF2 don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome past Expiresno Expiresfuture Expires 301 Moved Permanently don't cache: all don't cache: IE, FF3, Safari, Opera cache: FF2, Chrome don't cache: IE, FF3 *, Safari, Opera cache: FF2, Chrome 302 Moved Temporarily don't cache: all don't cache: IE, FF3, Safari, Opera, Chrome cache: FF2 don't cache: IE, FF3 *, Safari, Opera cache: FF2, Chrome FF2 and Chrome – only browsers to cache redirects * Firefox 3.1 fixes regression from FF2 to FF3

124 redirect alternatives JavaScript document.location = "destination.php"; what if JavaScript is disabled or not present? meta refresh – put in document's HEAD in IE, causes conditional GET requests for all resources (similar to Reload button) # of seconds

125 cache workaround window.onload = function () { document.location = "destination.php"; } one last thing – make this document cacheable! need to let the page load so it can be cached

126 redirects in the top 10 mostly ads # redirects www.aol.com5 www.ebay.com www.facebook.com www.google.com/search search.live.com/results www.msn.com1 www.myspace.com en.wikipedia.org/wiki www.yahoo.com2 www.youtube.com

127 common uses 1.redirect from blah.com to www.blah.com 2.missing trailing slash 3.tracking internal traffic 4.tracking outbound traffic 5.prettier URLs, preserve old URLs 6.connecting web sites 7.ads 8.authentication

128 use 1: www GET / HTTP/1.1 Host: aol.com Request HTTP/1.x 301 Moved Permanently Date: Tue, 28 Oct 2008 23:01:42 GMT Expires: Tue, 28 Oct 2008 23:31:42 GMT Location: http://www.aol.com/ Response why redirect from http://aol.com/ to http://www.aol.com/? set cookies on www domain – non-issue cache resources once regardless of which URL is used http://aol.com/logo.gif http://www.aol.com/logo.gif

129 use 1: www in the top 10 statusExpires aol.com301+30 mins ebay.com301 facebook.com301July 1997 google.com301+30 days search.live.comna msn.com301 myspace.com301 wikipedia.org200 yahoo.com301 youtube.com303Apr 1971 303 See Other – "MUST NOT be cached" how is this possible?! which top 10 sites redirect from blah.com to www.blah.com?

130 use 1: www & Wikipedia all resources referenced via full URLs easy, if you're doing CDN domain sharding cookieless domain another alternative

131 use 2: missing trailing slash GET /msn HTTP/1.1 Host: astrocenter.astrology.msn.com Request HTTP/1.x 301 Moved Permanently Location: http://astrocenter.astrology.msn.com/msn/ Response reasons to redirect for missing trailing slash: autoindexing workaround: don't use autoindexing relative URLs for resources workaround: use base href, full URLs, or URLs relative to root

132 use 3: internal tracking GET /_ylt=Al…ume/**http%3A//tools.search.yahoo.com/abou t/forsearchers.html HTTP/1.1 Host: m.www.yahoo.com Request HTTP/1.x 302 Moved Temporarily Location: http://tools.search.yahoo.com/about/forsearchers.h tml Response "More" link on Yahoo! front page workaround: track referer [sic] on internal servers

133 use 4: outbound tracking GET /url?…url=http%3A%2F%2Fwww.npr.org/… HTTP/1.1 Host: www.google.com Request HTTP/1.x 302 Found Location: http://www.npr.org/ Response clicking on a Google search result workarounds: image beacon – race conditions XMLHttpRequest readyState 2 – faster, more complex HTML 5

134 use 5: prettier URLs GET / HTTP/1.1 Host: music.myspace.com Request HTTP/1.x 302 Moved Location: http://profile.myspace.com/index.cfm?fuseaction=music Response prettier URLs are easier to remember also, preserve old URLs when code changes workaround: mod_rewrite, cacheable redirects

135 use 6: connecting sites http://toolbar.google.com/ http://toolbar.google.com/index.html http://toolbar.google.com/T5/ http://toolbar.google.com/T5/intl/en/index.html http://www.google.com/tools/firefox/toolbar/F T3/intl/en/index.html redirects are an easy way to "integrate" separate teams (T4, T5), separate code bases (IE, FF), separate servers (toolbar, www) workarounds: CNAMEs, mod_rewrite

136 use 7: ads specifically, counting ad impressions advertisers and publishers have a hard time reconciling the count when do you count an ad impression? when a page containing an ad is served? what if the page never arrives? when a page containing an ad arrives at the client? what if the ad request fails, or the user stops the page? when the content of the ad (image, Flash) is requested from the advertiser? what if the user leaves the page before the content arrives? after the content arrives? is it the publisher's fault if the content is slow?

137 use 7: ads how do you count an ad impression? when a page containing an ad is served? count it on the publisher's backend when a page containing an ad arrives at the client? send a beacon from the client when the content of the ad (image, Flash) is requested from the advertiser? count it on the advertiser's backend after the content arrives? send a beacon from the client redirects can help count when content is served and reconcile the two parties

138 use 7: ads http://ad.doubleclick.net/im … 5|1;;cs=o%3fhttp://ad.do ubleclick.net/dot.gif?258824979 http://ad.doubleclick.net/dot.gif?258824979 http://eatps.web.aol.com:9000/open_web_adhoc?subt ype=40 … 458 http://www.aolcdn.com/pops_promo/pixel http://ad.doubleclick.net/ad/N553.AEAOLService/B277 5919.11;dcadv=1297440;sz=1x1;ord=4613012? http://m1.2mdn.net/viewad/1297440/1x1.gif from http://www.aol.com/ double logging?

139 use 7: ads http://ads.cnn.com/event.ng/Type=count&Clie … ARd http://i.cdn.turner.com/cnn/images/1.gif http://ad.doubleclick.net/ad/N3880.SD146.3880/B310 7454.25;dcove=o;sz=1x1;ord=dwgksue,beqpWcytARh? http://m1.2mdn.net/viewad/1139835/67-1x1.gif from http://www.cnn.com/ double logging?

140 use 8: authentication cookies are used for authentication cookies can only be set on the page's domain how authenticate someone on domain A if they're currently on domain B? redirects authentication is often on https servers how authenticate someone on https if they're currently on http? redirects

141 use 8: authentication https://www.google.com/accounts/ServiceLoginBoxAuth https://www.google.com/accounts/CheckCookie?con tinue=http%3A%2F%2Fgroups.google.com%2Fgroups %2Fauth%3F_done … http://groups.google.com/groups/auth?_done … http://groups.google.com/ one reason why redirects with Set-Cookie are sometimes not cached

142 avoid redirects eliminate the need base href or full URLs for resources referer tracking HTML 5 – A ping and LINK pingback CNAMEs mod_rewrite no autoindex make them cacheable 301 with future Expires JavaScript & meta refresh with future Expires

143 questions What's the status text for 301 and 302? What HTTP response header contains the URL the user is redirected to? Why are redirects worse than stylesheets and scripts in terms of blocking? If a redirect is "Moved Permanently", does that mean it's cached? Which browsers today cache redirects? What are two other techniques for doing redirects? How can they be used to make redirects cacheable?

144 Rule 12: Remove Duplicate Scripts hurts performance extra HTTP requests if not cacheable http://stevesouders.com/hpws/dupe-scripts.php IE and FF extra executions http://stevesouders.com/hpws/dupe-scripts-cached10.php all browsers atypical? happens with ads http://www.aol.com/ adsonar.js (6K) loaded six times happens with iframes http://www.ossamples.com/recipes/ fc-os-ext.js (15K), gadgets_en.js (155K) each loaded 3 times

145 script insertion Functions "; } ?>

146 questions What are two typical causes of duplicate scripts? In what way(s) can duplicate scripts be bad for performance?

147 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... Rule 13: Configure ETags 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... Expires and Last-Modified

148 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 304 Not Modified Conditional GET (IMS) IMS determines validity – does the browser's cached version match what's on the server? the comparison is based on the resource's date a 304 response is sent instead of all the data IMS is used when Reload is pressed

149 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... ETag response header 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 ETag: "19f1e-7920-4525b037f0440" XmoÛHþ\ÿFÖvã*wØoq...

150 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 If-None-Match: "19f1e-7920-4525b037f0440" HTTP/1.1 304 Not Modified Conditional GET (INM) alternative way to test validity

151 what is an ETag? http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.11 added in HTTP/1.1 used by clients and servers to validate expired resources more flexible than Last-Modified date "An entity tag consists of an opaque quoted string" " An entity tag MUST be unique across all versions of all entities associated with a particular resource."

152 If-None-Match (hit) "If any of the entity tags match the entity tag of the entity that would have been returned in the response to a similar GET request (without the If- None-Match header) on that resource[…], then the server MUST NOT perform the requested method, unless required to do so because the resource's modification date fails to match that supplied in an If-Modified-Since header field in the request. Instead, if the request method was GET or HEAD, the server SHOULD respond with a 304 (Not Modified) response,…" http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.26

153 INM, IMS hit & miss hitmiss hit304full response miss If-Modified- Since If-None- Match

154 If-None-Match (miss) If none of the entity tags match, then the server MAY perform the requested method as if the If-None-Match header field did not exist, but MUST also ignore any If-Modified-Since header field(s) in the request. That is, if no entity tags match, then the server MUST NOT return a 304 (Not Modified) response.

155 INM, IMS hit & miss hitmiss hit304full response missfull response If-Modified- Since If-None- Match if not managed properly, sending both IMS and INM lowers the chances of a simple, small 304 response How could it not be managed properly?!

156 Apache ETags "19f1e-7920-4525b037f0440" "inode-size-timestamp" inode – used by filesystems to store file type, owner, group, permissions, etc. inode for the same file differs across servers even if file size, timestamp, and directory is the same http://stevesouders.com/images/arrow-right-9x13.png ETag: "21f5315-d4-5d51f0c0" http://1.cuzillion.com/images/arrow-right-9x13.png ETag: "1ee57ec-d4-5d51f0c0"

157 IIS ETags "b4f35327edac51:113f" "timestamp:changenumber" changenumber – counter to track IIS configuration changes changenumber rarely the same across servers http://hp.msn.com/global/c/hpv10/favicon.ico ETag: "b4f35327edac51:113f" ETag: "b4f35327edac51:e6e"

158 example ETag miss GET /global/c/hpv10/favicon.ico HTTP/1.1 Host: hp.msn.com If-Modified-Since: Wed, 26 Oct 2005 22:39:58 GMT If-None-Match: "b4f35327edac51:19bc" HTTP/1.x 200 OK Content-Length: 1406 Etag: "b4f35327edac51:d76" Last-Modified: Wed, 26 Oct 2005 22:39:58 GMT Expires: Wed, 06 Feb 2008 01:10:16 GMT timestamp is the same Last-Modified matches (but IMS misses) changenumber differs, validations misses, entire body is resent validation miss

159 the problem with ETags the default ETag syntax in Apache and IIS makes it unlikely that INM will match across servers, even when the resource is the same probability of an incorrect INM miss: (n-1)/n where "n" is the number of servers not an issue if you just have one server http://www.apacheweek.com/issues/02-01-18 "can cause an unnecessary performance hit as resources are fetched more often than is required" http://support.microsoft.com/kb/922703 "IIS 6.0 sends a 200 response because it considers the different change numbers to mean that [the resources] are not the same versions"

160 the solution for ETags if you're not leveraging ETags, turn them off reduces size of requests and responses reduces outbound traffic from your servers increases proxy cache hit rate Apache: FileETag none IIS: synchronize changenumber across servers http://support.microsoft.com/kb/922703/

161 ETags in the wild serverETags? default syntax? www.aol.comAOLserverno – www.ebay.comIISyes www.facebook.comApacheno – www.google.com/searchgwsno – search.live.com/resultsASP.NETyesno www.msn.comIISno – www.myspace.comApachesomeno en.wikipedia.org/wiki Apache lighthttpd some yes no ? www.yahoo.comYTSno – www.youtube.combtfeno –

162 possible uses for ETags ???

163 questions Why were ETags introduced in HTTP/1.1? What do "IMS" and "INM" stand for? How do IMS and INM interplay during resource validation? What component in the default ETag syntax hurts performance in Apache and IIS, and why? What are three performance gains you can achieve by turning off ETags?

164 Rule 14: Make Ajax Cacheable communities rich UI mashups Asynchronous JS and XML layer between data and UI JS, CSS, & DOM used to modify the page

165 async == instantaneous (?) try Google Maps on dialup passive Ajax requests in anticipation of user's needs e.g., download address book for webmail active Ajax requests in response to user action e.g., email search request user is waiting; not instantaneous optimize these first

166 Ajax optimizations add an Expires header gzip components minify JavaScript avoid redirects configure ETags most important

167 cache Ajax? really?! but... it's dynamic yes, but for this [user | time | browser] it's [always the same | doesn't change for awhile] it's data sometimes data doesn't change it's private :no-store doesn't always work should you use https?

168 caching XHR vs. HTML XHR and HTML often contain dynamic, personalized data why can I cache XHR, but not HTML? the URL for HTML is often frozen bookmarks cross-references prettier memorized developers control what's in XHR URLs the XHR URL is contained inside the HTML the developer can modify the XHR URL with data to avoid a cache hit

169 ex: Google Calendar http://www.google.com/calendar/contacts HTTP/1.x 200 OK Cache-Control: no-cache, no-store, max-age=0, must- revalidate Pragma: no-cache Expires: Fri, 01 Jan 1990 00:00:00 GMT Content-Type: text/javascript; charset=UTF-8 Content-Encoding: gzip Date: Mon, 10 Nov 2008 22:00:57 GMT Content-Length: 1562 solution: add modification timestamp to URL http://www.google.com/calendar/contacts_1226354800

170 questions Which performance rules so far apply to Ajax? What are passive Ajax requests? active? Why may developers view the cacheability of Ajax responses differently than other content? If I can cache XHRs, why can't I cache HTML that also contains dynamic data?

171 LUNCH!

172 morning wrap-up EFWS 1-4 break EFWS 5-8 performance analysis state of performance

173 morning wrap-up EFWS 1-4 break EFWS 5-8 performance analysis state of performance

174 September 2007

175 June 2009

176 Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Writing efficient JavaScript Nicholas Zakas Creating responsive web apps Ben Galbraith, Dion Almaer Scaling with Comet Dylan Schiemann Going Beyond Gzipping Tony Gentilcore Optimizing Images Stoyan Stefanov, Nicole Sullivan

177 AOL eBay Facebook MySpace Wikipedia Yahoo! why focus on JavaScript? YouTube

178 scripts block blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008

179 a tool for quickly constructing web pages to see how components interact Open Source http://stevesouders.com/cuzillion/ Cuzillion 'cuz there are a zillion pages to check

180 JavaScript Functions Executed before onload www.aol.com115K30% www.ebay.com183K44% www.facebook.com1088K 9% www.google.com/search15K45% search.live.com/results17K24% www.msn.com131K31% www.myspace.com297K18% en.wikipedia.org/wiki114K32% www.yahoo.com321K13% www.youtube.com240K18% 26% avg 252K avg initial payload and execution

181 the other 74% what's the other ~74% of JavaScript for? conditional blocks – errors, specific browsers, edge cases DHTML features – dynamic menus, popup DIVs, XHR cruft! given the blocking nature of JavaScript, it's painful to slowdown the page for JavaScript that may never be used

182 Splitting the initial payload split your JavaScript between what's needed to render the page and everything else load "everything else" after the page is rendered separate manually (Firebug); tools needed to automate this (Doloto from Microsoft) load scripts without blocking – how?

183 questions What's the average size of JavaScript downloaded by the Alexa top ten? On average how much of that is executed before onload? Why is this measurement done at the onload event? Why is there so much JavaScript that's not called before onload? What does "lazy load" mean? How do you lazy load a script?

184 MSN Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName("HEAD")[0]; var c=g.createElement("script"); c.type="text/javascript"; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN.com: parallel scripts

185 Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

186 XHR Eval script must have same domain as main page must refactor script var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); http://stevesouders.com/cuzillion/?ex=10009

187 XHR Injection var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page http://stevesouders.com/cuzillion/?ex=10015

188 Script in Iframe

';
Ads by Google