1 / 16

CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance

CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance. Steve Souders Google souders@cs.stanford.edu. The Importance of Frontend Performance. Frontend vs. Backend. 9%. 91%. 17%. 83%. iGoogle, primed cache. iGoogle, empty cache. Definitions. Backend

analise
Télécharger la présentation

CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance

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. CS193H:High Performance Web SitesLecture 2: The Importance of Frontend Performance Steve Souders Google souders@cs.stanford.edu

  2. The Importance of Frontend Performance Frontend vs. Backend 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache

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

  4. Time Spent on the Frontend

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

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

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

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

  9. Packet Sniffers measure HTTP requests HTTPWatch http://www.httpwatch.com/ IE and Firefox, Windows only contact me if you want a free Pro version Firebug net panel less accurate timings (includes blocking time) others: AOL Pagetest (web-based), Fiddler (Windows), Wireshark (low-level), IBM Page Detailer (Windows)

  10. Firebug Joe Hewitt, January 2006 Firebug Working Group, Mozilla took it over 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/

  11. YSlow

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

  13. Homework Go to http://groups.google.com/group/cs193h-hpws and "Apply for group membership" (if you haven't already) Contact me if you want a free Pro version of HTTPWatch (Windows only) Read HPWS, Chapter B: HTTP Overview Install Firebug, YSlow, HTTPWatch (free version, if Windows)

  14. Questions What's the white space in the HTTP profiles? What's empty vs. primed cached? Why does the browser cache resources? Why is the HTML document typically not cached? Give three reasons why focusing on the frontend is the place to start? Why are packet sniffers not good for measuring page load time?

More Related