High Performance Web Sites Essential Knowledge for Frontend Engineers Photo courtesy of Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/ Can find these slides on my web site. Steve Souders souders@google.com http://stevesouders.com/ Disclaimer: This content does not necessarily reflect the opinions of my employer.

The Importance of Frontend Performance 9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache

Time Spent on the Frontend Empty Cache Primed Cache www.aol.com 97% www.ebay.com 95% 81% www.facebook.com www.google.com/search 47% 25% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com en.wikipedia.org/wiki 91% www.yahoo.com 96% www.youtube.com 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. http://www.aol.com/ http://www.ebay.com/ http://www.facebook.com/ http://www.google.com/search?hl=en&q=flowers http://www.myspace.com/ http://www.msn.com/ http://search.live.com/results.aspx?q=flowers&mkt=en-us&scope=&FORM=LIVSOP http://en.wikipedia.org/wiki/Flowers http://www.yahoo.com/ http://www.youtube.com/ 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.

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: http://flickr.com/photos/technicolor/44988148/ proven to work

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: http://www.flickr.com/photos/two-wrongs/205467442/

YSlow High Performance Web Sites

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> Size of combined image actually decreases due to reduced image overhead (color tables, formatting info, etc.). size of combined image is less

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.

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

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

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.

Live Analysis http://www.yahoo.com/ - for a complex page it's great this gets an A http://www.google.com/ig - http://www.orkut.com/ - notice the .js isn't downloaded in parallel with the .css http://www.msn.com/ - notice the parallel script downloads

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

Steve Souders souders@google.com http://stevesouders.com/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/ Steve Souders souders@google.com http://stevesouders.com/