steve souders souders@google.com disclaimer: this content does not necessarily reflect the opinions...

Steve Souderssouders@google.comhttp://stevesouders.com/

Disclaimer: This content does not necessarily reflect the opinions of my employer.

High Performance Web Sites

Essential Knowledge for Frontend Engineers

17%

83%

iGoogle, primed cache

The Importance of Frontend Performance

9% 91%

iGoogle, empty cache

Time Spent on the Frontend

Empty Cache

Primed Cache

www.aol.com 97% 97%

www.ebay.com 95% 81%

www.facebook.com 95% 81%

www.google.com/search

47% 25%

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%

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

14 Rules1. Make fewer HTTP

requests2. Use a CDN3. Add an Expires header4. Gzip components5. Put stylesheets at the

top6. Put scripts at the

bottom7. Avoid CSS expressions8. Make JS and CSS

external9. Reduce DNS lookups10.Minify JS11.Avoid redirects12.Remove duplicate

scripts13.Configure ETags14.Make AJAX cacheable

High Performance Web Sites

YSlow

http://conferences.oreilly.com/velocity/ 20% discount: vel08st

Rule 1: Make fewer HTTP requests

CSS sprites

combined scripts, combined stylesheets

image maps

inline images

CSS Sprites

size of combined image is less

<span style="

background-image: url('sprites.gif');

background-position: -260px -90px;">

</span>

Rule 3: Add an Expires header not just for images

Images

Stylesheets

Scripts

% with

Expires

Median Age

amazon.com 0/62 0/1 0/3 0% 114 days

aol.com 23/43 1/1 6/18 48% 217 days

cnn.com 0/138 0/2 2/11 1% 227 days

ebay.com 16/20 0/2 0/7 55% 140 days

google.com/ig 8/14 1/1 2/3 65% 8 days

msn.com 32/35 1/1 3/9 80% 34 days

myspace.com 0/18 0/2 0/2 0% 1 day

wikipedia.org 6/8 1/1 2/3 75% 1 day

yahoo.com 23/23 1/1 4/4 100% n/a

youtube.com 0/32 0/3 0/7 0% 26 days

Rule 5: Put stylesheets at the top

stylesheets block rendering in IE

solution: put stylesheets in HEAD (per spec)

avoids Flash of Unstyled Content

use LINK (not @import)

Rule 6: Move scripts to the bottom

scripts block parallel downloads across all hostnames

scripts block rendering of everything below them in the page

move scripts as low in the page as possible

Even Faster Web Sites

1. Split the initial payload2. Load scripts without blocking3. Don't scatter scripts4. Split dominant content domains5. Make static content cookie-free6. Reduce cookie weight7. Minify CSS8. Optimize images9. Use iframes sparingly10.To www or not to www

AOLeBayFacebookMySpaceWikipediaYahoo!YouTube

Why focus on JavaScript?

Live Analysis

Takeaways

focus on the frontend

run YSlow: http://developer.yahoo.com/yslow

Velocity: http://conferences.oreilly.com/velocity/

speed matters

you CAN make your site even faster!

Steve Souderssouders@google.comhttp://stevesouders.com/