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

Steve Souders

Google

souders@cs.stanford.edu

The Importance of Frontend Performance

17%

83%

iGoogle, primed cache

9%

91%

iGoogle, empty cache

Frontend vs. Backend

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.

​

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

Empty vs Primed Cache

0.920

0.515

primed (same session):

1 HTTP request, 15 cache reads

8Kb xferred

0.515 seconds

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

3.382

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.

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.

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)

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/

YSlow

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/

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?

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)