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

Data Driven Performance Optimisation

Data Driven Performance Optimisation

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

Stefan Baumgartner

June 10, 2015
Tweet

More Decks by Stefan Baumgartner

Other Decks in Technology

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