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

Once More, With Feeling

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.

Tim Kadlec

May 18, 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 | #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