Filip Rakowski "Web Performance in modern JavaScript world"
0 likes366 views
The document discusses the importance of performance optimization for modern web applications, emphasizing the financial impact of loading times on user engagement and revenue. It covers techniques such as code splitting, lazy loading, and effective library management to reduce bundle sizes and improve performance. Additionally, it highlights the use of service workers for caching and strategies for measuring performance improvements.
Filip Rakowski "Web Performance in modern JavaScript world"
- 1. Performance Optimization of Modern Web Apps Filip Rakowski Divante / Vue Storefront
- 2. Filip Rakowski Co-founder Frontend Developer Community partner @filrakowski
- 3. Let’s talk about Performance! *but not rendering performance, it’s a huge topic and they gave me only ~30 minutes ;( @filrakowski
- 4. Why performance is important? @filrakowski
- 5. @filrakowski
- 6. 2.2 sec load time reduction resulted in 15.4% more downloads Firefox @filrakowski
- 7. 1s slowdown resulted in 11% less page views Aberdeen Group @filrakowski
- 8. 2 sec delay resulted in 4.3% loss in revenue per visitor and 3.75% reduction in clicks Bing @filrakowski
- 9. cutting page load time half resulted in 13% increase in sales AutoAnything @filrakowski
- 11. What influences loading time performance? @filrakowski
- 16. Examples are in Vue Rules are framework agnostic ;) @filrakowski
- 18. Let’s make an app! @filrakowski
- 21. every new module or library = bigger bundle @filrakowski
- 26. MORE FEATURES = LESS MONEY? @filrakowski
- 27. @filrakowski
- 28. How webpack bundling works? @filrakowski
- 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
- 36. main.jsrouter.js Vue Home.vue About.vueLodash vue-router app.js App.vue We might not need this! @filrakowski
- 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. Lazy loading loading chunk of code on demand usually as a response to user action. @filrakowski
- 40. @filrakowski Lazy component in Vue
- 41. @filrakowski Lazy component in React with React.lazy
- 42. @filrakowski Lazy module in Angular with loadChildren
- 43. @filrakowski You’ll be able to lazily load individual modules with Angular Ivy Compiler
- 46. Nuxt is doing per-route code-splitting out of the box! @filrakowski
- 47. Rule #1 - Split your code per route @filrakowski
- 48. What else we don’t need on initial download? @filrakowski
- 49. @filrakowski
- 50. @filrakowski
- 51. Rule #2 - Load off-screen components lazily @filrakowski
- 52. @filrakowski You can use v-if to lazily load off-screen components
- 54. Rule #3 - Load non-critical libraries lazily @filrakowski
- 55. @filrakowski
- 56. Rule #4 - Avoid bundling all 3rd party libs into one file. It’s an anti-pattern. @filrakowski
- 58. main.jsrouter.js Vue Home.vue About.vueLodash vue-router vendor.js App.vue We might not need this! @filrakowski
- 59. What about code duplication? @filrakowski
- 62. @filrakowski
- 63. Rule #5 - Choose your libraries carefully and try to find smaller equivalents if possible @filrakowski
- 64. @filrakowski
- 65. @filrakowski
- 66. @filrakowski
- 68. Rule #5 - Make use of cache for static assets @filrakowski
- 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
- 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. Vue CLI PWA plugin @filrakowski
- 73. @filrakowski
- 75. @filrakowski
- 76. @filrakowski
- 77. What else we can do? @filrakowski
- 78. Prefetching downloading assets before they’re requested. @filrakowski
- 79. Rule #6 - Prefetch lazily loaded resources @filrakowski
- 80. @filrakowski
- 81. More general options webpack precachePlugin workbox-webpack-plugin @filrakowski
- 82. Vue-cli 3 is prefetching lazy chunks out of the box! @filrakowski
- 83. Don’t forget about compression, minification and other stuff that webpack and DevOps will do for you @filrakowski
- 84. Measure. Otherwise you can’t tell if there was any improvement @filrakowski
- 85. #1 Dev tools “coverage” tool @filrakowski
- 86. CMD + Shift + P “Coverage” @filrakowski
- 87. Everything marked with red should probably be loaded lazily @filrakowski
- 88. #2 Webpack bundle analyzer @filrakowski
- 89. @filrakowski
- 90. @filrakowski
- 92. @filrakowski
- 93. @filrakowski
- 94. #3 VS Code ‘Import cost’ plugin @filrakowski
- 95. @filrakowski
- 96. Deliver proper waiting experience @filrakowski
- 101. When to use? - component is loading - data is loading @filrakowski
- 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