Your SlideShare is downloading. ×
0
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

High Performance HTML5 (SF HTML5 UG)

34,000

Published on

Tips for what to use (and avoid) in HTML5 for faster websites. This talk was for the San Francisco HTML5 User Group on July 28, 2011.

Tips for what to use (and avoid) in HTML5 for faster websites. This talk was for the San Francisco HTML5 User Group on July 28, 2011.

Published in: Technology, Design
3 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
34,000
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
320
Comments
3
Likes
29
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. High Performance HTML5<br />stevesouders.com/docs/html5-user-group-20110728.pptx<br />Disclaimer: This content does not necessarily reflect the opinions of my employer.<br />flickr.com/photos/djbiesack/85833076/<br />
    • 2. Cuzillion<br />SpriteMe<br />YSlow<br />Hammerhead<br />flickr.com/photos/bekahstargazing/318930460/<br />
    • 3. 2004<br />
    • 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. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    • 6. en.oreilly.com/velocity2009/public/schedule/detail/8523<br />
    • 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. 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. 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. en.oreilly.com/velocity2008/public/schedule/detail/3632<br />
    • 11. slideshare.net/EdmundsLabs/how-edmunds-got-in-the-fast-lane-80-reduction-in-page-load-time-in-3-simple-steps-6593377<br />
    • 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. 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. High Performance HTML5<br />http://www.w3.org/TR/html5/<br />flickr.com/photos/djbiesack/85833076/<br />
    • 15. Web Performance Working Group<br />chartered June 2010<br />Web Timing<br /><ul><li>Navigation Timing
    • 16. User Timing
    • 17. Resource Timing</li></ul>Page Visibility<br />Script-based animations<br />Efficient script yielding<br />http://www.w3.org/2010/webperf/<br />
    • 18. Navigation Timing<br />var timing = performance.timing;<br />varloadtime = <br />timing.loadEventEnd –<br />timing.navigationStart;<br />Chrome, IE9+<br />http://blog.chromium.org/2010/07/do-you-know-how-slow-your-web-page-is.html<br />flickr.com/photos/wwarby/3296379139/<br />
    • 19. Resource Timing<br /><ul><li>DNS, redirects, etc.
    • 20. security issues</li></ul>User Timing<br /><ul><li>for web apps
    • 21. mark, measure</li></ul>flickr.com/photos/juditk/5024772809/<br />
    • 22. flickr.com/photos/96221617@N00/51603550/<br />Page Visibility<br />detect when page is visible<br /><ul><li>stats
    • 23. video & audio
    • 24. polling, DHTML
    • 25. performance: prefetching, prerendering</li></ul>Chrome 13: <br /><ul><li>document.webkitHidden
    • 26. webkitvisibilitychange</li></ul>code.google.com/chrome/whitepapers/pagevisibility.html<br />
    • 27. script async & defer<br />parsing doesn’t wait for script:<br /><ul><li>async– executed when available
    • 28. defer – executed when parsing finished</li></ul>when is it downloaded?<br />missing:<br /><ul><li>download now, execute on demand
    • 29. defer download AND execution</li></ul>Chrome, Firefox, Safari 5.1, IE10<br />flickr.com/photos/gevertulley/4771808965/<br />
    • 30. app cache<br />flickr.com/photos/india-nepal-iran/203982474/<br />
    • 31. yuiblog.com/blog/2007/01/04/performance-research-part-2/<br />
    • 32. blaze.io/mobile/understanding-mobile-cache-sizes/<br />
    • 33. app cache<br />offline apps, longer cache<br /><!doctype html><br /><html manifest=“myapp.appcache”><br />myapp.appcache:<br />CACHE MANIFEST<br /># Revision: 1.28<br />CACHE:<br />/images/logo.gif<br />NETWORK:<br />/login.html<br />FALLBACK:<br />/index.html /offline.html<br />Content-Type: text/cache-manifest<br />flickr.com/photos/india-nepal-iran/203982474/<br />
    • 34. app cache gotchas<br />html docs w/ manifest are cached<br />404 => nothing is cached<br />size: 5MB+<br />must rev manifest to update resources<br />update is served on 2nd reload (?!?!)<br />flickr.com/photos/97657657@N00/1918688483/<br />
    • 35. app cache<br />reload<br />1<br />2<br />push app <br />logo.gif = <br />user loads app<br />app cache is empty <br />fetch manifest<br />fetch logo.gif<br />app cache =<br />user sees<br />3<br />4<br />5<br />push app <br />logo.gif =<br />rev manifest <br />user loads app<br />app cache = <br />user sees<br />fetch manifest<br />fetch logo.gif<br />app cache =<br />user loads app again<br />app cache = <br />user sees<br />fetch manifest (304)<br />
    • 36. load twice workaround<br />window.applicationCache.addEventListener('updateready', <br />function(e) {  if ( window.applicationCache.status== <br />window.applicationCache.UPDATEREADY) {<br /> if ( confirm(“Load new content?”) ) {<br /> ...<br />http://www.webdirections.org/blog/get-offline/<br />http://www.html5rocks.com/en/tutorials/appcache/beginner/<br />flickr.com/photos/presley_m/5152304885/<br />
    • 37. localStorage<br />window.localStorage: <br />setItem()<br />getItem()<br />removeItem()<br />clear()<br />also sessionStorage<br />all popular browsers, 5MB max<br />http://dev.w3.org/html5/webstorage/<br />http://diveintohtml5.org/storage.html<br />flickr.com/photos/bryanpearson/564703455/<br />
    • 38. localStorage as cache<br />1st doc: write JS & CSS blocks to localStorage<br />JUX.UXBaseControls.252CB7BF: (function(){...<br />JUX.FrameworkCore.A39F6425: (function(){...<br />set cookie with entries & version<br />RMSM=JUX.UXBaseControls.252CB7BF~ JUX.FrameworkCore.A39F6425~<br />later docs: read JS & CSS from localStorage<br />script.text = localStorage.getItem(JUX.UXBaseControls.252CB7BF)<br />http://stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/<br />flickr.com/photos/nelsoncruz/431244400/<br />
    • 39. flickr.com/photos/typoatelier/4261455105/<br />@font-face<br />* IE9 does not display a blank page, but does “flash” the element.<br />stevesouders.com/blog/2010/06/01/frontend-spof/<br />Worth delaying most important design elements? Or entire page?<br />
    • 40. there’s more<br />CSS instead of images: border radius, linear & radial gradients, drop shadow<br />SVG, inline SVG, and canvas<br />video tag<br />WebSockets<br />web workers<br />builtin controls: progress, datetime<br />flickr.com/photos/dualphoto/2609096047/<br />
    • 41. and more<br />history –http://www.kylescholz.com/blog/2010/04/html5_history_is_the_future.html<br /><a ping<br />requestAnimationFrame – not timers<br />native JSON parse/stringify<br />http://bit.ly/browserscope-modernizr<br />http://www.html5rocks.com/<br />flickr.com/photos/kaptainkobold/5741327207/<br />
    • 42. Thanks to…<br />Max Firtman<br />Tony Gentilcore<br />Paul Irish<br />Brad Neuberg<br />Kyle Scholz<br />Lindsey Simon<br />Annie Sullivan<br />flickr.com/photos/robertvega/3944132320/<br />
    • 43. flickr.com/photos/pistocasero/5199312952/<br />
    • 44. velocityconf.com/velocity2011/public/schedule/detail/17986<br />
    • 45. flickr.com/photos/amuckin77/4870615754/<br />
    • 46.
    • 47.
    • 48.
    • 49. bytes downloadedTop 100 vs Top 1000<br />Top 1000<br />Top 100<br />
    • 50.
    • 51.
    • 52.
    • 53. http://code.google.com/speed/pss/<br />
    • 54.
    • 55. speed matters<br />WPWG<br />window.performance<br />async & defer<br />app cache, localStorage<br />! @font-face<br />takeaways<br />flickr.com/photos/myklroventine/4062102754/<br />
    • 56. Steve Souders<br />@souders<br />http://stevesouders.com/docs/html5-user-group-20110728.pptx<br />

    ×