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

Building for performance and resilience

Building for performance and resilience

Andy Hume

June 17, 2014
Tweet

More Decks by Andy Hume

Other Decks in Technology

Transcript

  1. BUILDING FOR
    @andyhume
    SmashingConf, New York, 2014
    PERFORMANCE
    RESILIENCE
    Tuesday, June 17, 14

    View full-size slide

  2. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  3. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  4. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  5. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  6. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  7. WHY CARE?
    http://www.strangeloopnetworks.com/resources/infographics/web-performance-and-ecommerce/
    Tuesday, June 17, 14

    View full-size slide

  8. Measure
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  9. Measure
    http://www.flickr.com/photos/kayaker1204/4319542459/
    We have a median page load me of seven seconds, and our
    primary compe tor has a median page load me of three
    seconds.
    Tell a story
    Tuesday, June 17, 14

    View full-size slide

  10. Measure
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Page load mes increased by 25% when we added feature x.
    Tell a story
    Tuesday, June 17, 14

    View full-size slide

  11. Your bosses love a story
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  12. Spread the word
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  13. What numbers?!
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  14. What numbers?!
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Page load time?
    Total download size?
    Start render time?
    Time to first byte?
    Response time?
    Total HTTP requests?
    Document load time?
    Tuesday, June 17, 14

    View full-size slide

  15. Tuesday, June 17, 14

    View full-size slide

  16. Tuesday, June 17, 14

    View full-size slide

  17. Tuesday, June 17, 14

    View full-size slide

  18. Tuesday, June 17, 14

    View full-size slide

  19. Tuesday, June 17, 14

    View full-size slide

  20. Tuesday, June 17, 14

    View full-size slide

  21. Tuesday, June 17, 14

    View full-size slide

  22. Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  23. Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  24. Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  25. Measure and tracking trends
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  26. SpeedCurve
    http://speedcurve.com
    Tuesday, June 17, 14

    View full-size slide

  27. SpeedCurve
    http://speedcurve.com
    Tuesday, June 17, 14

    View full-size slide

  28. How to optimize
    http://www.flickr.com/photos/freefoto/2231356418/
    Tuesday, June 17, 14

    View full-size slide

  29. Web performance 101
    http://www.flickr.com/photos/freefoto/2231356418/
    Content-Encoding: gzip
    Cache-Control: max-age=315360000
    Tuesday, June 17, 14

    View full-size slide

  30. Optimizing: First byte
    http://www.flickr.com/photos/freefoto/2231356418/
    Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  31. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    Tuesday, June 17, 14

    View full-size slide

  32. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    Tuesday, June 17, 14

    View full-size slide

  33. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    Tuesday, June 17, 14

    View full-size slide

  34. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    Tuesday, June 17, 14

    View full-size slide

  35. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  36. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  37. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  38. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  39. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  40. Optimizing: First byte
    DNS lookup TCP connect HTTP request Server time HTTP resp
    HTTP Redirect
    SSL Handshake
    Tuesday, June 17, 14

    View full-size slide

  41. Eliminate redirects
    Just eleminate redirects
    Flush the document early?
    Prefetch DNS?
    But really, just eleminate redirects
    Optimizing: First byte
    Tuesday, June 17, 14

    View full-size slide

  42. Optimizing: Start render
    http://www.flickr.com/photos/freefoto/2231356418/
    Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  43. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  44. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  45. Remote JS
    Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  46. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  47. inline script
    waiting on
    remote CSS
    Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  48. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  49. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  50. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    fetching
    remote
    stylesheets
    Tuesday, June 17, 14

    View full-size slide

  51. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  52. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  53. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  54. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    Tuesday, June 17, 14

    View full-size slide

  55. Avoid blocking scripts
    Optimizing: Start render
    Tuesday, June 17, 14

    View full-size slide

  56. Optimizing: Start render
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    Tuesday, June 17, 14

    View full-size slide

  57. Optimizing: Start render
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    BREAKS THE PRE-PARSER!
    Tuesday, June 17, 14

    View full-size slide

  58. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    HTML pre-
    parser
    Tuesday, June 17, 14

    View full-size slide

  59. Remote JS
    Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    HTML pre-
    parser
    Tuesday, June 17, 14

    View full-size slide

  60. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    HTML pre-
    parser
    Tuesday, June 17, 14

    View full-size slide

  61. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    HTML pre-
    parser
    fetching
    remote
    stylesheets
    Tuesday, June 17, 14

    View full-size slide

  62. Optimizing: Start render
    HTML parser DOM tree
    Layout Paint
    Render tree
    HTML pre-
    parser
    Tuesday, June 17, 14

    View full-size slide

  63. Optimizing: Start render
    <br/>var script = document.createElement('script');<br/>script.src = "app.js";<br/>document.head.appendChild(script);<br/>
    BREAKS THE PRE-PARSER!
    Tuesday, June 17, 14

    View full-size slide

  64. Optimizing: Start render

    Tuesday, June 17, 14

    View full-size slide

  65. Avoid blocking scripts
    Optimizing: Start render
    Move script elements to end of
    Or... add async attribute to script elements
    Inline critical CSS
    Tuesday, June 17, 14

    View full-size slide

  66. Avoid blocking scripts
    Optimizing: Start render
    Move script elements to end of
    Or... add async attribute to script elements
    Inline critical CSS
    https://github.com/pocketjoso/penthouse
    Tuesday, June 17, 14

    View full-size slide

  67. Optimizing: Load time fully loaded
    http://www.flickr.com/photos/freefoto/2231356418/
    Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  68. gzip compression (of course!)
    Far-future caching (of course!)
    Concatenate files (of course!)
    Optimizing: Load time fully loaded
    Tuesday, June 17, 14

    View full-size slide

  69. Optimizing: Speed Index
    http://www.flickr.com/photos/freefoto/2231356418/
    Load Time First Byte Start Render Fully Loaded Speed Index
    FIRST VIEW 3.783s 0.128s 0.676s 6.530s 1522
    REPEAT VIEW 2.268s 0.486s 0.486s 3.617s 980
    Tuesday, June 17, 14

    View full-size slide

  70. http://www.flickr.com/photos/vpickering/6824364286/
    Resilience
    Tuesday, June 17, 14

    View full-size slide

  71. http://www.flickr.com/photos/the_jorr/325224175/
    Unreliable
    Tuesday, June 17, 14

    View full-size slide

  72. http://www.flickr.com/photos/8040811@N06/3167877765
    Progressive enhancement
    th
    Tuesday, June 17, 14

    View full-size slide

  73. The future
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  74. Future: HTTP/2 SPDY
    Tuesday, June 17, 14

    View full-size slide

  75. Future: HTTP/2 SPDY
    Multiplexing
    Cache pushing
    Tuesday, June 17, 14

    View full-size slide

  76. Future: ServiceWorker
    Tuesday, June 17, 14

    View full-size slide

  77. Future: ServiceWorker
    this.addEventListener('fetch', function (e) {
    if (e.request.url.host === 'guardian.co.uk') {
    e.forwardTo('http://theguardian.com');
    }
    }
    (Possibly not possible)
    Tuesday, June 17, 14

    View full-size slide

  78. Future: ServiceWorker
    this.addEventListener('fetch', function (e) {
    if (window.innerWidth > 500) {
    e.forwardTo(e.request.url + '?width=large');
    }
    }
    (Possibly not possible)
    Tuesday, June 17, 14

    View full-size slide

  79. Experiment and measure
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Tuesday, June 17, 14

    View full-size slide

  80. Experiment and measure
    http://www.flickr.com/photos/kayaker1204/4319542459/
    Theorize
    Experiment, and...
    Measure
    Tuesday, June 17, 14

    View full-size slide

  81. Thank-you!
    http://lanyrd.com/sdbmhb
    @andyhume
    Creative Commons Licensed
    Attribution, Non-Commercial, Share Alike
    cc
    Tuesday, June 17, 14

    View full-size slide