Artem Denysov "Easy ways to speed up your web application"
Download as PPTX, PDF0 likes205 views
This document outlines techniques for improving web application performance, including minimizing bundles, adding defer attributes to scripts, prefetching resources, and moving non-critical styles. It recommends measuring performance with tools like Lighthouse and pwmetrics. An example is given of analyzing the Babel site timeline and improving load times by 2x by deferring a script and removing unnecessary resources for mobile. Overall, it advocates building mobile-first with real device testing, identifying bottlenecks, and applying modern techniques.
Artem Denysov "Easy ways to speed up your web application"
- 1. twitter/@denar90_ github/@denar90 Artem Denysov Easy ways to speed up your web application 1
- 7. twitter/@denar90_ github/@denar90 7 pwmetrics DevTools Timeline Viewer
- 8. twitter/@denar90_ github/@denar90 8 Agenda 1. Why mobile/offline apps? 2. Techniques. 3. Real example. 4. Tools. 5. Profit.
- 9. twitter/@denar90_ github/@denar90 Progressive Web Applications 9
- 15. twitter/@denar90_ github/@denar90 15 JavaScript Parse&Compile Time spent in Parse/Compile can often be 2–5x longer on phones than on desktops. youtu.be/RWLzUnESylc
- 23. twitter/@denar90_ github/@denar90 How to improve it? 23
- 25. twitter/@denar90_ github/@denar90 Perf audit by @paulirish goo.gl/druO7c 25
- 26. twitter/@denar90_ github/@denar90 Perf audit by @samccone goo.gl/6Ox9xG 26
- 30. twitter/@denar90_ github/@denar90 What’s the purpose? 30
- 31. twitter/@denar90_ github/@denar90 Define bottlenecks and then fix them! 31
- 32. twitter/@denar90_ github/@denar90 Let’s ask someone to do it! 32
- 37. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle 37
- 38. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts 38
- 39. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add defer attribute to your scripts <script src="my_script.js" defer></script> 39
- 40. twitter/@denar90_ github/@denar90 40 <script> <script async> <script defer> goo.gl/Ey3IWo
- 41. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts - move noncritical styles to body 41
- 47. twitter/@denar90_ github/@denar90 Key stuff - minimize your bundle - add `defer` attribute to your scripts - move noncritical styles to body - prefetch/preload 47
- 48. twitter/@denar90_ github/@denar90 48 <link rel=”preload”> Good for fetching later discovered resources (key scripts, Web Fonts, hero images)
- 49. twitter/@denar90_ github/@denar90 49 <link rel=”preload”> Good for fetching later discovered resources <link rel=”prefetch”> Good for future navigation (key scripts, Web Fonts, hero images)
- 51. twitter/@denar90_ github/@denar90 51 Let’s apply some of these techniques to real application
- 55. twitter/@denar90_ github/@denar90 55 Let’s add `defer` !
- 59. twitter/@denar90_ github/@denar90 59 Let’s not show ‘editor’ for mobile !
- 65. twitter/@denar90_ github/@denar90 Are there more stuff than DevTools? 65
- 67. twitter/@denar90_ github/@denar90 @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 67
- 68. twitter/@denar90_ github/@denar90 68 Chrome Launcher npm install chrome-launcher @GoogleChrome/lighthouse/tree/master/chrome-launcher
- 73. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 73 ~600 stars
- 75. 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 75
- 76. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 76
- 77. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 77
- 78. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 78
- 79. twitter/@denar90_ github/@denar90 pwmetrics - @paulirish/pwmetrics 79
- 89. twitter/@denar90_ github/@denar90 89 Google Drive Uploading
- 91. twitter/@denar90_ github/@denar90 91 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
- 92. twitter/@denar90_ github/@denar90 92 As a result
- 93. twitter/@denar90_ github/@denar90 93 Get better as a developer
- 94. twitter/@denar90_ github/@denar90 94 Get better as a developer Make more money for your project