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

Predictive Prefetching for the Web

Avatar for Minko Gechev Minko Gechev
November 11, 2019
Programming
0
340

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
210
Fast Angular Apps from End to End
Avatar for Minko Gechev mgechev
1
210
The State of Angular
Avatar for Minko Gechev mgechev
1
210
The State of Angular
Avatar for Minko Gechev mgechev
1
390
Software Engineering as a Superpower
Avatar for Minko Gechev mgechev
1
220
Introduction to Angular
Avatar for Minko Gechev mgechev
1
220
Internals of the Angular CLI
Avatar for Minko Gechev mgechev
2
1.4k
The State of Angular
Avatar for Minko Gechev mgechev
1
230
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
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
Avatar for スナガク sunagaku
0
550
AI POSにおけるLLM Observability基盤の導入 ― サイバーエージェントDXインターン成果報告
Avatar for ♛Heitor Hirose hekuchan
0
550
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
240
Vueで学ぶデータ構造入門 リンクリストとキューでリアクティビティを捉える / Vue Data Structures: Linked Lists and Queues for Reactivity
Avatar for konkarin konkarin
1
290
Querying Design System デザインシステムの意思決定を支える構造検索
Avatar for ikuma-t ikumatadokoro
1
1.1k
複数チーム並行開発下でのコード移行アプローチ ~手動 Codemod から「生成AI 活用」への進化
Avatar for ANDPAD inc andpad
0
170
Module Harmony
Avatar for petamoriken / 森建 petamoriken
2
340
The Missing Link in Angular's Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
DartASTとその活用
Avatar for そた sotaatos
2
130
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
190
Functional Calisthenics in Kotlin: Kotlinで「関数型エクササイズ」を実践しよう
Avatar for Kent OHASHI lagenorhynque
0
130
仕様がそのままテストになる！Javaで始める振る舞い駆動開発
Avatar for uutan1108 ohmori_yusuke
8
4.2k

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
970
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k

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