Data Driven Performance Optimisation

Data Driven Performance Optimisation

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

187d92c9284160ad908885ab096f5209?s=128

Stefan Baumgartner

June 10, 2015
Tweet

Transcript

  1. 3.
  2. 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
  3. 7.

    Images 1.310 Other 4 Video 227 HTML 56 Fonts 97

    Scripts 329 Stylesheets 63 http://httparchive.org/interesting.php Total: 2099 kB
  4. 8.

    Users expect fast sites. After 3 seconds of load time,

    40% will abandon your site https://speakerdeck.com/lara/designing-for-performance
  5. 9.

    Etsy found out that: + 160kb on a page +

    12% bounce rate https://speakerdeck.com/lara/designing-for-performance
  6. 10.

    Also: - 1 redirect on a page + 12% click-through

    rate https://speakerdeck.com/lara/designing-for-performance
  7. 15.

    “Weight” is an easy one: The bigger your site is,

    the more it has to transfer over the wire.
  8. 17.
  9. 21.
  10. 22.
  11. 25.

    This menu at the top holds 94 product images The

    requests alone stall the browser for roughly 14 sec
  12. 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
  13. 28.

    “Page Speed Score” tells you if you’ve followed a series

    of best practices for every component of your website
  14. 29.
  15. 33.
  16. 34.
  17. 35.
  18. 40.
  19. 41.
  20. 42.
  21. 44.
  22. 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.
  23. 49.

    Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  24. 50.

    Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  25. 51.

    Visually complete (%) 0 25 50 75 100 Time in

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  26. 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
  27. 55.
  28. 57.
  29. 58.

    This is where the content is loaded So let’s show

    the user everything we’ve got so far
  30. 59.
  31. 70.
  32. 71.
  33. 73.
  34. 75.

    On loading a new page… why should we (even if

    it’s cached) check everything again and again?
  35. 76.

    Just load the things we need and tell the browser

    where we are without loading all the burden
  36. 80.
  37. 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); };
  38. 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); };
  39. 86.