Web Performance meets Machine Learning

In this talk, we’ll see how to use Guess.js - a toolkit for enabling data-driven UX, for automating the code splitting & pre-fetching for our React, Angular, and vanilla JavaScript applications by using machine learning! We’ll explain how with a single line of webpack config, we can make our build smarter & our applications faster!

Transcript

1. twitter.com/mgechev ML ❤ Web Performance twitter.com/mgechev github.com/mgechev blog.mgechev.com
2. twitter.com/mgechev twitter.com/mgechev github.com/mgechev
3. twitter.com/mgechev comparable to native
4. twitter.com/mgechev Everything comes with a price tag
5. twitter.com/mgechev
6. twitter.com/mgechev
7. twitter.com/mgechev
8. twitter.com/mgechev
9. twitter.com/mgechev
10. twitter.com/mgechev
11. twitter.com/mgechev https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
12. twitter.com/mgechev lazy-loading
13. twitter.com/mgechev - Route-based - Component-based Lazy-loading strategies
14. twitter.com/mgechev How do we pick the split points?
15. twitter.com/mgechev often subjectively
16. twitter.com/mgechev sometimes based on data
17. twitter.com/mgechev - Manual - Error-prone but always…
18. twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Pre-fetching
19. twitter.com/mgechev How do we pick the priorities of the bundles to pre-fetch?
20. twitter.com/mgechev
21. twitter.com/mgechev Lazy-load everything!
22. twitter.com/mgechev Lazy-load everything! …and let tooling take care of the rest
23. twitter.com/mgechev
24. twitter.com/mgechev /a /a/a /a/b /b /b/a /
25. twitter.com/mgechev /a /a/a /a/b /b /b/a /
26. twitter.com/mgechev /a /a/a /a/b /b /b/a /
27. twitter.com/mgechev /a /a/a /a/b /b /b/a /
28. twitter.com/mgechev
29. twitter.com/mgechev
30. twitter.com/mgechev Route-based splitting
31. twitter.com/mgechev $ npm run build # For Angular CLI $ serve -s dist
32. twitter.com/mgechev Let’s emulate *really* bad conditions
33. twitter.com/mgechev
34. twitter.com/mgechev
35. twitter.com/mgechev Let’s take a look at the GA graph
36. twitter.com/mgechev
37. twitter.com/mgechev
38. twitter.com/mgechev - Main & Settings in same chunk ‣ Update of the source code - Pre-fetch FAQ when the user is at Home Possible optimizations
39. twitter.com/mgechev
40. twitter.com/mgechev early preview
41. twitter.com/mgechev $ npm run eject # For Angular CLI $ vim webpack.config.js
42. twitter.com/mgechev const { GuessPlugin } = require('guess-webpack'); "// ""... plugins: [ "// ""... new GuessPlugin({ GA: 'XXXXXX' }) ] "// ""...
43. twitter.com/mgechev
44. twitter.com/mgechev
45. twitter.com/mgechev Support for Next.js, Nuxt.js, Gatsby, Angular*, React*, and Preact*
46. twitter.com/mgechev new GuessPlugin({ GA: 'XXXXXX' }) webpack.config.js
47. twitter.com/mgechev onNavigation(() "=> Object.keys(guess()) .forEach(prefetch) )
48. twitter.com/mgechev onNavigation(() "=> Object.keys(guess()) .forEach(prefetch) ) Make a “guess” Prefetch JavaScript
49. twitter.com/mgechev How it works…
50. twitter.com/mgechev slide by @addyosmani
51. twitter.com/mgechev guess-ga Fetching structured data from Google Analytics
52. twitter.com/mgechev const { fetch } = require(‘guess-ga'); fetch({ key: require('./c.json'), viewId: '000000000', period: { startDate, endDate }, routes }) .then(g "=> writeFileSync('data.json', JSON.stringify(g))); guess-ga
53. twitter.com/mgechev guess-parser Gets metadata by statically analyzing our app
54. twitter.com/mgechev guess-webpack Set of webpack plugins which automate the build
55. twitter.com/mgechev GuessPlugin ClusterChunksPlugin RuntimePrefetchPlugin
56. twitter.com/mgechev GuessPlugin ClusterChunksPlugin RuntimePrefetchPlugin
57. twitter.com/mgechev RuntimePrefetchPlugin
58. twitter.com/mgechev /a /a/a /a/b /b /b/a /
59. twitter.com/mgechev Markov Chain / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a /
60. twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
61. twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
62. twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
63. twitter.com/mgechev / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a / Activity: - Download b.bundle.js Probability threshold: 0.5
64. twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
65. twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
66. twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
67. twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
68. twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
69. twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action - Download a.bundle.js Probability threshold: 0.5
70. twitter.com/mgechev What about navigation history?
71. twitter.com/mgechev Recurrent Neural Networks
72. twitter.com/mgechev A X0 h0 A X1 h1 A X2 h2 Recurrent Neural Networks
73. twitter.com/mgechev
74. twitter.com/mgechev A X h A X h " 163k 9k
75. twitter.com/mgechev A X h A X h General purpose Fast to train Domain specific Small payload
76. twitter.com/mgechev - Personalized bundling - Smarter clustering - Smarter model - Personalize pre-fetching - Reduced chunk over fetching Future plans
77. twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/guess References
78. twitter.com/mgechev A new wave of data-driven web tooling is up to come
79. Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com