Data Driven Performance Optimisation

Transcript

1. 1.

   Data Driven Performance Optimisation Stefan Baumgartner | @ddprrt

2. 2.

   ruxit.com

3. 3.

   None
4. 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. 5.

   Faster than a speeding bullet?

6. 6.

   Our websites are too heavy!!

7. 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. 8.

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

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

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

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

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

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

    Performance matters!

12. 12.

    But what should we be aiming for?

13. 13.

    We need good, reliable and replicable key metrics

14. 14.

    1 Pageweight

15. 15.

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

    the more it has to transfer over the wire.
16. 16.

    So the goal is: Reduce weight!

17. 17.

    Images 1.310 Other 4 Video 227 HTML 56 Fonts 97

    Scripts 329 Stylesheets 63
18. 18.

    http://imageoptim.com

19. 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. 20.

    How to keep track?

21. 21.

    None
22. 22.

    None
23. 23.

    https://github.com/macbre/phantomas

24. 24.

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

25. 25.

    This menu at the top holds 94 product images The

    requests alone stall the browser for roughly 14 sec
26. 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. 27.

    2 Page Speed Score

28. 28.

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

    of best practices for every component of your website
29. 29.

    None
30. 30.

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

31. 31.

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

    JavaScript
32. 32.

    Reduce server response time Leverage browser caching Avoid landing page

    redirects Enable compression
33. 33.

    None
34. 34.

    None
35. 35.

    None
36. 36.

    How safe is Page Speed Score?

37. 37.

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

38. 38.

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

39. 39.

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

40. 40.

    None
41. 41.

    None
42. 42.

    None
43. 43.

    What the …?

44. 44.

    Solution: Page Speed Score is a good indicator on your

    dev style … but we need more!
45. 45.

    3 Speed Index

46. 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. 47.

    ∫ 1 - visuallycomplete/100 0 end

48. 48.

    What does this mean?

49. 49.

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

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

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

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

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

    Seconds 0s 1s 2s 3s 4s 5s 6s 7s 8s
52. 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. 53.

    The lower Speed Index: The lower the better

54. 54.

    http://webpagetest.org

55. 55.

    None
56. 56.

    Critical CSS

57. 57.

    None
58. 58.

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

    the user everything we’ve got so far
59. 59.

    None
60. 60.

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

    whole CSS is loaded
61. 61.

    Open up your website at the desired viewport. Look at

    the above the fold content.
62. 62.

    Open a headless browser to find the CSS for that

    content.
63. 63.

    npm install --save-dev critical

64. 64.

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

65. 65.

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

66. 66.

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

67. 67.

    http://jonassebastianohlsson.com/criticalpathcssgenerator/

68. 68.

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

69. 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. 70.

    None
71. 71.

    None
72. 72.

    One more optimisation

73. 73.

    None
74. 74.

    What happened?

75. 75.

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

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

    Just load the things we need and tell the browser

    where we are without loading all the burden
77. 77.

    As an enhancement!

78. 78.

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

79. 79.

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

80. 80.

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

    }) .fail(function(err) { window.location.href = loc; }); };
81. 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. 82.

    Speed Index equals regular Speed Index of the site without

    JS and CSS
83. 83.

    Take it even further…

84. 84.

    Do contents change during the period of a session?

85. 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. 86.

    var retrieveContent = function(loc) { if(sessionStorage.key(loc)) { updateContent(sessionStorage.getItem(loc), loc); }

    else { $.get(loc) .done(function(data) { updateContent(data, loc); }) } };
87. 87.

    Speed Index? Probably 0

88. 88.

    + What’s more?

89. 89.

    Apdex Network latency Connection speed Bandwidth

90. 90.

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