$30 off During Our Annual Pro Sale. View Details »

Once More, With Feeling at Code 2016 in Sydney

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.

Tim Kadlec

July 28, 2016
Tweet

More Decks by Tim Kadlec

Other Decks in Technology

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