1 / 260

today's class

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

willis
Download Presentation

today's class

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. time spent on the frontend

  6. 14 Rules • Make fewer HTTP requests • Use a CDN • Add an Expires header • Gzip components • Put stylesheets at the top • Put scripts at the bottom • Avoid CSS expressions • Make JS and CSS external • Reduce DNS lookups • Minify JS • Avoid redirects • Remove duplicate scripts • Configure ETags • Make AJAX cacheable

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

  8. September 2007

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

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

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

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

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

  14. 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?

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

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

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

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

  19. 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/

  20. YSlow

  21. YSlow 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/

  22. 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?

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

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

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

  26. time spent on the frontend

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

  28. 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/

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

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

  31. image maps <img usemap="#map1" border=0 src="/images/imagemap.gif"> <map name="map1"> <area shape="rect" coords="0,0,31,31" href="home.html"> <area shape="rect" coords="36,0,66,31" href="gifts.html"> <area shape="rect" coords="71,0,101,31" href="cart.html"> <area shape="rect" coords="106,0,136,31" href="settings.html"> <area shape="rect" coords="141,0,171,31" href="help.html"> </map> 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

  32. CSS sprites multiple CSS background images => one image <div style="background-image: url('a_lot_of_sprites.gif'); background-position: -260px -90px; width: 26px; height: 24px;"> </div> overall size reduced generator: http://spritegen.website-performance.org/ http://stevesouders.com/examples/sprites.php

  33. inline images (data: URLs) embed the content of an HTTP response in place of a URL <IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODl...wAIlEEADs="> 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

  34. data: URLs not just for images Hammerhead: <frame src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background..."></frame>

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

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

  37. CDN usage

  38. 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?

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

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

  41. sending Expires (Apache) mod_expires <FilesMatch "\.(gif|jpg|js|css)$"> ExpiresDefault "access plus 1 year" </FilesMatch> sends both Expires and max-age: Expires: Mon, 12 Oct 2009 14:57:34 GMT Cache-Control: max-age=315360000

  42. Expires in the wild – 2007 March 2007

  43. Expires in the wild – 2008 October 2008

More Related