High Performance HTML5 (SF HTML5 UG)

  • 33,587 views
Uploaded 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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great! Thanks a lot
    Are you sure you want to
    Your message goes here
  • Thanks!
    Are you sure you want to
    Your message goes here
  • Thanks for the HTML5 Share!
    Are you sure you want to
    Your message goes here
  • Thanks for share man!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
33,587
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
310
Comments
4
Likes
28

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