Presentation is loading. Please wait.

Presentation is loading. Please wait.

Steve Souders High Performance Web Sites Essential Knowledge for Frontend Engineers.

Similar presentations


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

1 Steve Souders souders@google.com http://stevesouders.com/ High Performance Web Sites Essential Knowledge for Frontend Engineers

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.2006-11-29.ppt

3 The Importance of Frontend Performance Backend: 5% Frontend: 95% Even primed cache, frontend = 88%

4 Time Spent on the Frontend Empty CachePrimed Cache amazon.com82%86% aol.com94%86% cnn.com81%92% ebay.com98%92% google.com86%64% msn.com97%95% myspace.com96%86% wikipedia.org80%88% yahoo.com95%88% youtube.com97%95%

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 Proven to work

6 14 Rules

7 1.Make fewer HTTP requests 2.Use a CDN 3.Add an Expires header 4.Gzip components 5.Put stylesheets at the top 6.Put scripts at the bottom 7.Avoid CSS expressions 8.Make JS and CSS external 9.Reduce DNS lookups 10.Minify JS 11.Avoid redirects 12.Remove duplicate scripts 13.Configure ETags 14.Make AJAX cacheable

8 http://developer.yahoo.com/yslow/ performance lint tool grades web pages for each rule YSlow

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 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 ImagesStylesheetsScripts % with Expires Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days froogle.google.com1/230/1 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days ImagesStylesheetsScripts % with Expires Median Age amazon.com0/620/10/30%114 days aol.com23/431/16/1848%217 days cnn.com0/1380/22/111%227 days ebay.com16/200/20/755%140 days froogle.google.com1/230/1 4%454 days msn.com32/351/13/980%34 days myspace.com0/180/2 0%1 day wikipedia.org6/81/12/375%1 day yahoo.com23/231/14/4100%n/a youtube.com0/320/30/70%26 days

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 souders@google.com

14 CC Images Used "Need for Speed" by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/ "Max speed 15kmh" by xxxtoff: http://www.flickr.com/photos/xxxtoff/219781763/ "Gold Coins" by Technicolor: http://flickr.com/photos/technicolor/44988148/ "Absolutely Nothing is Allowed Here" by Vicki & Chuck Rogers: http://www.flickr.com/photos/two-wrongs/205467442/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/


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

Similar presentations


Ads by Google