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

2,788

Published on

Slides for Steves Souders at Webstock 11

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,788
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
74
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Fred Wilson is Managing Partner of two venture capital firms, Flatiron Partners (Yoyodyne, Geocities) and Union Square Ventures (Twitter, delicious,Etsy, Feedburner).SpeedInstant utilitySoftware is mediaLess is moreMake it programmableMake it personalRESTfulDiscoverabilityCleanPlayful
  • “if we’re able to achieve a similar performance boost across ourothertoplanding pages, we’ll drive in excess of 60 million yearly Firefox downloads.”
  • This was a ~5 second speed up.
  • Time measurements from real users.
  • All of these allow for parallel downloads, but none of them allow for parallel JS execution – that&apos;s not possible (currently, WebKit is doing some stuff on that).
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×