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
2. ruxit.com
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?
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
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
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
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
56. Critical CSS
58. This is where the content is loaded So let’s show the user everything we’ve got so far
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>
72. One more optimisation
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