Steve Souders

1
High Performance Web SitesEssential Knowledge
for Frontend Engineers

• Steve Souders
• souders_at_google.com
• http//stevesouders.com/

Disclaimer This content does not necessarily
reflect the opinions of my employer.
2
The Importance of Frontend Performance
9
91
17
83
iGoogle, primed cache
iGoogle, empty cache
3
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
4
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
5
14 Rules

1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put stylesheets at the top
6. Put scripts at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Configure ETags
14. Make AJAX cacheable

6
YSlow
High Performance Web Sites
7

• http//conferences.oreilly.com/velocity/ 20
  discount vel08st

8
Rule 1 Make fewer HTTP requests

• CSS sprites
• combined scripts, combined stylesheets
• image maps
• inline images

9
CSS Sprites
ltspan style" background-image
url('sprites.gif') background-position -260px
-90px"gt lt/spangt

• size of combined image is less

10
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
11
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 _at_import)

12
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

13
Even Faster Web Sites

1. Split the initial payload
2. Load scripts without blocking
3. Don't scatter scripts
4. Split dominant content domains
5. Make static content cookie-free
6. Reduce cookie weight
7. Minify CSS
8. Optimize images
9. Use iframes sparingly
10. To www or not to www

14
Why focus on JavaScript?
15

• Live Analysis

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

17
Steve Souders souders_at_google.com http//stevesoude
rs.com/