Presentation is loading. Please wait.

Presentation is loading. Please wait.

High Performance Web Sites Essential Knowledge for Frontend Engineers

Similar presentations

Presentation on theme: "High Performance Web Sites Essential Knowledge for Frontend Engineers"— Presentation transcript:

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 Performance
9% 91% 17% 83% iGoogle, primed cache iGoogle, empty cache

3 Time Spent on the Frontend
Empty Cache Primed Cache 97% 95% 81% 47% 25% 67% 0% 98% 94% 91% 96% Ten top sites according to 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 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 0/62 0/1 0/3 0% 114 days 23/43 1/1 6/18 48% 217 days 0/138 0/2 2/11 1% 227 days 16/20 0/7 55% 140 days 8/14 2/3 65% 8 days 32/35 3/9 80% 34 days 0/18 1 day 6/8 75% 23/23 4/4 100% n/a 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
"thank you" by nj dodge: Steve Souders

Download ppt "High Performance Web Sites Essential Knowledge for Frontend Engineers"

Similar presentations

Ads by Google