Once More, With Feeling

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 Front Trends in Warsaw, Poland on May 18, 2016.

Transcript

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

   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. dns-prefetch
    preconnect
    prerender
    preload
    

    View Slide

36. 
    

    View Slide

37. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

38. 
    

    View Slide

39. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

40. host_name_to_prefetch.com">
    
    

    View Slide

41. as="style">
    

    View Slide

42. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

43. 
    

    View Slide

44. DNS
    Lookup
    TCP
    Connection
    SSL
    Negotiation
    Request
    

    View Slide

45. View Slide

46. Network
    

    View Slide

47. HTML
    Network
    CSS
    Javascript
    

    View Slide

48. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    

    View Slide

49. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    

    View Slide

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

    View Slide

51. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    Render Tree
    

    View Slide

52. HTML
    Network
    CSS
    Javascript
    DOM CSSOM
    Render Tree
    Layout
    

    View Slide

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

    View Slide

54. CRITICAL PATH
    

    View Slide

55. ANYTHING IN THE WAY OF
    INITIAL RENDER IS CRITICAL
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. <br/>
    

    View Slide

60. <br/>

    View Slide

61. <br/>

    View Slide

62. <br/>

    View Slide

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

    View Slide

64. <br/>

    View Slide

65. <br/>

    View Slide

66. <br/>

    View Slide

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

    View Slide

68. <br/>

    View Slide

69. <br/>

    View Slide

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

    View Slide

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

    View Slide

72. .main-
    navigation
    #mixer
    .links
    

    View Slide

73. 
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

77. View Slide

78. PROGRESS BARS ARE THE
    HOLD MUSIC OF THE INTERNET
    

    View Slide

79. View Slide

80. PROGRESS BARS FOCUS
    ON THE WAITING
    

    View Slide

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

    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. SKELETON SCREENS
    FOCUS ON THE PROGRESS
    

    View Slide

85. FOCUS ON WHAT
    YOU DON’T HAVE
    

    View Slide

86. FOCUS ON WHAT
    YOU’RE GOING TO GET
    

    View Slide

87. DIV
    DIV
    DIV
    

    View Slide

88. View Slide

89. View Slide

90. FEEDBACK
    SHOWS PROGRESS
    

    View Slide

91. FEEDBACK
    EASES ANXIETY
    

    View Slide

92. View Slide

93. View Slide

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

    View Slide

95. PERFORMANCE IS ABOUT
    THE USER
    

    View Slide

96. PERCEPTION FRAMES
    REALITY
    

    View Slide

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

    View Slide

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

    View Slide