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. Data Driven Performance Optimisation Stefan Baumgartner | @ddprrt

  2. ruxit.com

  3. None
  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
  5. Faster than a speeding bullet?

  6. Our websites are too heavy!!

  7. Images 1.310 Other 4 Video 227 HTML 56 Fonts 97

    Scripts 329 Stylesheets 63 http://httparchive.org/interesting.php Total: 2099 kB
  8. Users expect fast sites. After 3 seconds of load time,

    40% will abandon your site https://speakerdeck.com/lara/designing-for-performance
  9. Etsy found out that: + 160kb on a page +

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

    rate https://speakerdeck.com/lara/designing-for-performance
  11. Performance matters!

  12. But what should we be aiming for?

  13. We need good, reliable and replicable key metrics

  14. 1 Pageweight

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

    the more it has to transfer over the wire.
  16. So the goal is: Reduce weight!

  17. Images 1.310 Other 4 Video 227 HTML 56 Fonts 97

    Scripts 329 Stylesheets 63
  18. http://imageoptim.com

  19. <img src=“path/to/image/800.jpg“ 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" >
  20. How to keep track?

  21. None
  22. None
  23. https://github.com/macbre/phantomas

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

  25. This menu at the top holds 94 product images The

    requests alone stall the browser for roughly 14 sec
  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
  27. 2 Page Speed Score

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

    of best practices for every component of your website
  29. None
  30. https://developers.google.com/speed/pagespeed/insights

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

    JavaScript
  32. Reduce server response time Leverage browser caching Avoid landing page

    redirects Enable compression
  33. None
  34. None
  35. None
  36. How safe is Page Speed Score?

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

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

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

  40. None
  41. None
  42. None
  43. What the …?

  44. Solution: Page Speed Score is a good indicator on your

    dev style … but we need more!
  45. 3 Speed Index

  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.
  47. ∫ 1 - visuallycomplete/100 0 end

  48. What does this mean?

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

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

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
  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
  53. The lower Speed Index: The lower the better

  54. http://webpagetest.org

  55. None
  56. Critical CSS

  57. None
  58. This is where the content is loaded So let’s show

    the user everything we’ve got so far
  59. None
  60. CSS is blocking. That means: No content shown until the

    whole CSS is loaded
  61. Open up your website at the desired viewport. Look at

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

    content.
  63. npm install --save-dev critical

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

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

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

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

  68. <!doctype html> <html> <head> <style id=“critical”> </style> </head>

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

  70. None
  71. None
  72. One more optimisation

  73. None
  74. What happened?

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

    it’s cached) check everything again and again?
  76. Just load the things we need and tell the browser

    where we are without loading all the burden
  77. As an enhancement!

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

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

  80. var retrieveContent = function(loc) { $.get(loc) .done(function(data) { updateContent(data, loc);

    }) .fail(function(err) { window.location.href = loc; }); };
  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); };
  82. Speed Index equals regular Speed Index of the site without

    JS and CSS
  83. Take it even further…

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

  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); };
  86. var retrieveContent = function(loc) { if(sessionStorage.key(loc)) { updateContent(sessionStorage.getItem(loc), loc); }

    else { $.get(loc) .done(function(data) { updateContent(data, loc); }) } };
  87. Speed Index? Probably 0

  88. + What’s more?

  89. Apdex Network latency Connection speed Bandwidth

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