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

Predictive Prefetching for the Web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Minko Gechev Minko Gechev
November 11, 2019
Programming
0
380

Predictive Prefetching for the Web

Avatar for Minko Gechev

Minko Gechev

November 11, 2019
Tweet

More Decks by Minko Gechev

See All by Minko Gechev
Change the World With Open Source Software
Avatar for Minko Gechev mgechev
0
240
Fast Angular Apps from End to End
Avatar for Minko Gechev mgechev
1
250
The State of Angular
Avatar for Minko Gechev mgechev
1
220
The State of Angular
Avatar for Minko Gechev mgechev
1
440
Software Engineering as a Superpower
Avatar for Minko Gechev mgechev
1
250
Introduction to Angular
Avatar for Minko Gechev mgechev
1
260
Internals of the Angular CLI
Avatar for Minko Gechev mgechev
2
1.5k
The State of Angular
Avatar for Minko Gechev mgechev
1
250
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
Avatar for Minko Gechev mgechev
2
3k

Other Decks in Programming

See All in Programming
Symfony + NelmioApiDocBundle を使った スキーマ駆動開発 / Schema Driven Development with NelmioApiDocBundle
Avatar for Shohei Okada okashoi
0
250
The free-lunch guide to idea circularity
Avatar for Holly Cummins hollycummins
0
390
Geminiをパートナーに神社DXシステムを個人開発した話（いなめぐDX 開発振り返り）
Avatar for T. Fujiba fujiba
0
120
LM Linkで(非力な！)ノートPCでローカルLLM
Avatar for 瀬尾佳隆 seosoft
0
270
ロボットのための工場に灯りは要らない
Avatar for watany watany
12
3.2k
S3ストレージクラスの「見える」「ある」「使える」は全部違う ─ 体験から見た、仕様の深淵を覗く
Avatar for ya_ma23 ya_ma23
0
1.2k
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
Avatar for nnaka2992 nnaka2992
1
350
仕様漏れ実装漏れをなくすトレーサビリティAI基盤のご紹介
Avatar for Kuniwak orgachem
PRO
7
3.5k
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
Avatar for hideki kinjyo o0h
PRO
0
170
生成 AI 時代のスナップショットテストってやつを見せてあげますよ（α版）
Avatar for ojun ojun9
0
320
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
200
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
110

Featured

See All Featured
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
360
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
140
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
460
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
160
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.8k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k

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