high performance web sites essential knowledge for frontend engineers
DESCRIPTION
High Performance Web Sites Essential Knowledge for Frontend Engineers. Steve Souders [email protected] http://stevesouders.com/. Disclaimer: This content does not necessarily reflect the opinions of my employer. The Importance of Frontend Performance. 9%. 91%. 17%. 83%. - PowerPoint PPT PresentationTRANSCRIPT
Steve [email protected]://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 [email protected]://stevesouders.com/