Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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!

Minko Gechev

October 18, 2018
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. twitter.com/mgechev
    ML ❤ Web Performance
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com

    View Slide

  2. twitter.com/mgechev
    twitter.com/mgechev
    github.com/mgechev

    View Slide

  3. twitter.com/mgechev
    comparable to native

    View Slide

  4. twitter.com/mgechev
    Everything comes with a price tag

    View Slide

  5. twitter.com/mgechev

    View Slide

  6. twitter.com/mgechev

    View Slide

  7. twitter.com/mgechev

    View Slide

  8. twitter.com/mgechev

    View Slide

  9. twitter.com/mgechev

    View Slide

  10. twitter.com/mgechev

    View Slide

  11. twitter.com/mgechev
    https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

    View Slide

  12. twitter.com/mgechev
    lazy-loading

    View Slide

  13. twitter.com/mgechev
    - Route-based
    - Component-based
    Lazy-loading strategies

    View Slide

  14. twitter.com/mgechev
    How do we pick the split points?

    View Slide

  15. twitter.com/mgechev
    often subjectively

    View Slide

  16. twitter.com/mgechev
    sometimes based on data

    View Slide

  17. twitter.com/mgechev
    - Manual
    - Error-prone
    but always…

    View Slide

  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

    View Slide

  19. twitter.com/mgechev
    How do we pick the priorities of
    the bundles to pre-fetch?

    View Slide

  20. twitter.com/mgechev

    View Slide

  21. twitter.com/mgechev
    Lazy-load everything!

    View Slide

  22. twitter.com/mgechev
    Lazy-load everything!
    …and let tooling take care of the rest

    View Slide

  23. twitter.com/mgechev

    View Slide

  24. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /

    View Slide

  25. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /

    View Slide

  26. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /

    View Slide

  27. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /

    View Slide

  28. twitter.com/mgechev

    View Slide

  29. twitter.com/mgechev

    View Slide

  30. twitter.com/mgechev
    Route-based splitting

    View Slide

  31. twitter.com/mgechev
    $ npm run build
    # For Angular CLI
    $ serve -s dist

    View Slide

  32. twitter.com/mgechev
    Let’s emulate *really* bad conditions

    View Slide

  33. twitter.com/mgechev

    View Slide

  34. twitter.com/mgechev

    View Slide

  35. twitter.com/mgechev
    Let’s take a look at the GA graph

    View Slide

  36. twitter.com/mgechev

    View Slide

  37. twitter.com/mgechev

    View Slide

  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

    View Slide

  39. twitter.com/mgechev

    View Slide

  40. twitter.com/mgechev
    early preview

    View Slide

  41. twitter.com/mgechev
    $ npm run eject
    # For Angular CLI
    $ vim webpack.config.js

    View Slide

  42. twitter.com/mgechev
    const { GuessPlugin } =
    require('guess-webpack');
    "// ""...
    plugins: [
    "// ""...
    new GuessPlugin({ GA: 'XXXXXX' })
    ]
    "// ""...

    View Slide

  43. twitter.com/mgechev

    View Slide

  44. twitter.com/mgechev

    View Slide

  45. twitter.com/mgechev
    Support for Next.js, Nuxt.js, Gatsby,
    Angular*, React*, and Preact*

    View Slide

  46. twitter.com/mgechev
    new GuessPlugin({
    GA: 'XXXXXX'
    })
    webpack.config.js

    View Slide

  47. twitter.com/mgechev
    onNavigation(() "=>
    Object.keys(guess())
    .forEach(prefetch)
    )

    View Slide

  48. twitter.com/mgechev
    onNavigation(() "=>
    Object.keys(guess())
    .forEach(prefetch)
    )
    Make a “guess”
    Prefetch JavaScript

    View Slide

  49. twitter.com/mgechev
    How it works…

    View Slide

  50. twitter.com/mgechev
    slide by @addyosmani

    View Slide

  51. twitter.com/mgechev
    guess-ga
    Fetching structured data from Google Analytics

    View Slide

  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

    View Slide

  53. twitter.com/mgechev
    guess-parser
    Gets metadata by statically analyzing our app

    View Slide

  54. twitter.com/mgechev
    guess-webpack
    Set of webpack plugins which automate the build

    View Slide

  55. twitter.com/mgechev
    GuessPlugin
    ClusterChunksPlugin RuntimePrefetchPlugin

    View Slide

  56. twitter.com/mgechev
    GuessPlugin
    ClusterChunksPlugin RuntimePrefetchPlugin

    View Slide

  57. twitter.com/mgechev
    RuntimePrefetchPlugin

    View Slide

  58. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /

    View Slide

  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
    /

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  70. twitter.com/mgechev
    What about navigation history?

    View Slide

  71. twitter.com/mgechev
    Recurrent Neural Networks

    View Slide

  72. twitter.com/mgechev
    A
    X0
    h0
    A
    X1
    h1
    A
    X2
    h2
    Recurrent Neural Networks

    View Slide

  73. twitter.com/mgechev

    View Slide

  74. twitter.com/mgechev
    A
    X
    h
    A
    X
    h
    "
    163k 9k

    View Slide

  75. twitter.com/mgechev
    A
    X
    h
    A
    X
    h
    General purpose
    Fast to train
    Domain specific
    Small payload

    View Slide

  76. twitter.com/mgechev
    - Personalized bundling
    - Smarter clustering
    - Smarter model
    - Personalize pre-fetching
    - Reduced chunk over fetching
    Future plans

    View Slide

  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

    View Slide

  78. twitter.com/mgechev
    A new wave of data-driven web tooling is up to come

    View Slide

  79. Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com

    View Slide