Once More, With Feeling at Code 2016 in Sydney

As an industry, we’re starting to recognize that what really matters for performance is how fast the experience feels. While this seems like a relatively minor revelation, in reality it requires a significant shift in the way we approach speed online: everything from the way we measure to the optimizations we use. Let’s look at how to reframe performance on the web, and what techniques and technologies are out there to help us create experiences that feel fast and frictionless.

Presented at Code 2016 in Syndey, Australia on July 28, 2016.

Transcript

1. ONCE MORE,
   WITH FEELING
   https://flic.kr/p/cxeNPs
   Tim Kadlec | @tkadlec | #code16
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. PERCEPTION IS
   REALITY
   

   View Slide

7. PERCEPTION FRAMES
   REALITY
   

   View Slide

8. View Slide

9. A B
   

   View Slide

10. View Slide

11. http://livingwithlag.com/
    

    View Slide

12. 100ms 1%
    REVENUE
    

    View Slide

13. 100ms
    1000ms
    Feels instantaneous & maintains a connection between action & reaction.
    Anything longer and the user loses focus on their task.
    

    View Slide

14. View Slide

15. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

16. DNS
    Lookup
    100ms
    TCP
    Connection
    100ms
    SSL
    Negotiation
    100-200ms
    Request
    100ms
    

    View Slide

17. DNS
    Lookup
    100ms
    TCP
    Connection
    100ms
    SSL
    Negotiation
    100-200ms
    Request
    100ms
    400-500ms
    

    View Slide

18. “THE FASTEST REQUEST IS
    NO REQUEST”
    —EVERY PERFORMANCE
    ADVOCATE EVER
    

    View Slide

19. EVERYTHING SHOULD
    HAVE VALUE, BECAUSE
    EVERYTHING HAS A COST
    

    View Slide

20. HOW DO WE BALANCE
    RICHNESS WITH SPEED
    

    View Slide

21. “PERFORMANCE IS THE
    DEVELOPER’S
    RESPONSIBILITY”
    

    View Slide

22. View Slide

23. View Slide

24. PERFORMANCE IS ABOUT
    THE USER
    

    View Slide

25. View Slide

26. PASSIVE ACTIVE
    VS
    

    View Slide

27. PASSIVE
    

    View Slide

28. PASSIVE WAITING
    OVERESTIMATED BY
    36%
    

    View Slide

29. View Slide

30. View Slide

31. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

32. header('Link: ;
    rel=preload; as=stylesheet');
    

    View Slide

33. 
    

    View Slide

34. function preload(url) {
    var hint = document.createElement("link");
    hint.rel = "preload";
    hint.href = url;
    document.head.appendChild(hint);
    }
    

    View Slide

35. 
    

    View Slide

36. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

37. 
    

    View Slide

38. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

39. host_name_to_prefetch.com">
    
    

    View Slide

40. as="style">
    

    View Slide

41. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

42. as="style">
    

    View Slide

43. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

44. 
    

    View Slide

45. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

46. View Slide

47. Network
    

    View Slide

48. HTML
    Network
    CSS
    Javascript
    

    View Slide

49. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    

    View Slide

50. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    

    View Slide

51. document.write(“No sleep til’ Brooklyn.”);
    document.getElementById(‘#main').style.height =
    "100px";
    

    View Slide

52. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    Render Tree
    

    View Slide

53. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    Render Tree
    Layout
    

    View Slide

54. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    Render Tree
    Layout
    Paint
    

    View Slide

55. CRITICAL PATH
    

    View Slide

56. ANYTHING IN THE WAY OF
    INITIAL RENDER IS CRITICAL
    

    View Slide

57. 
    
    
    Hey there
    
    <br/>
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    1
    

    View Slide

58. 
    
    
    Hey there
    
    <br/>
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    2
    

    View Slide

59. 
    
    
    Hey there
    
    <br/>
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    3
    

    View Slide

60. <br/>
    

    View Slide

61. <br/>

    View Slide

62. <br/>

    View Slide

63. <br/>

    View Slide

64. src="blah.js.php">
    

    View Slide

65. <br/>

    View Slide

66. <br/>

    View Slide

67. <br/>

    View Slide

68. src="blah.js.php">
    

    View Slide

69. <br/>

    View Slide

70. <br/>

    View Slide

71. 
    
    
    Hey there
    
    src=“jquereactugular.js“ >
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    

    View Slide

72. 
    
    
    Hey there
    
    src=“jquereactugular.js“ >
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    

    View Slide

73. .event-name
    .tagline
    .event-year
    

    View Slide

74. 
    

    View Slide

75. <br/>//critical css inlined and minimized<br/>
    <br/>loadCSS(‘/path/to/full/css’);<br/>//set a cookie<br/>
    

    View Slide

76. 
    
    
    Hey there
    <br/>//critical css inlined and minimized<br/>
    src=“jquereactugular.js“ >
    
    
    Super awesome site
    
    Super interesting stuff, I'm sure.
    
    
    
    

    View Slide

77. http://bit.ly/1Jw2jj7
    

    View Slide

78. View Slide

79. PROGRESS BARS ARE THE
    HOLD MUSIC OF THE INTERNET
    

    View Slide

80. View Slide

81. PROGRESS BARS FOCUS
    ON THE WAITING
    

    View Slide

82. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

83. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

84. http://www.lukew.com/ff/entry.asp?1797
    

    View Slide

85. SKELETON SCREENS
    FOCUS ON THE PROGRESS
    

    View Slide

86. FOCUS ON WHAT
    YOU DON’T HAVE
    

    View Slide

87. FOCUS ON WHAT
    YOU’RE GOING TO GET
    

    View Slide

88. DIV
    DIV
    DIV
    

    View Slide

89. View Slide

90. View Slide

91. FEEDBACK
    SHOWS PROGRESS
    

    View Slide

92. FEEDBACK
    EASES ANXIETY
    

    View Slide

93. View Slide

94. View Slide

95. OPERATIONAL
    TRANSPARENCY
    

    View Slide

96. View Slide

97. https://flic.kr/p/7WcQwA
    CHOREOGRAPHY
    

    View Slide

98. PERFORMANCE IS ABOUT
    THE USER
    

    View Slide

99. PERCEPTION FRAMES
    REALITY
    

    View Slide

100. https://flic.kr/p/7WcQwA
     USER-CENTRIC
     PERFORMACE
     

     View Slide

101. THANK YOU
     https://flic.kr/p/cxeNPs
     Tim Kadlec | @tkadlec | #code16
     

     View Slide