Data Driven Performance Optimisation

Which key metrics should we choose to get an idea on our site's performance?

Transcript

1. Data Driven
   Performance
   Optimisation
   Stefan Baumgartner | @ddprrt
   

   View Slide

2. ruxit.com
   

   View Slide

3. View Slide

4. 2011 2015
   4 times a week in the fitness studio 0, nada, niente, null, void, undefined
   able to run 10 kilometers
   able to get to the supermarket across
   the corner
   20% body fat
   this is getting too intimate
   (and embarrassing)
   74kg
   

   View Slide

5. Faster than a
   speeding bullet?
   

   View Slide

6. Our websites are
   too heavy!!
   

   View Slide

7. Images
   1.310
   Other
   4
   Video
   227
   HTML
   56
   Fonts
   97
   Scripts
   329
   Stylesheets
   63
   http://httparchive.org/interesting.php
   Total: 2099 kB
   

   View Slide

8. Users expect fast sites.
   After 3 seconds of load time,
   40% will abandon your site
   https://speakerdeck.com/lara/designing-for-performance
   

   View Slide

9. Etsy found out that:
   + 160kb on a page
   + 12% bounce rate
   https://speakerdeck.com/lara/designing-for-performance
   

   View Slide

10. Also:
    - 1 redirect on a page
    + 12% click-through rate
    https://speakerdeck.com/lara/designing-for-performance
    

    View Slide

11. Performance matters!
    

    View Slide

12. But what should we
    be aiming for?
    

    View Slide

13. We need good,
    reliable and replicable
    key metrics
    

    View Slide

14. 1 Pageweight
    

    View Slide

15. “Weight” is an easy one: The bigger your
    site is, the more it has to transfer over the
    wire.
    

    View Slide

16. So the goal is: Reduce weight!
    

    View Slide

17. Images
    1.310
    Other
    4
    Video
    227
    HTML
    56
    Fonts
    97
    Scripts
    329
    Stylesheets
    63
    

    View Slide

18. http://imageoptim.com
    

    View Slide

19. srcset=“path/to/image/200.jpg 200w,
    path/to/image/400.jpg 400w,
    path/to/image/600.jpg 600w,
    path/to/image/800.jpg 800w,
    path/to/image/1000.jpg 1000w,"
    sizes="(min-width: 992px) 60vw, 80vw" >
    

    View Slide

20. How to keep track?
    

    View Slide

21. View Slide

22. View Slide

23. https://github.com/macbre/phantomas
    

    View Slide

24. http://www.filamentgroup.com/lab/weight-wait.html
    

    View Slide

25. This menu at
    the top holds 94
    product images
    The requests alone
    stall the browser
    for roughly 14 sec
    

    View Slide

26. But it just has
    to be available
    when JavaScript is
    on … so we load it
    asynchronously in
    our JavaScript at
    the bottom.
    This reduces
    time to glass to 1.3s
    

    View Slide

27. 2 Page Speed Score
    

    View Slide

28. “Page Speed Score” tells you if you’ve
    followed a series of best practices for every
    component of your website
    

    View Slide

29. View Slide

30. https://developers.google.com/speed/pagespeed/insights
    

    View Slide

31. Eliminate render-blocking JS and CSS
    Optimize images
    Minify HTML, CSS, JavaScript
    

    View Slide

32. Reduce server response time
    Leverage browser caching
    Avoid landing page redirects
    Enable compression
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. How safe is Page Speed Score?
    

    View Slide

37. blog.catchpoint.com/2011/12/27/biggest_misconception_about_google_page_speed/
    

    View Slide

38. blog.ruxit.com/pagespeed-score-matters-less-think/
    

    View Slide

39. http://mobiforge.com/research-analysis/googles-mobile-friendly-test-can-spruce-goose-really-fly
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

43. What the …?
    

    View Slide

44. Solution: Page Speed Score is a good
    indicator on your dev style
    … but we need more!
    

    View Slide

45. 3 Speed Index
    

    View Slide

46. The Speed Index is the average time at which
    visible parts of the page are displayed. It is
    expressed in milliseconds and dependent on
    size of the view port.
    

    View Slide

47. ∫ 1 - visuallycomplete/100
    0
    end
    

    View Slide

48. What does this mean?
    

    View Slide

49. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

50. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

51. Visually complete (%)
    0
    25
    50
    75
    100
    Time in Seconds
    0s 1s 2s 3s 4s 5s 6s 7s 8s
    

    View Slide

52. Every page is fully loaded in 10 seconds
    93% linear after 1 second 100% linear after 10 seconds 20% linear after 9 seconds
    7% linear after 9 seconds 80% linear after 1 second
    881 5000 8610
    

    View Slide

53. The lower
    Speed Index: The lower the better
    

    View Slide

54. http://webpagetest.org
    

    View Slide

55. View Slide

56. Critical CSS
    

    View Slide

57. View Slide

58. This is where the content is loaded
    So let’s show the user everything
    we’ve got so far
    

    View Slide

59. View Slide

60. CSS is blocking.
    That means: No content shown until
    the whole CSS is loaded
    

    View Slide

61. Open up your
    website at the
    desired viewport.
    Look at the above
    the fold content.
    

    View Slide

62. Open a headless
    browser to
    find the CSS for
    that content.
    

    View Slide

63. npm install --save-dev critical
    

    View Slide

64. critical.generate({
    src: 'index.html',
    dest: 'styles/main.css',
    width: 1300,
    height: 900
    });
    

    View Slide

65. critical.generate({
    src: 'index.html',
    dest: 'styles/main.css',
    width: 1300,
    height: 900
    });
    

    View Slide

66. critical.generate({
    src: 'index.html',
    dest: 'styles/main.css',
    width: 1300,
    height: 900
    });
    

    View Slide

67. http://jonassebastianohlsson.com/criticalpathcssgenerator/
    

    View Slide

68. 
    
    
    <br/>
    
    

    View Slide

69. <br/>var ms=document.createElement(“link");<br/>ms.rel=“stylesheet";<br/>ms.href=“http://path/to/main.min.css”;<br/>document.getElementsByTagName(“head”)[0].appendChild(ms);<br/>
    

    View Slide

70. View Slide

71. View Slide

72. One more optimisation
    

    View Slide

73. View Slide

74. What happened?
    

    View Slide

75. On loading a new page…
    why should we (even if it’s cached)
    check everything again and again?
    

    View Slide

76. Just load the things we need and
    tell the browser where we are without
    loading all the burden
    

    View Slide

77. As an enhancement!
    

    View Slide

78. if(window.history && history.pushState) { … }
    

    View Slide

79. $('body').on('click', '#content
    a:not([href*=#]):not([href^=http])', function(e) {
    e.preventDefault();
    retrieveContent(this.href);
    });
    

    View Slide

80. var retrieveContent = function(loc) {
    $.get(loc)
    .done(function(data) {
    updateContent(data, loc);
    })
    .fail(function(err) {
    window.location.href = loc;
    });
    };
    

    View Slide

81. var updateContent = function(data, url) {
    var mkup = $(data);
    url = url.toString();
    history.pushState({
    url: url,
    title: title
    },
    mkup.filter('title'), url);
    $('#content').html(mkup.filter('#content').html())
    .remove();
    $('title').text(title);
    };
    

    View Slide

82. Speed Index equals regular Speed Index
    of the site without JS and CSS
    

    View Slide

83. Take it even further…
    

    View Slide

84. Do contents change during the period
    of a session?
    

    View Slide

85. var updateContent = function(data, url) {
    var mkup = $(data);
    url = url.toString();
    history.pushState({
    url: url,
    title: title
    },
    mkup.filter('title'), url);
    $('#content').html(mkup.filter('#content').html())
    .remove();
    $(‘title').text(title);
    sessionStorage.setItem(url, data);
    };
    

    View Slide

86. var retrieveContent = function(loc) {
    if(sessionStorage.key(loc)) {
    updateContent(sessionStorage.getItem(loc), loc);
    } else {
    $.get(loc)
    .done(function(data) {
    updateContent(data, loc);
    })
    }
    };
    

    View Slide

87. Speed Index? Probably 0
    

    View Slide

88. + What’s more?
    

    View Slide

89. Apdex
    Network latency
    Connection speed
    Bandwidth
    

    View Slide

90. THX!
    @ddprrt - fettblog.eu - workingdraft.de
    

    View Slide