CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance Steve Souders...
-
Upload
david-hayes -
Category
Documents
-
view
217 -
download
0
Transcript of CS193H: High Performance Web Sites Lecture 2: The Importance of Frontend Performance Steve Souders...
CS193H:High Performance Web Sites
Lecture 2: The Importance of Frontend Performance
Steve SoudersGoogle
17%
83%
iGoogle, primed cache
The Importance of Frontend Performance
9% 91%
iGoogle, empty cache
Frontend vs. Backend
DefinitionsBackend
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.
FrontendShorthand 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.
Empty Cache
Primed Cache
www.aol.com 97% 97%
www.ebay.com 95% 81%
www.facebook.com 95% 81%
www.google.com/search
47% 0%
search.live.com/results 67% 0%
www.msn.com 98% 94%
www.myspace.com 98% 98%
en.wikipedia.org/wiki 94% 91%
www.yahoo.com 97% 96%
www.youtube.com 98% 97%
Time Spent on the Frontend
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
0.9200.515
primed (same session):1 HTTP request, 15 cache reads8Kb xferred0.515 seconds
Empty vs Primed Cacheempty:30 HTTP requests194Kb xferred3.382 seconds
cache reads
primed (diff session):4 HTTP requests, 28 cache reads13Kb xferred0.920 seconds
0.0 3.382
Memory CacheWhy 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.
Disk CacheTwo 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.
Packet Sniffersmeasure HTTP requestsHTTPWatch
http://www.httpwatch.com/IE and Firefox, Windows onlycontact me if you want a free Pro version
Firebug net panelless accurate timings (includes blocking time)
others: AOL Pagetest (web-based), Fiddler (Windows), Wireshark (low-level), IBM Page Detailer (Windows)
FirebugJoe Hewitt, January 2006Firebug Working Group, Mozilla took it overkit and caboodle:
inspect HTMLCSS explanation and modificationDOM inspectornetwork monitorJavaScript console, log, debugger and profiler
add-on to FirefoxFirebug Lite – bookmarklet for IE, Safari, Opera, etc.
Open Source (free)http://getfirebug.com/
YSlow
YSlowSteve Souders, July 2007web performance analysis tooladd-on to Firebug (extension to an extension)Open Source (free), not open repositoryhttp://developer.yahoo.com/yslow/
HomeworkGo 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)
QuestionsWhat'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?