Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Performance Optimization<br />stevesouders.com/docs/webstock-20110217.pptx<br />Disclaimer: This content does not nece...
flickr.com/photos/bekahstargazing/318930460/<br />
2004<br />
 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 />
slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<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 ...
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 />flickr.com/photos/kevincollins/234678305/<br />
(lack of)<br />Progressive Rendering<br />[next page being loaded]<br />flickr.com/photos/kevincollins/234678305/<br />
Google<br />Yahoo<br />Bing<br />Ask<br />does this matter?<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...
Loading Scripts Without Blocking<br />XHR Eval<br />XHR Injection<br />Script in Iframe<br />Script DOM Element<br />Scrip...
Script DOM Element<br />var se = document.createElement('script');<br />se.src = 'http://anydomain.com/A.js';<br />documen...
MeeboIframed JS<br />var iframe = document.createElement('iframe');<br />document.body.appendChild(iframe);<br />var doc =...
GMail Mobile<br /><script type="text/javascript"><br />/*<br />var ... <br />*/<br /></script><br />get script DOM element...
ControlJSa JavaScript module for making scripts load faster<br />control.js loads async<br />varcjsscript = document.creat...
ControlJSa JavaScript module for making scripts load faster<br />just change HTML<br />inline & external scripts<br /><scr...
ControlJSa JavaScript module for making scripts load faster<br />async downloads<br />delays execution<br />1st pass:<br /...
ControlJSa JavaScript module for making scripts load faster<br />downloads without executing<br /><script type="text/cjs" ...
ControlJSa JavaScript module for making scripts load faster<br />handles (some) document.write<br /><ul><li>override docum...
set SPAN innerHTML if there’s a write
parse out SCRIPT tags & add SCRIPT elem</li></ul>better solutions:<br /><ul><li>Aptimize – http://www.aptimize.com/
GhostWriter – http://digital-fulcrum.com/solutions /ghostwriter-complete-control/</li></li></ul><li>ControlJSa JavaScript ...
ControlJSa JavaScript module for making scripts load faster<br />http://stevesouders.com/controljs/<br />http://code.googl...
slideshare.net/CMSummit/ms-internet-trends060710final<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
slideshare.net/CMSummit/ms-internet-trends060710final<br />
to intr<br />to intr<br />Twitter iPhone app<br />open timeline<br />
Twitter iPhone app<br />execute search<br />
Twitter iPhone app<br />open timeline<br />
just released<br />this morning<br />1am<br />
Upcoming SlideShare
Loading in …5
×

Website performance optimisation

3,243 views

Published on

Slides for Steves Souders at Webstock 11

Published in: Technology
  • Be the first to comment

Website performance optimisation

  1. 1. Web Performance Optimization<br />stevesouders.com/docs/webstock-20110217.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. 2004<br />
  4. 4. 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 />
  5. 5. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  6. 6. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
  7. 7. 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 />
  8. 8. 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 />
  9. 9. 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 />
  10. 10. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
  11. 11. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
  12. 12. 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 />
  13. 13. 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 />
  14. 14. What makes sites feel slow?<br />flickr.com/photos/kevincollins/234678305/<br />
  15. 15. (lack of)<br />Progressive Rendering<br />[next page being loaded]<br />flickr.com/photos/kevincollins/234678305/<br />
  16. 16. Google<br />Yahoo<br />Bing<br />Ask<br />does this matter?<br />
  17. 17.
  18. 18. Progressive Enhancement<br />deliver HTML<br />defer JS<br />avoid DOM<br />decorate later<br />
  19. 19. Progressive Enhancement<br /><br />Progressive Rendering<br />
  20. 20. <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-9, FF 3.6, Chr6, Saf 4<br />Why focus on JavaScript?<br />
  21. 21. 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 />
  22. 22. 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 />may not preserve execution order<br />
  23. 23. MeeboIframed JS<br />var iframe = document.createElement('iframe');<br />document.body.appendChild(iframe);<br />var doc = iframe.contentWindow.document;<br />doc.open().write('<body onload="insertJS()">');<br />doc.close();<br />loads asynchronously<br />delays parent’s load event: FF, Chr, Saf<br />great for 3rd party scripts<br />better for sandboxing & security<br />avoids iframe src roundtrip<br />
  24. 24. 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 />
  25. 25. ControlJSa JavaScript module for making scripts load faster<br />control.js loads async<br />varcjsscript = document.createElement('script');<br />cjsscript.src = "control.js";<br />varcjssib = document.getElementsByTagName('script')[0];<br />cjssib.parentNode.insertBefore(cjsscript, cjssib);<br />
  26. 26. ControlJSa JavaScript module for making scripts load faster<br />just change HTML<br />inline & external scripts<br /><script type="text/cjs" data-cjssrc="main.js"><br /></script><br /><script type="text/cjs"><br />var name = getName();<br /></script><br />
  27. 27. ControlJSa JavaScript module for making scripts load faster<br />async downloads<br />delays execution<br />1st pass:<br />if (IE || Opera) { new Image(); }<br />else { document.createElement(‘object’); }<br />2nd pass:<br />external: document.createElement(‘script’);<br />inline: window.execScript(sCode) or window.eval.call(window, sCode)<br />
  28. 28. ControlJSa JavaScript module for making scripts load faster<br />downloads without executing<br /><script type="text/cjs" data-cjssrc="main.js” data-cjsexec=false><br /><script><br />later (if needed):<br />CJS.execScript(src);<br />
  29. 29. ControlJSa JavaScript module for making scripts load faster<br />handles (some) document.write<br /><ul><li>override document.write for each script
  30. 30. set SPAN innerHTML if there’s a write
  31. 31. parse out SCRIPT tags & add SCRIPT elem</li></ul>better solutions:<br /><ul><li>Aptimize – http://www.aptimize.com/
  32. 32. GhostWriter – http://digital-fulcrum.com/solutions /ghostwriter-complete-control/</li></li></ul><li>ControlJSa JavaScript module for making scripts load faster<br />control.js loads async<br />just change HTML<br />inline & external scripts<br />async downloads<br />delays execution<br />downloads w/ no execution<br />handles (some) document.write<br />
  33. 33. ControlJSa JavaScript module for making scripts load faster<br />http://stevesouders.com/controljs/<br />http://code.google.com/p/controljs/<br />http://groups.google.com/group/controljs<br />
  34. 34. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  35. 35. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  36. 36. slideshare.net/CMSummit/ms-internet-trends060710final<br />
  37. 37.
  38. 38.
  39. 39.
  40. 40.
  41. 41.
  42. 42. to intr<br />to intr<br />Twitter iPhone app<br />open timeline<br />
  43. 43. Twitter iPhone app<br />execute search<br />
  44. 44. Twitter iPhone app<br />open timeline<br />
  45. 45. just released<br />this morning<br />1am<br />
  46. 46.
  47. 47.
  48. 48.
  49. 49.
  50. 50. speed matters<br />focus on JavaScript<br />more visibility into mobile<br />takeaways<br />flickr.com/photos/34771728@N00/361526991/<br />
  51. 51. Steve Souders<br />@souders<br />stevesouders.com/docs/webstock-20110217.pptx<br />flickr.com/photos/myklroventine/4062102754/<br />

×