1. High Performance Web Sites Essential Knowledge for Frontend Engineers
Photo courtesy of Amnemona:
Can find these slides on my web site.
Steve Souders
Disclaimer: This content does not necessarily reflect the opinions of my employer.

2. The Importance of Frontend Performance9%
91%
17%
83%
iGoogle, primed cache
iGoogle, empty cache

3. Time Spent on the Frontend
Empty Cache
Primed Cache
97%
95%
81%
47%
25%
search.live.com/results
67% 0%
98%
94%
en.wikipedia.org/wiki
91%
96%
Ten top sites according to Alexa.com. Craigslist is actually #10, but it has no JS or CSS, so I use #11 AOL.
Tested on IE6 on Comcast cable modem (~5 mbps) medium powered PC, April 2008.
For Google and Live Search there are so few components (2-4) and they're mostly cacheable so the HTML document is a bigger percentage.

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
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. And feedback from other companies is similar.
background photo courtesy of Technicolor:
proven to work

5. 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
photo courtesy of Vicki & Chuck Rogers:

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 size of combined image is less <span style="
background-image: url('sprites.gif');
background-position: -260px -90px;">
</span>
Size of combined image actually decreases due to reduced image overhead (color tables, formatting info, etc.).
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/7
55%
140 days
google.com/ig
8/14
2/3
65%
8 days
msn.com
32/35
3/9
80%
34 days
myspace.com
0/18
1 day
wikipedia.org
6/8
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.

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
Unfortunately, this is bad for FF because in FF stylesheets block parallel downloads.

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 Split the initial payload
Load scripts without blocking
Don't scatter scripts
Split dominant content domains
Make static content cookie-free
Reduce cookie weight
Minify CSS
Optimize images
Use iframes sparingly
To www or not to www

14. Why focus on JavaScript?
Yahoo!
YouTube
AOL
Wikipedia
eBay
Facebook
MySpace
The JavaScript for features like dropdown menus and feedback could and should be downloaded AFTER the initial page has been rendered.

15. Live Analysis
for a complex page it's great this gets an A -
notice the .js isn't downloaded in parallel with the .css
notice the parallel script downloads

16. Takeaways focus on the frontend
run YSlow:
Velocity:
speed matters
you CAN make your site even faster!
Even if you're site seems fast to you (at work), there are always people on slower connections and people outside the US for whom it's not so fast.
Even if you're #1 in your market, there's always a startup coming up that may be faster.

17. Steve Souders souders@google.com http://stevesouders.com/
"thank you" by nj dodge:
Steve Souders