1. High Performance Web Sites Essential Knowledge for Frontend Engineers
Steve Souders

2. Speed Matters users notice pride in our work
engineering best practices
Google: +500 ms  -20% traffic*
Amazon: +100 ms  -1% sales* *

3. The Importance of Frontend Performance
Backend: 5%
Frontend: 95%
Even primed cache, frontend = 88%

4. Time Spent on the Frontend
Empty Cache
Primed Cache
amazon.com
82%
86%
aol.com
94%
cnn.com
81%
92%
ebay.com
98%
google.com
64%
msn.com
97%
95%
myspace.com
96%
wikipedia.org
80%
88%
yahoo.com
youtube.com

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
If you could cut performance in half, FE changes would be 40-45%, while BE would be only 5-10%.
BE changes are typically more complex: rearchitecture, optimize code, add/modify hw, distribute databases, etc.
FE is simpler: change web server config, place scripts and stylesheets differently in the page, combine requests, etc.
I’ve worked with dev teams to cut response times on 50 properties, often by 25% or more.
Proven to work

6. 14 Rules

7. 14 Rules Make fewer HTTP requests Use a CDN Add an Expires header
Gzip components
Put stylesheets at the top
Put scripts at the bottom
Avoid CSS expressions
Make JS and CSS external
Reduce DNS lookups
Minify JS
Avoid redirects
Remove duplicate scripts
Configure ETags
Make AJAX cacheable
in priority order
addressing these rules improve response times

8. YSlow
performance lint tool
grades web pages for each rule

9. One-liners gzip, expires, css top, js bottom, etags
stylesheets before script: amazon, myspace
inline script: igoogle
parallel scripts – amazon, ebay

10. One-liners Rule 3: Add an Expires Header Rule 4: Gzip Components
ExpiresDefault "access plus 10 years"
Rule 4: Gzip Components
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
Rule 5: Put Stylesheets at the Top
Rule 6: Put Scripts at the Bottom
see Amazon, MySpace
Rule 13: Configure Etags
FileETags none

11. 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/7
55%
140 days
froogle.google.com
1/23 4%
454 days
msn.com
32/35
3/9
80%
34 days
myspace.com
0/18
1 day
wikipedia.org
6/8
2/3
75%
yahoo.com
23/23
4/4
100%
n/a
youtube.com
0/32
26 days
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/7
55%
140 days
froogle.google.com
1/23 4%
454 days
msn.com
32/35
3/9
80%
34 days
myspace.com
0/18
1 day
wikipedia.org
6/8
2/3
75%
yahoo.com
23/23
4/4
100%
n/a
youtube.com
0/32
26 days
One thought: you can't put an Expires header because the content is constantly changing.
But when we look at the Last-Modified header we see that's not the case. For MySpace it is, but Amazon, CNN, Froogle and YouTube all have lengthier Last_modified values.

12. Takeaways focus on the frontend it's time for F2Es to shine
harvest the low-hanging fruit
small investment up front keeps on giving
you do control user response times
LOFNO – be an advocate for your users

13. Steve Souders

14. CC Images Used
"Need for Speed" by Amnemona:
"Max speed 15kmh" by xxxtoff:
"Gold Coins" by Technicolor:
"Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers:
"thank you" by nj dodge: