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.

Filip Rakowski "Web Performance in modern JavaScript world"

132 views

Published on

In mobile-first era where network connectivity is not always stable and low-end devices are widely used it’s extremely important to keep your web applications smooth and optimized. During the talk we’ll take a look at the performance challenges we are facing every day and how modern JavaScript technologies such as PWA and AMP can help solving them. We will investigate how to optimize our app loading time, make JavaScript parsing faster, how to deliver reliable waiting experience to our users and much more.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Filip Rakowski "Web Performance in modern JavaScript world"

  1. 1. Performance Optimization of Modern Web Apps Filip Rakowski Divante / Vue Storefront
  2. 2. Filip Rakowski Co-founder Frontend Developer Community partner @filrakowski
  3. 3. 
 Let’s talk about Performance! *but not rendering performance, it’s a huge topic and they gave me only ~30 minutes ;( @filrakowski
  4. 4. Why performance is important? @filrakowski
  5. 5. @filrakowski
  6. 6. 2.2 sec load time reduction resulted in 15.4% more downloads Firefox @filrakowski
  7. 7. 1s slowdown resulted in 11% less page views Aberdeen Group @filrakowski
  8. 8. 2 sec delay resulted in 4.3% loss in revenue per visitor and 3.75% reduction in clicks Bing @filrakowski
  9. 9. cutting page load time half resulted in 13% increase in sales AutoAnything @filrakowski
  10. 10. SPEED = MONEY @filrakowski
  11. 11. What influences loading time performance? @filrakowski
  12. 12. Request / Response @filrakowski
  13. 13. Request / Response Parsing @filrakowski
  14. 14. Request / Response Parsing Execution @filrakowski
  15. 15. Request / Response Parsing Execution @filrakowski
  16. 16. Examples are in Vue Rules are framework agnostic ;) @filrakowski
  17. 17. Single File Components 
 Component.vue @filrakowski
  18. 18. Let’s make an app! @filrakowski
  19. 19. main.jsApp.vue Vue @filrakowski
  20. 20. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue @filrakowski
  21. 21. every new module or library = bigger bundle @filrakowski
  22. 22. bigger bundle = longer download @filrakowski
  23. 23. bigger bundle = longer parsing @filrakowski
  24. 24. bigger bundle = longer execution @filrakowski
  25. 25. SPEED = MONEY @filrakowski
  26. 26. MORE FEATURES = LESS MONEY? @filrakowski
  27. 27. @filrakowski
  28. 28. How webpack bundling works? @filrakowski
  29. 29. Dependency graph is a graph of modules in your application. Starting from entry point webpack is recursively adding all imported modules to the graph and bundles them into (usually) one file. @filrakowski
  30. 30. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue @filrakowski
  31. 31. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue @filrakowski
  32. 32. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue @filrakowski
  33. 33. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue @filrakowski
  34. 34. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue @filrakowski
  35. 35. main.jsrouter.js Vue Home.vue About.vueLodash vue-router App.vue app.js @filrakowski
  36. 36. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue We might not need this! @filrakowski
  37. 37. Code splitting allows you to split your code into various bundles. You can think about this as deferring a piece of your dependency graph to be loaded later. @filrakowski
  38. 38. Lazy loading loading chunk of code on demand usually as a response to user action. @filrakowski
  39. 39. Dynamic import @filrakowski
  40. 40. @filrakowski Lazy component in Vue
  41. 41. @filrakowski Lazy component in React with React.lazy
  42. 42. @filrakowski Lazy module in Angular with loadChildren
  43. 43. @filrakowski You’ll be able to lazily load individual modules with Angular Ivy Compiler
  44. 44. @filrakowski@filrakowski
  45. 45. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue home.js about.js @filrakowski
  46. 46. Nuxt is doing per-route code-splitting out of the box! @filrakowski
  47. 47. Rule #1 - Split your code per route @filrakowski
  48. 48. What else we don’t need on initial download? @filrakowski
  49. 49. @filrakowski
  50. 50. @filrakowski
  51. 51. Rule #2 - Load off-screen components lazily @filrakowski
  52. 52. @filrakowski You can use v-if to lazily load off-screen components
  53. 53. What else? @filrakowski
  54. 54. Rule #3 - Load non-critical libraries lazily @filrakowski
  55. 55. @filrakowski
  56. 56. Rule #4 - Avoid bundling all 3rd party libs into one file. It’s an anti-pattern. @filrakowski
  57. 57. main.jsrouter.js Vue Home.vue About.vueLodash vue-router vendor.js App.vue @filrakowski
  58. 58. main.jsrouter.js Vue Home.vue About.vueLodash vue-router vendor.js App.vue We might not need this! @filrakowski
  59. 59. What about code duplication? @filrakowski
  60. 60. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue home.js about.js Lodash @filrakowski
  61. 61. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue home.js about.js Lodash @filrakowski
  62. 62. @filrakowski
  63. 63. Rule #5 - Choose your libraries carefully and try to find smaller equivalents if possible @filrakowski
  64. 64. @filrakowski
  65. 65. @filrakowski
  66. 66. @filrakowski
  67. 67. Request / Response Parsing Execution @filrakowski
  68. 68. Rule #5 - Make use of cache for static assets @filrakowski
  69. 69. Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They can be used to serve network responses from cache instead of a network. @filrakowski
  70. 70. Service Worker NetworkClient app @filrakowski
  71. 71. Service Worker Network Client app Cache If asset was previously downloaded If asset is not in cache or needs to be „fresh” @filrakowski
  72. 72. Vue CLI PWA plugin @filrakowski
  73. 73. @filrakowski
  74. 74. Nuxt PWA module @filrakowski
  75. 75. @filrakowski
  76. 76. @filrakowski
  77. 77. What else we can do? @filrakowski
  78. 78. Prefetching downloading assets before they’re requested. @filrakowski
  79. 79. Rule #6 - Prefetch lazily loaded resources @filrakowski
  80. 80. @filrakowski
  81. 81. More general options webpack precachePlugin workbox-webpack-plugin @filrakowski
  82. 82. Vue-cli 3 is prefetching lazy chunks out of the box! @filrakowski
  83. 83. Don’t forget about compression, minification and other stuff that webpack and DevOps will do for you @filrakowski
  84. 84. Measure. 
 
 Otherwise you can’t tell if there was any improvement @filrakowski
  85. 85. #1 Dev tools “coverage” tool @filrakowski
  86. 86. CMD + Shift + P “Coverage” @filrakowski
  87. 87. Everything marked with red should probably be loaded lazily @filrakowski
  88. 88. #2 Webpack bundle analyzer @filrakowski
  89. 89. @filrakowski
  90. 90. @filrakowski
  91. 91. #2 ‘bundlesize’ package @filrakowski
  92. 92. @filrakowski
  93. 93. @filrakowski
  94. 94. #3 VS Code ‘Import cost’ plugin @filrakowski
  95. 95. @filrakowski
  96. 96. Deliver proper waiting experience @filrakowski
  97. 97. @filrakowski@filrakowski
  98. 98. @filrakowski Loaders @filrakowski
  99. 99. @filrakowski Placeholders @filrakowski
  100. 100. @filrakowski@filrakowski
  101. 101. When to use? - component is loading - data is loading @filrakowski
  102. 102. @filrakowski Vue Async Component
  103. 103. @filrakowski React Suspense
  104. 104. @filrakowski Managing Complex Waiting Experiences on Web UIs
 
 Fatih Kadir Akın https://medium.com/@fkadev/managing-complex-waiting-experiences-on-web-uis-29534d2d92a8 @filrakowski
  105. 105. Thank you! @filrakowski

×