Predictive Prefetching for the Web

Predictive Prefetching for the Web

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

November 11, 2019
Tweet

Transcript

  1. None
  2. Minko Gechev @mgechev Predictive Prefetching for the Web for better

    user experience
  3. None
  4. None
  5. None
  6. None
  7. Prefetching for speeding up navigation faster Web and fewer rage

    clicks
  8. ⚡ Prefetching Navigation

  9. Prefetching strategies • Prefetch all • Visible links • On

    mouse over • Predictive prefetching
  10. Web app with instant transitions Application usage report Data analytics/ML

    model How predictive prefetching works
  11. None
  12. None
  13. github.com/guess-js

  14. None
  15. Naveed Ahmed

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

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

  18. None
  19. 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%
  20. 90% for users on fast 3G prefetching accuracy >

  21. 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
  22. Using Guess.js

  23. Predictive Prefetching for the Web Speeds up page navigation Increases

    user satisfaction Support for popular frameworks Reduces data usage
  24. web.dev/link-prefetch web.dev/predictive-prefetching

  25. Thank you! Minko Gechev @mgechev