Web Performance meets Machine Learning

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!

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

October 18, 2018
Tweet

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