Minko Gechev
@mgechev
Predictive Prefetching for the Web
for better user experience
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Prefetching for speeding up navigation
faster Web and fewer rage clicks
Slide 8
Slide 8 text
⚡
Prefetching
Navigation
Slide 9
Slide 9 text
Prefetching strategies
• Prefetch all
• Visible links
• On mouse over
• Predictive prefetching
Slide 10
Slide 10 text
Web app with instant transitions
Application usage report Data analytics/ML model
How predictive prefetching works
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
github.com/guess-js
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Naveed Ahmed
Slide 16
Slide 16 text
Search and Find Latest Jobs in Pakistan
mustakbil.com
Slide 17
Slide 17 text
Search and Find Latest Jobs in Pakistan
mustakbil.com
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
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%
Slide 20
Slide 20 text
90%
for users on fast 3G
prefetching accuracy
>
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Using Guess.js
Slide 23
Slide 23 text
Predictive Prefetching for the Web
Speeds up page
navigation
Increases user
satisfaction
Support for popular
frameworks
Reduces data
usage