Predictive Prefetching for the Web

Transcript

2. Minko Gechev @mgechev Predictive Prefetching for the Web for better user experience
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
13. github.com/guess-js
15. Naveed Ahmed
16. Search and Find Latest Jobs in Pakistan mustakbil.com
17. Search and Find Latest Jobs in Pakistan mustakbil.com
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