O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Even Faster Web Sites<br />stevesouders.com/docs/atmedia-20100611.pptx<br />Disclaimer: This content does not necessarily ...
flickr.com/photos/bekahstargazing/318930460/<br />
the importance of        frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, ...
Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components<br />Put stylesheets at the top<br...
Even Faster Web Sites<br />Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous ...
carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed:        “First and ...
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
Yahoo!<br />	0.4 sec slower<br />	traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-...
blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increa...
en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />...
en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search ...
Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at ...
Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces c...
What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
(lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/23467830...
Search<br />
Sports<br />
News<br />
Shopping<br />
Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
Progressive Enhancement<br /><br />Progressive Rendering<br />
<script src="A.js"> blocks parallel downloads and rendering<br />9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3<br />7 secs...
29% avg<br />229 K avg<br />initial payload and execution<br />
split the initial payload<br />split your JavaScript between what's needed to render the page and everything else<br />def...
Loading Scripts Without Blocking<br />XHR Eval<br />XHR Injection<br />Script in Iframe<br />Script DOM Element<br />Scrip...
XHR Eval<br />varxhrObj = getXHRObject();<br />xhrObj.onreadystatechange = <br />  function() { <br />    if ( xhrObj.read...
Script DOM Element<br />var se = document.createElement('script');<br />se.src = 'http://anydomain.com/A.js';<br />documen...
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
window.setTimeout(<br />function(){<br />var a=document.createElement("script");<br /> a.src="/extern_js/f/CgJlbhz8US8_w.j...
Bootloader.setResourceMap(<br />{"CDYbm":<br /> {"name":"js/32kskxvl4c8w0848.pkg.js",<br />  "type":"js",<br />  "src":"ht...
YUI.presentation.lazyScriptList = <br />	["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[.....
<script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><br /><script sr...
<script src="/js/jquery-1.4.2.js"></script><br /></body><br /></html><br />subsequent page:<br /><script src="/js/jquery-1...
<script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><br /><script src=...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script><br /><scrip...
var a=_d.createElement("script");<br />a.type="text/javascript";<br />a.src=b;<br />_d.getElementsByTagName("head")[0].app...
Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />http://www.flickr.com/pho...
Próximos SlideShares
Carregando em…5
×

@media - Even Faster Web Sites

18.523 visualizações

Publicada em

Publicada em: Tecnologia, Design
  • Seja o primeiro a comentar

@media - Even Faster Web Sites

  1. 1. Even Faster Web Sites<br />stevesouders.com/docs/atmedia-20100611.pptx<br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br />flickr.com/photos/ddfic/722634166/<br />
  2. 2. flickr.com/photos/bekahstargazing/318930460/<br />
  3. 3. the importance of frontend performance<br />9%<br />91%<br />17%<br />83%<br />iGoogle, primed cache<br />iGoogle, empty cache<br />http://www.flickr.com/photos/minami/2458184654/<br />
  4. 4. Make fewer HTTP requests<br />Use a CDN<br />Add an Expires header<br />Gzip components<br />Put stylesheets at the top<br />Put scripts at the bottom<br />Avoid CSS expressions<br />Make JS and CSS external<br />Reduce DNS lookups<br />Minify JS<br />Avoid redirects<br />Remove duplicate scripts<br />Configure ETags<br />Make AJAX cacheable<br />14 Rules<br />
  5. 5. Even Faster Web Sites<br />Splitting the initial payload<br />Loading scripts without blocking<br />Coupling asynchronous scripts<br />Positioning inline scripts<br />Sharding dominant domains<br />Flushing the document early<br />Using iframes sparingly<br />Simplifying CSS Selectors<br />Understanding Ajax performance..........Doug Crockford<br />Creating responsive web apps............Ben Galbraith, Dion Almaer<br />Writing efficient JavaScript.............Nicholas Zakas<br />Scaling with Comet.....................Dylan Schiemann<br />Going beyond gzipping...............Tony Gentilcore<br />Optimizing images...................Stoyan Stefanov, Nicole Sullivan<br />flickr.com/photos/motionblur/3049984012/<br />
  6. 6. carsonified.com/blog/business/fred-wilsons-10-golden-principles-of-successful-web-apps/<br />#1. Speed: “First and foremost, we believe that speed is more than a feature. Speed is the most important feature.”<br />
  7. 7. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  8. 8. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  9. 9. Yahoo!<br /> 0.4 sec slower<br /> traffic  5-9%<br />slideshare.net/stoyan/dont-make-me-wait-or-building-highperformance-web-applications<br />slideshare.net/stoyan/yslow-20-presentation<br />
  10. 10. blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  11. 11. en.oreilly.com/velocity2009/public/schedule/detail/7709<br />blog.mozilla.com/metrics/category/website-optimization/<br />…shaved 2.2 seconds off the average page load time and increased download conversions by 15.4%!<br />
  12. 12. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
  13. 13. Site speed in search rank<br />Screen shot of blog post<br />…we've decided to take site speed into account in our search rankings.<br />googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html<br />
  14. 14.
  15. 15. Both<br />combine scripts<br />combine stylesheets<br />add an Expires header<br />gzip responses<br />put stylesheets at the top<br />put scripts at the bottom<br />avoid CSS expressions<br />make JS and CSS external<br />reduce DNS lookups<br />minify JS and CSS<br />avoid redirects<br />remove duplicate scripts<br />make Ajax cacheable<br />reduce cookie size<br />use cookie-free domains<br />don't scale images<br />YSlow<br />use CSS sprites<br />use a CDN<br />configure ETags<br />use GET for Ajax requests<br />reduce # of DOM elements<br />no 404s<br />avoid image filters<br />optimize favicon<br />Page Speed<br />defer loading JS<br />remove unused CSS<br />use efficient CSS selectors<br />optimize images<br />optimize order of CSS & JS<br />shard domains<br />leverage proxy caching<br />
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20. Web<br />Performance<br />Optimization<br />WPO<br />drives traffic<br />improves UX<br />increases revenue<br />reduces costs<br />flickr.com/photos/pedromourapinheiro/3123885534/<br />
  21. 21. What makes sites feel slow?<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
  22. 22. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />http://www.flickr.com/photos/kevincollins/234678305/<br />
  23. 23. Search<br />
  24. 24. Sports<br />
  25. 25. News<br />
  26. 26. Shopping<br />
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
  32. 32. Progressive Enhancement<br /><br />Progressive Rendering<br />
  33. 33. <script src="A.js"> blocks parallel downloads and rendering<br />9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3<br />7 secs: IE 8, FF 3.5, Chr3, Saf 4<br />Why focus on JavaScript?<br />
  34. 34. 29% avg<br />229 K avg<br />initial payload and execution<br />
  35. 35. split the initial payload<br />split your JavaScript between what's needed to render the page and everything else<br />defer "everything else"<br />split manually (Page Speed), automatically (Microsoft Doloto)<br />load scripts without blocking<br />http://www.flickr.com/photos/devcentre/108032900/<br />
  36. 36. Loading Scripts Without Blocking<br />XHR Eval<br />XHR Injection<br />Script in Iframe<br />Script DOM Element<br />Script Defer<br />document.write Script Tag<br />
  37. 37. XHR Eval<br />varxhrObj = getXHRObject();<br />xhrObj.onreadystatechange = <br /> function() { <br /> if ( xhrObj.readyState != 4 ) return;<br />eval(xhrObj.responseText);<br /> };<br />xhrObj.open('GET', 'A.js', true);<br />xhrObj.send('');<br />script & page must be same domain<br />massage script?<br />
  38. 38. Script DOM Element<br />var se = document.createElement('script');<br />se.src = 'http://anydomain.com/A.js';<br />document.getElementsByTagName('head')<br />[0].appendChild(se); <br />script & page domains can differ<br />no need to massage JavaScript<br />may not preserve execution order<br />
  39. 39. GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element's text<br />remove comments<br />eval() when invoked<br />inline or iframe<br />awesome for prefetching JS that might (not) be needed<br />
  40. 40.
  41. 41. window.setTimeout(<br />function(){<br />var a=document.createElement("script");<br /> a.src="/extern_js/f/CgJlbhz8US8_w.js";<br /> (document.getElementById("xjsd")||<br />document.body).appendChild(a);},<br />0);<br />Google Search<br />
  42. 42. Bootloader.setResourceMap(<br />{"CDYbm":<br /> {"name":"js/32kskxvl4c8w0848.pkg.js",<br /> "type":"js",<br /> "src":"http://.../1fakc64i.js"},...});<br />var c=a ? document.body : document.getElementsByTagName('head')[0];<br />var d=document.createElement('script');<br />d.type='text/javascript';<br />d.src=f;<br />c.appendChild(d);<br />Facebook<br />
  43. 43. YUI.presentation.lazyScriptList = <br /> ["http://l.yimg.com/a/combo?arc/yui/substitute_0.1.9.js&arc/yui/oop_0.1.10.js&[...58 more!...]"];<br />d = w.document; <br />h = d.getElementsByTagName("head")[0];<br />n = d.createElement("script"),<br />n.src = url;<br />h.appendChild(n);<br />Yahoo! FP<br />
  44. 44. <script src="http://bits.wikimedia.org/skins-1.5/common/wikibits.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/jquery.min.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/ajax.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/skins-1.5/common/mwsuggest.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/js/plugins.combined.min.js?281c" type="text/javascript"></script><br /><script src="http://bits.wikimedia.org/w/extensions/UsabilityInitiative/Vector/Vector.combined.min.js?281c" type="text/javascript"></script><br /><script src="http://upload.wikimedia.org/centralnotice/wikipedia/en/centralnotice.js?281c" type="text/javascript"></script><br /><script src="/w/index.php?title=-&amp;action=raw&amp;gen=js&amp;useskin=vector&amp;281c" type="text/javascript"></script><br /></head><br />Wikipedia<br />
  45. 45. <script src="/js/jquery-1.4.2.js"></script><br /></body><br /></html><br />subsequent page:<br /><script src="/js/jquery-1.4.2.js"></script><br /><script src="/js/toChecklist.js"></script><br /><script src="/js/tocs.js"></script><br /></body><br /></html><br />Craigslist<br />
  46. 46. <script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311309442_1_en_US.js"></script><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/GH-RA_ReskinEbay_e67311309442_1_en_US.js"></script><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/SYS-RA_vjo_e67311252543_opta_en_US.js"><br /><script src="http://include.ebaystatic.com/v4js/en_US/e673/CCHP_HomepageV4_SLDR_e67311252543_6_en_US.js"></script><br />eBay<br />
  47. 47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/twitter.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/lib/jquery.tipsy.min.js?1276019402" type="text/javascript"></script><br /><script src='http://maps.google.com/maps/api/js?sensor=false' type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/lib/gears_init.js?1276019402" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/geov1.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script><br /><script src="http://a2.twimg.com/a/1276018586/javascripts/lib/mustache.js?1276019402" type="text/javascript"></script><br /><script src="http://a3.twimg.com/a/1276018586/javascripts/dismissable.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/api.js?1276019402" type="text/javascript"></script><br /><script src="http://a0.twimg.com/a/1276018586/javascripts/controls.js?1276019402" type="text/javascript"></script><br /><script src="http://a1.twimg.com/a/1276018586/javascripts/hover_cards.js?1276019402" type="text/javascript"></script><br /></body><br /></html><br />Twitter<br />
  48. 48. var a=_d.createElement("script");<br />a.type="text/javascript";<br />a.src=b;<br />_d.getElementsByTagName("head")[0].appendChild(a);<br />Bing<br />onload<br />
  49. 49.
  50. 50. Ray Morgan<br />Zappos.com<br />MakindeAdeagbo<br />Facebook<br />Jenn Lukas<br />Happy Cog<br />http://www.flickr.com/photos/waltzaround/4041024134/<br />
  51. 51.
  52. 52. speed matters<br />focus on the frontend<br />run Page Speed and YSlow<br />progressive enhancement  progressive rendering<br />takeaways<br />http://www.flickr.com/photos/34771728@N00/361526991/<br />
  53. 53. Steve Souders<br />@souders, souders@google.com<br />stevesouders.com/docs/atmedia-20100611.pptx<br />flickr.com/photos/nj_dodge/187190601/<br />

×