Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Артем Денисов "Improve your web application using Progressive Web Metrics"

257 views

Published on

Measuring page load is hard. Are there better metrics then ‘load’ event for representing page load time? How to represent user’s performance perception? Etc...
I’ll talk about Progressive Web Metrics which are going to solve these problems. Explain how to measure web page load (based on last Google/Chrome dev team researches). Which tools are available for taking these measurements. Profit you can achieve using them.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Артем Денисов "Improve your web application using Progressive Web Metrics"

  1. 1. Artem Denysov Progressive Web Metrics
  2. 2. twitter/@denar90_ github/@denar90 @brunch @marionettejs 2
  3. 3. twitter/@denar90_ github/@denar90 Progressive Web Metrics 3
  4. 4. Improve Performance WHY? HOW? WHAT TO USE? 4
  5. 5. twitter/@denar90_ github/@denar90 Progressive Web Applications 5
  6. 6. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable 6
  7. 7. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable 7
  8. 8. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable - Fast 8
  9. 9. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable - Fast 9
  10. 10. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable - Fast - Engaging 10
  11. 11. twitter/@denar90_ github/@denar90 Progressive Web Applications - Reliable - Fast - Engaging 11
  12. 12. twitter/@denar90_ github/@denar90 PWA - 2016 12
  13. 13. twitter/@denar90_ github/@denar90 2017 - ? 13
  14. 14. twitter/@denar90_ github/@denar90 Let’s look at Google developers What are they working on? 14
  15. 15. twitter/@denar90_ github/@denar90 Addy Osmani Performance improvements for webpack webpack/issues/3216 15
  16. 16. twitter/@denar90_ github/@denar90 Paul Irish Performance metrics and libs for their measurements 16
  17. 17. twitter/@denar90_ github/@denar90 Performance - 2017 17
  18. 18. twitter/@denar90_ github/@denar90 Why? 18
  19. 19. twitter/@denar90_ github/@denar90 19
  20. 20. twitter/@denar90_ github/@denar90 goo.gl/AFQZat 20
  21. 21. twitter/@denar90_ github/@denar90 ~ $30 21
  22. 22. twitter/@denar90_ github/@denar90 22 Network latency goo.gl/JYgVdB
  23. 23. twitter/@denar90_ github/@denar90 23 JavaScript Parse&Compile Time spent in Parse/Compile can often be 2–5x longer on phones than on desktops. youtu.be/RWLzUnESylc
  24. 24. goo.gl/3lfWDH
  25. 25. twitter/@denar90_ github/@denar90 25
  26. 26. twitter/@denar90_ github/@denar90 26
  27. 27. twitter/@denar90_ github/@denar90 27
  28. 28. twitter/@denar90_ github/@denar90 28 goo.gl/08Dibh
  29. 29. twitter/@denar90_ github/@denar90 29
  30. 30. twitter/@denar90_ github/@denar90 30 @npm/mobile-friendlysearch.google.com/search-console/mobile-friendly
  31. 31. twitter/@denar90_ github/@denar90 31 whatdoesmysitecost.com
  32. 32. twitter/@denar90_ github/@denar90 How to improve it? 32
  33. 33. twitter/@denar90_ github/@denar90 Measure! 33
  34. 34. twitter/@denar90_ github/@denar90 Perf audit by @paulirish goo.gl/druO7c 34
  35. 35. twitter/@denar90_ github/@denar90 Perf audit by @samccone goo.gl/6Ox9xG 35
  36. 36. twitter/@denar90_ github/@denar90 36
  37. 37. twitter/@denar90_ github/@denar90 37
  38. 38. twitter/@denar90_ github/@denar90 How to measure user's happiness painfulness? 38
  39. 39. twitter/@denar90_ github/@denar90 Metrics are used today 39
  40. 40. twitter/@denar90_ github/@denar90 Metrics are used today - onLoad (to late) 40
  41. 41. twitter/@denar90_ github/@denar90 Metrics are used today - onLoad (to late) - DOMContentLoaded (to early because of heavy js) 41
  42. 42. twitter/@denar90_ github/@denar90 Progressive Web Metrics 42
  43. 43. twitter/@denar90_ github/@denar90 Definition of user perception page loading 43
  44. 44. twitter/@denar90_ github/@denar90 Definition of user perception page loading “is it happening”? Has my navigation started successfully (the server has responded, etc.)? 44
  45. 45. twitter/@denar90_ github/@denar90 Definition of user perception page loading “is it happening”? Has my navigation started successfully (the server has responded, etc.)? “is it useful”? Has the page painted enough critical content that I could engage with? 45
  46. 46. twitter/@denar90_ github/@denar90 Definition of user perception page loading “is it happening”? Has my navigation started successfully (the server has responded, etc.)? “is it useful”? Has the page painted enough critical content that I could engage with? “is it usable”? Can I actually engage with the page or is it still busy? 46
  47. 47. twitter/@denar90_ github/@denar90 Definition of user perception page loading “is it happening”? Has my navigation started successfully (the server has responded, etc.)? “is it useful”? Has the page painted enough critical content that I could engage with? “is it usable”? Can I actually engage with the page or is it still busy? “is it delightful”? Was I pleasantly surprised by the lack of scrolling jank, animation jank, FOUC, slow webfonts,etc? 47
  48. 48. twitter/@denar90_ github/@denar90 Perceptual load timings: goo.gl/AMwHCg 48
  49. 49. twitter/@denar90_ github/@denar90 First paint Perceptual load timings: 49
  50. 50. twitter/@denar90_ github/@denar90 First paint First Contentful Paint Perceptual load timings: 50
  51. 51. twitter/@denar90_ github/@denar90 First paint First Contentful Paint Perceptual load timings: Definition: The timestamp of a shipped frame that contains ANY of these: ● First paint of text ● First paint of SVG ● First paint of an image ● First paint of a background-image ● First paint of a canvas 51
  52. 52. twitter/@denar90_ github/@denar90 First paint First Contentful Paint Is it happening? 52
  53. 53. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Perceptual load timings: 53
  54. 54. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Perceptual load timings: Definition: Primary content is shown on a page: ● Header and text for blogs ● Search text for search engines ● Images if they are critical for e-commerce products 54
  55. 55. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Perceptual load timings: Doesn’t count: ● Spinners or smth similar ● FOUC ● Just navigation bar or page header 55
  56. 56. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Is it useful? 56
  57. 57. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Visually Ready Perceptual load timings: 57
  58. 58. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Visually Ready Time to Interactive Perceptual load timings: 58
  59. 59. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Visually Ready Time to Interactive Perceptual load timings: Definition: ● FMP ● 85% visually complete ● DOMContentLoaded has been fired 59
  60. 60. twitter/@denar90_ github/@denar90 First paint First Contentful Paint First Meaningful Paint Visually Ready Time to interactive Is it usable? 60
  61. 61. twitter/@denar90_ github/@denar90 Key metrics: - First Contentful Paint (when any contentful thing (text, img, svg etc) appeared first time, nav actually started) - First Meaningful Paint (when primary content is visible) - Time to Interactive (when FMP happened, DOMContentLoaded fired, Visually Ready, user feels like he/she can engage with page) 61
  62. 62. twitter/@denar90_ github/@denar90 Key metrics: - First Contentful Paint (when any contentful thing (text, img, svg etc) appeared first time, nav actually started) - First Meaningful Paint (when primary content is visible) - Time to Interactive (when FMP happened, DOMContentLoaded fired, Visually Ready, user feels like he/she can engage with page) - Estimated Input Latency (estimates page responding to user input (< 50 ms) ) 62
  63. 63. twitter/@denar90_ github/@denar90 Key metrics: - First Contentful Paint (when any contentful thing (text, img, svg etc) appeared first time, nav actually started) - First Meaningful Paint (when primary content is visible) - Time to Interactive (when FMP happened, DOMContentLoaded fired, Visually Ready, user feels like he/she can engage with page) - Estimated Input Latency (estimates page responding to user input (< 50 ms) ) - Perceptual Speed Index / Visually complete (measures how quickly the page contents are visually populated) 63
  64. 64. twitter/@denar90_ github/@denar90 Key metrics: - First Contentful Paint (when any contentful thing (text, img, svg etc) appeared first time, nav actually started) - First Meaningful Paint (when primary content is visible) - Time to Interactive (when FMP happened, DOMContentLoaded fired, Visually Ready, user feels like he/she can engage with page) - Estimated Input Latency (estimates page responding to user input (< 50 ms) ) - Perceptual Speed Index / Visually complete (measures how quickly the page contents are visually populated) - Frame Throughput (60 fps stuff) 64
  65. 65. twitter/@denar90_ github/@denar90 What’s the purpose? 65
  66. 66. twitter/@denar90_ github/@denar90 Define your bottlenecks and then fix them! 66
  67. 67. twitter/@denar90_ github/@denar90 Let’s ask someone to do it! 67
  68. 68. twitter/@denar90_ github/@denar90 68
  69. 69. twitter/@denar90_ github/@denar90 69
  70. 70. twitter/@denar90_ github/@denar90 Let’s Google it! 70
  71. 71. twitter/@denar90_ github/@denar90 71
  72. 72. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle 72
  73. 73. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts 73
  74. 74. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add defer attribute to your scripts <script src="my_script.js" defer></script> 74
  75. 75. twitter/@denar90_ github/@denar90 75 <script> <script async> <script defer> goo.gl/Ey3IWo
  76. 76. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts - move noncritical styles to body 76
  77. 77. twitter/@denar90_ github/@denar90 77
  78. 78. twitter/@denar90_ github/@denar90 @addyosmani/critical 78
  79. 79. twitter/@denar90_ github/@denar90 79 Earlier
  80. 80. twitter/@denar90_ github/@denar90 80 Earlier Now
  81. 81. twitter/@denar90_ github/@denar90 81 goo.gl/1rxh8V
  82. 82. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts - move noncritical styles to body - prefetch/preload 82
  83. 83. twitter/@denar90_ github/@denar90 83 <link rel=”preload”> Good for fetching later discovered resources
  84. 84. twitter/@denar90_ github/@denar90 84 <link rel=”preload”> Good for fetching later discovered resources <link rel=”prefetch”> Good for future navigation
  85. 85. twitter/@denar90_ github/@denar90 85 goo.gl/PfkprA
  86. 86. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts - move noncritical styles to body - prefetch/preload - PRPL pattern 86
  87. 87. twitter/@denar90_ github/@denar90 87 PRPL pattern
  88. 88. twitter/@denar90_ github/@denar90 88 PRPL pattern youtu.be/RWLzUnESylc
  89. 89. twitter/@denar90_ github/@denar90 89 PRPL pattern - <link rel=”preload”> - HTTP/2 Push + Service Worker
  90. 90. twitter/@denar90_ github/@denar90 90 Let’s apply some of these techniques to real application
  91. 91. twitter/@denar90_ github/@denar90 91 babeljs.io/
  92. 92. twitter/@denar90_ github/@denar90 92 Timeline trace
  93. 93. twitter/@denar90_ github/@denar90 93 Timeline trace
  94. 94. twitter/@denar90_ github/@denar90 94 Let’s add `defer` !
  95. 95. twitter/@denar90_ github/@denar90 95 Timeline trace
  96. 96. twitter/@denar90_ github/@denar90 96 Timeline trace
  97. 97. twitter/@denar90_ github/@denar90 97
  98. 98. twitter/@denar90_ github/@denar90 98 Let’s not show ‘editor’ for mobile !
  99. 99. twitter/@denar90_ github/@denar90 99 Timeline trace
  100. 100. twitter/@denar90_ github/@denar90 100 2x speedup!
  101. 101. twitter/@denar90_ github/@denar90 101 @babel.github.io/pull/1234
  102. 102. twitter/@denar90_ github/@denar90 102 @brunch.github.io/pull/199
  103. 103. twitter/@denar90_ github/@denar90 103 @code-nasa-gov/issues/49
  104. 104. twitter/@denar90_ github/@denar90 Are there more stuff than DevTools? 104
  105. 105. twitter/@denar90_ github/@denar90 WebPagetest - webpagetest.org goo.gl/Z4NTol 105
  106. 106. twitter/@denar90_ github/@denar90 WebPagetest - webpagetest.org goo.gl/Z4NTol 106 Metrics - Visuality complete - Time to interactive (beta) - to be continued ...
  107. 107. twitter/@denar90_ github/@denar90 Lighthouse - @GoogleChrome/lighthouse/ ~8 K stars 107
  108. 108. twitter/@denar90_ github/@denar90 Lighthouse - @GoogleChrome/lighthouse/ Runtime Environment ● Device Emulation (Nexus 5X): Enabled ● Network Throttling (150ms RTT, 1.6Mbps down, 0.7Mbps up): Enabled ● CPU Throttling (5x slowdown): Enabled 108
  109. 109. twitter/@denar90_ github/@denar90 Lighthouse - @GoogleChrome/lighthouse/ 109
  110. 110. twitter/@denar90_ github/@denar90 Lighthouse - @GoogleChrome/lighthouse/ 110
  111. 111. twitter/@denar90_ github/@denar90 111
  112. 112. twitter/@denar90_ github/@denar90 112
  113. 113. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 113
  114. 114. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics Runtime Environment ● Device Emulation (Nexus 5X): Enabled ● Network Throttling (150ms RTT, 1.6Mbps down, 0.7Mbps up): Enabled ● CPU Throttling (5x slowdown): Enabled 114
  115. 115. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 115
  116. 116. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 116
  117. 117. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 117
  118. 118. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 118
  119. 119. twitter/@denar90_ github/@denar90 119
  120. 120. twitter/@denar90_ github/@denar90 120 What was learned? - build mobile first apps - use real device for testing/measuring - use different metrics to define performance bottlenecks - apply latest techniques for improving your application performance
  121. 121. twitter/@denar90_ github/@denar90 121 As a result
  122. 122. twitter/@denar90_ github/@denar90 122 Get better as a developer
  123. 123. twitter/@denar90_ github/@denar90 123 Get better as a developer Make more money for your project
  124. 124. twitter/@denar90_ github/@denar90 Thanks! 124

×