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

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

Post on 26-Mar-2015

214 views

Category:

Documents

1 download

Embed Size (px)

TRANSCRIPT

<ul><li>Slide 1</li></ul> <p>Steve Souders souders@google.com http://stevesouders.com/ High Performance Web Sites Essential Knowledge for Frontend Engineers Slide 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 Slide 3 The Importance of Frontend Performance Backend: 5% Frontend: 95% Even primed cache, frontend = 88% Slide 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% Slide 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 Slide 6 14 Rules Slide 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 Slide 8 http://developer.yahoo.com/yslow/ performance lint tool grades web pages for each rule YSlow Slide 9 One-liners gzip, expires, css top, js bottom, etags stylesheets before script: amazon, myspace inline script: igoogle parallel scripts amazon, ebay Slide 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 Slide 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 Slide 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 Slide 13 Steve Souders souders@google.com Slide 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 &amp; Chuck Rogers: http://www.flickr.com/photos/two-wrongs/205467442/ "thank you" by nj dodge: http://flickr.com/photos/nj_dodge/187190601/ </p>