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

Predictive Prefetching for the Web

Minko Gechev
November 11, 2019

Predictive Prefetching for the Web

Minko Gechev

November 11, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

  1. Minko Gechev
    @mgechev
    Predictive Prefetching for the Web
    for better user experience

    View full-size slide

  2. Prefetching for speeding up navigation
    faster Web and fewer rage clicks

    View full-size slide


  3. Prefetching
    Navigation

    View full-size slide

  4. Prefetching strategies
    • Prefetch all
    • Visible links
    • On mouse over
    • Predictive prefetching

    View full-size slide

  5. Web app with instant transitions
    Application usage report Data analytics/ML model
    How predictive prefetching works

    View full-size slide

  6. github.com/guess-js

    View full-size slide

  7. Naveed Ahmed

    View full-size slide

  8. Search and Find Latest Jobs in Pakistan
    mustakbil.com

    View full-size slide

  9. Search and Find Latest Jobs in Pakistan
    mustakbil.com

    View full-size slide

  10. Prefetching data consumption
    one user at the home page
    2.56MB
    Prefetch all modules
    100%
    1.22MB
    Prefetch visibile links
    48%
    0.18MB
    Predictive prefetching
    7%

    View full-size slide

  11. 90%
    for users on fast 3G
    prefetching accuracy
    >

    View full-size slide

  12. Additional optimizations
    implemented by Guess.js
    Adapts to the
    connection speed
    Prefetches by
    likelihood
    Calculates likelihood
    at build time
    Does not block the
    main thread

    View full-size slide

  13. Using Guess.js

    View full-size slide

  14. Predictive Prefetching for the Web
    Speeds up page
    navigation
    Increases user
    satisfaction
    Support for popular
    frameworks
    Reduces data
    usage

    View full-size slide

  15. web.dev/link-prefetch
    web.dev/predictive-prefetching

    View full-size slide

  16. Thank you!
    Minko Gechev
    @mgechev

    View full-size slide