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)

33,892

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

    ×