Building for performance and resilience

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

15. Tuesday, June 17, 14
    

    View Slide

16. Tuesday, June 17, 14
    

    View Slide

17. Tuesday, June 17, 14
    

    View Slide

18. Tuesday, June 17, 14
    

    View Slide

19. Tuesday, June 17, 14
    

    View Slide

20. Tuesday, June 17, 14
    

    View Slide

21. Tuesday, June 17, 14
    

    View 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

64. Optimizing: Start render
    
    Tuesday, June 17, 14
    

    View 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

76. Future: ServiceWorker
    Tuesday, June 17, 14
    

    View 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 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide