Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Anatomy of a responsive page load, WhiskyWeb 2013

Andy Hume
April 12, 2013

Anatomy of a responsive page load, WhiskyWeb 2013

Longer version of performance talk for WhiskyWeb II in Edinburgh.

Andy Hume

April 12, 2013
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. PAGE LOAD
    Andy Hume
    THE ANATOMY OF A
    WhiskyWeb II, 2013
    RESPONSIVE
    Friday, 12 April 13

    View full-size slide

  2. Text
    Friday, 12 April 13

    View full-size slide

  3. Friday, 12 April 13

    View full-size slide

  4. http://www.flickr.com/photos/freefoto/2231356418/
    Performance
    Friday, 12 April 13

    View full-size slide

  5. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Friday, 12 April 13

    View full-size slide

  6. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Friday, 12 April 13

    View full-size slide

  7. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Friday, 12 April 13

    View full-size slide

  8. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Friday, 12 April 13

    View full-size slide

  9. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Friday, 12 April 13

    View full-size slide

  10. WHY CARE?
    Speed Profit
    http://goo.gl/JNRPt
    Friday, 12 April 13

    View full-size slide

  11. WHY CARE?
    Speed Profit
    http://goo.gl/JNRPt
    Speed high search ranking
    http://goo.gl/XhVfk
    Friday, 12 April 13

    View full-size slide

  12. http://www.flickr.com/photos/teosaurio/7509743298/
    Lazy
    Friday, 12 April 13

    View full-size slide

  13. Friday, 12 April 13

    View full-size slide

  14. http://www.flickr.com/photos/teosaurio/7509743298/
    The web has bitten us
    Friday, 12 April 13

    View full-size slide

  15. page load time
    PERFORMANCE
    bandwidth
    battery life
    server capacity
    fast interface
    reliability
    Friday, 12 April 13

    View full-size slide

  16. page load time
    PERFORMANCE
    page load time
    bandwidth
    battery life
    server capacity
    fast interface
    reliability
    Friday, 12 April 13

    View full-size slide

  17. RESPONSE TIME
    Server-side response time?
    End-user response time?
    Time to last byte?
    ALWAYS DEFINE IT
    Friday, 12 April 13

    View full-size slide

  18. TIME TO FIRST BYTE
    Request to start of response
    Normally HTML
    Nothing displayed yet
    Includes network latency
    Includes server-side
    Friday, 12 April 13

    View full-size slide

  19. START RENDER
    Content begins to display
    Doesn’t mean it’s useful
    content
    Things can still block afterwards
    Friday, 12 April 13

    View full-size slide

  20. LOAD TIME
    Full page loaded
    Scripts, images, etc...
    Site might be usable before this
    Friday, 12 April 13

    View full-size slide

  21. RANGE OF METRICS
    Time to first byte
    Start render time
    Load time
    KNOW WHICH ONE
    Friday, 12 April 13

    View full-size slide

  22. http://webpagetest.org
    webpagetest.org
    Friday, 12 April 13

    View full-size slide

  23. WEBPAGETEST.ORG
    0.1930
    Friday, 12 April 13

    View full-size slide

  24. WEBPAGETEST.ORG
    0.1930
    Friday, 12 April 13

    View full-size slide

  25. WEBPAGETEST.ORG
    0.1930
    Friday, 12 April 13

    View full-size slide

  26. WEBPAGETEST.ORG
    0.1930
    Friday, 12 April 13

    View full-size slide

  27. WEBPAGETEST.ORG
    iPhone 4 / iOS 5.1
    0.1930
    Friday, 12 April 13

    View full-size slide

  28. WEBPAGETEST.ORG
    iPhone 4 / iOS 5.1
    3G (2/1 Mbps, 150ms RTT)
    0.1930
    Friday, 12 April 13

    View full-size slide

  29. WEBPAGETEST.ORG
    iPhone 4 / iOS 5.1
    3G (2/1 Mbps, 150ms RTT)
    Dulles, Virginia
    0.1930
    Friday, 12 April 13

    View full-size slide

  30. WEBPAGETEST.ORG
    Friday, 12 April 13

    View full-size slide

  31. WEBPAGETEST.ORG
    Friday, 12 April 13

    View full-size slide

  32. WEBPAGETEST.ORG
    Friday, 12 April 13

    View full-size slide

  33. WEBPAGETEST.ORG
    Friday, 12 April 13

    View full-size slide

  34. WEBPAGETEST.ORG
    Friday, 12 April 13

    View full-size slide

  35. Content
    THREE LEVELS
    Enhancement
    Leftovers
    Friday, 12 April 13

    View full-size slide

  36. Content
    THREE LEVELS
    Enhancement
    Leftovers
    Friday, 12 April 13

    View full-size slide

  37. Content
    THREE LEVELS
    Enhancement
    Leftovers
    Friday, 12 April 13

    View full-size slide

  38. Content
    THREE LEVELS
    Enhancement
    Leftovers
    Friday, 12 April 13

    View full-size slide

  39. Content Enhancement Leftovers
    Friday, 12 April 13

    View full-size slide

  40. Content Enhancement Leftovers
    Friday, 12 April 13

    View full-size slide

  41. Content Enhancement Leftovers
    Friday, 12 April 13

    View full-size slide

  42. Content Enhancement Leftovers
    Friday, 12 April 13

    View full-size slide

  43. Content Enhancement Leftovers
    DOMContentReady event
    Friday, 12 April 13

    View full-size slide

  44. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  45. Content Enhancement Leftovers
    DOMContentReady event
    Friday, 12 April 13

    View full-size slide

  46. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  47. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  48. LOADING CSS
    Compressed
    Long cache time
    One file
    Content-Encoding: gzip
    Cache-Control: max-age=315360000
    Friday, 12 April 13

    View full-size slide

  49. LOADING CSS





    Content goes here

    View full-size slide








  50. Content goes here

    View full-size slide





  51. rel="stylesheet" />


    Content goes here

    View full-size slide

  52. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  53. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  54. LOADING JAVASCRIPT
    Compressed
    Long cache time
    One file
    Content-Encoding: gzip
    Cache-Control: max-age=315360000
    Friday, 12 April 13

    View full-size slide

  55. JAVASCRIPT








    Content goes here

    View full-size slide

  56. JAVASCRIPT







    Content goes here

    View full-size slide

  57. JAVASCRIPT LOADING
    <br/>var s = document.createElement('script');<br/>s.src = "app.js";<br/>document.head.appendChild(s);<br/>
    Friday, 12 April 13

    View full-size slide

  58. @if(isModernBrowser) {

    }
    CUTTING THE MUSTARD
    http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard/
    Cutting the Mustard
    Friday, 12 April 13

    View full-size slide

  59. <br/>if (isModernBrowser()) {<br/>var s = document.createElement('script');<br/>s.src = "app.js";<br/>document.head.appendChild(s);<br/>}<br/>
    JAVASCRIPT LOADING
    Friday, 12 April 13

    View full-size slide

  60. JAVASCRIPT LOADING
    var isModernBrowser = function() {
    return (
    ‘querySelector’ in document &&
    ‘addEventListener’ in window &&
    ‘localStorage’ in window
    );
    };
    Friday, 12 April 13

    View full-size slide

  61. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  62. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  63. IMAGES: SPRITES
    Friday, 12 April 13

    View full-size slide

  64. IMAGES: SVG
    Friday, 12 April 13

    View full-size slide

  65. IMAGES: ASSET FONTS
    @2x @?x
    Friday, 12 April 13

    View full-size slide

  66. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  67. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  68. http://www.flickr.com/photos/spacemanbob/1084139169/
    Web fonts
    Friday, 12 April 13

    View full-size slide

  69. FONT LOADING
    Progressive enhancement
    Friday, 12 April 13

    View full-size slide

  70. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Friday, 12 April 13

    View full-size slide

  71. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF
    Friday, 12 April 13

    View full-size slide

  72. FONT LOADING
    Progressive enhancement
    Cuts the mustard
    Supports WOFF
    localStorage available
    Friday, 12 April 13

    View full-size slide

  73. PRE-RENDER
    CUT THE
    MUSTARD?
    NO FONTS SHOW FONTS
    NO
    NO
    SUPPORT WOFF?
    FONTS IN
    STORAGE?
    NO
    Friday, 12 April 13

    View full-size slide

  74. POST-RENDER
    STORAGE
    AVAILABLE?
    NO FONTS SHOW FONTS
    NO
    DOWNLOAD FONTS:
    BASE64 ENCODED
    IN JSON
    CACHE FONTS
    IN STORAGE
    Friday, 12 April 13

    View full-size slide

  75. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  76. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  77. Friday, 12 April 13

    View full-size slide

  78. IMAGES: NEW SPECS
    src="medium.jpg"
    srcset="small.jpg 640w, small-hd.jpg
    640w 2x, med-hd.jpg 2x" />
    srcset attribute
    Friday, 12 April 13

    View full-size slide

  79. IMAGES: NEW SPECS




    Picture element
    Friday, 12 April 13

    View full-size slide

  80. IMAGES: ON DEMAND
    Friday, 12 April 13

    View full-size slide

  81. IMAGES: ON DEMAND
    Friday, 12 April 13

    View full-size slide

  82. IMAGES: ON DEMAND
    Friday, 12 April 13

    View full-size slide

  83. IMAGES: ON DEMAND
    data-src="small.jpg"
    data-src-high="large.jpg"
    data-width="180"
    data-height="100"
    >

    Friday, 12 April 13

    View full-size slide

  84. IMAGES: APPROPRIATE
    https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web-redux
    Friday, 12 April 13

    View full-size slide

  85. Content Enhancement Leftovers
    DOMContentReady event Load event
    Friday, 12 April 13

    View full-size slide

  86. Thank-you!
    http://lanyrd.com/cmhcd
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Friday, 12 April 13

    View full-size slide