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

2 Speed Matters users notice pride in our work
engineering best practices Google: +500 ms  -20% traffic* Amazon: +100 ms  -1% sales* *http://home.blarg.net/~glinden/StanfordDataMining ppt

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:


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

Similar presentations


Ads by Google