1 / 54

High Performance Web Sites

High Performance Web Sites. @ souders stevesouders.com /docs /intuit- 20120504 . pptx Disclaimer: This content does not necessarily reflect the opinions of my employer. YSlow. Cuzillion. SpriteMe. Hammerhead. 2004.

yetty
Télécharger la présentation

High Performance Web Sites

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. High Performance Web Sites @souders stevesouders.com/docs/intuit-20120504.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

  2. YSlow Cuzillion SpriteMe Hammerhead

  3. 2004

  4. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/ carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/ • #1. Speed: • “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”

  5. en.oreilly.com/velocity2009/public/schedule/detail/8523

  6. en.oreilly.com/velocity2009/public/schedule/detail/8523

  7. Yahoo! 0.4 sec slower traffic  5-9% slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications slideshare.net/stoyan/yslow-20-presentation

  8. blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

  9. en.oreilly.com/velocity2009/public/schedule/detail/7709 blog.mozilla.com/metrics/category/website-optimization/ …shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!

  10. en.oreilly.com/velocity2008/public/schedule/detail/3632

  11. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377

  12. Site speed in search rank …we've decided to take site speed into account in our search rankings. Screen shot of blog post googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

  13. Web Performance Optimization WPO • drives traffic • improves UX • increases revenue • reduces costs

  14. backend frontend “waterfall chart”

  15. Top 10 24% - backend 76% - frontend

  16. 9,990+ 8% - backend 92% - frontend

  17. Intuit 8% - backend 92% - frontend

  18. Performance Golden Rule • 80-90% of the end-user response time is spent on the frontend. Start there. • greater potential • simpler • proven to work

  19. 1. Make fewer HTTP requests 2. Use a CDN 3. Add an Expires header 4. Gzipcomponents 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 14 Rules

  20. Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance Doug Crockford Creating responsive web apps Ben Galbraith, Dion Almaer Writing efficient JavaScript Nicholas Zakas Scaling with Comet Dylan Schiemann Going beyond gzipping Tony Gentilcore Optimizing images StoyanStefanov, Nicole Sullivan

  21. Rule 1: Make Fewer HTTP Requests avg website: 86 HTTP requests, 966 kB* each HTTP request has overhead – even with persistent connections is it possible to reduce HTTP requests without reducing richness? Yes! combine JS, CSS CSS sprites inline images * Feb 1 2012: http://httparchive.org/trends.php

  22. Rule 3: Add an Expires Header  GET /v-app/scripts/107652916-dom.common.js HTTP/1.1 Host: www.blogger.com Accept-Encoding: gzip,deflate HTTP/1.1 200 OK Content-Type: application/x-javascript Last-Modified: Mon, 22 Sep 2011 21:14:35 GMT Content-Length: 2066 Content-Encoding: gzip Expires: Mon, 12 Oct 2012 14:57:34 GMT Cache-Control: max-age=31536000 XmoÛHþ\ÿFÖvã*wØoq...  expiration date determines freshness use Expiresand Cache-Control: max-age must rev filenames

  23. Rule 3: Add an Expires Header Apache: <FilesMatch "\.(png|gif|jpg|js|css|ico)$"> ExpiresActiveOn ExpiresDefault "access plus 10 years" Header set ETag "" </FilesMatch>

  24. domain sharding 6 connections per hostname (generally)

  25. What’s the #1 cause of slow web pages?

  26. JAVASCRIPT!

  27. scripts block <script src="A.js"> blocks parallel downloads and rendering 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3 7 secs: IE 8+, FF 3.5+, Chr3+, Saf4+

  28. initial payload and execution 29% avg 229 K avg

  29. splitting the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking

  30. 1995: scripts in HEAD • <head> • <script src=‘a.js’></script> • </head> blocks other downloads (IE 6-7, images in IE, iframes) downloaded sequentially (IE 6-7) blocks rendering during download & parse-execute

  31. 2007: move scripts to bottom • ... • <script src=‘a.js’></script> • </body> doesn’t block other downloads downloaded sequentially in IE 6-7 blocks rendering during download & parse-execute

  32. 2009: load scripts async var se = document.createElement(‘script’); se.src = ‘a.js’; document.getElementsByTagName(‘head’)[0].appendChild(se); doesn’t block other downloads downloaded in parallel (all browsers) blocks rendering during parse-execute

  33. Google Search window.setTimeout( function(){ var a=document.createElement("script"); a.src="/extern_js/f/CgJlbhz8US8_w.js"; (document.getElementById("xjsd")|| document.body).appendChild(a);}, 0);

  34. Facebook Bootloader.setResourceMap( {"CDYbm": {"name":"js\/32kskxvl4c8w0848.pkg.js", "type":"js", "src":"http:\/\/...\1fakc64i.js"}, ...}); var c=a ? document.body : document.getElementsByTagName('head')[0]; vard=document.createElement('script'); d.type='text/javascript'; d.src=f; c.appendChild(d);

  35. Yahoo! FP YUI.presentation.lazyScriptList = ["http://l.yimg.com/zz/combo?...13 scripts!..."]; d = w.document; h = d.getElementsByTagName("head")[0]; n = d.createElement("script"), n.src = url; h.appendChild(n);

  36. YouTube varc=document.createElement("script"); c.setAttribute("src",b); c.async=k; var d=document.getElementsByTagName("script")[0]; d.parentNode.insertBefore(c,d);

  37. Amazon varhead= document.getElementsByTagName("head")[0]; var script=document.createElement("script"); script.src=s.url; script.onload=script.onreadystatechange= function(){...}; head.appendChild(script);

  38. Craigslist prefetching? <script src="/js/jquery-1.4.2.js"></script> </body> </html> subsequent page: <script src="/js/jquery-1.4.2.js"></script> <script src="/js/toChecklist.js"></script> <script src="/js/tocs.js"></script> </body> </html>

  39. eBay <body> <script src="http://ir.ebaystatic.com/v4js/... ... <script src="http://ir.ebaystatic.com/v4js/... ... <script src="http://ir.ebaystatic.com/v4js/... </body>

  40. Twitter (function loadrunner(E){ ... vare=V.createElement("script"); e.type="text/javascript"; e.async=true; e.onload=g; e.onreadystatechange=function(){...}; f=V.createElement("head"); f.insertBefore(e,f.firstChild)

  41. Bing vara=_d.createElement("script"); a.type="text/javascript"; a.src=b; _d.getElementsByTagName("head")[0].appendChild(a);

  42. Wikipedia script=document.createElement('script'); script.setAttribute('src',src); script.setAttribute('type','text/javascript'); if($.isFunction(callback)){...} if(window.opera){$(function(){document.body.appendChild(script);});} else{head=document.getElementsByTagName('head')[0]; (document.body||head).appendChild(script);}

  43. www.intuit.com 125 1,847 1.587 9.651 requests kB seconds start render seconds PLT mbox.jsdocwrites /mbox/standard blocks ie7.css blocks rendering don’t docwrite scripts domain sharding PNGs take 3-6 seconds to download www.webpagetest.org/result/120503_RC_46SJA/

  44. quickbooks.intuit.com 106 632 1.265 5.740 requests kB seconds start render seconds PLT mbox.jsdocwrites /mbox/standard blocks ie7.css blocks rendering don’t docwrite scripts domain sharding add caching headers www.webpagetest.org/result/120503_B9_46SJB/

  45. turbotax.intuit.com 112 438 2.412 3.523 requests kB seconds start render seconds PLT rendering extremely blocked concat scripts, concatstylesheets don’t mix inline & external scripts don’t docwrite scripts domain sharding add caching headers sprites www.webpagetest.org/result/120503_ZV_46SJC/

  46. turbotax.intuit.com this is turbotax this is turbotax on Page Speed www.webpagetest.org/compare

More Related