Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Predictive Prefetching
Search
Minko Gechev
March 26, 2019
Programming
4
650
Predictive Prefetching
Minko Gechev
March 26, 2019
Tweet
Share
More Decks by Minko Gechev
See All by Minko Gechev
Change the World With Open Source Software
mgechev
0
180
Fast Angular Apps from End to End
mgechev
1
180
The State of Angular
mgechev
1
190
The State of Angular
mgechev
1
360
Software Engineering as a Superpower
mgechev
1
190
Introduction to Angular
mgechev
1
190
Internals of the Angular CLI
mgechev
2
1.3k
The State of Angular
mgechev
1
200
The State of Angular Deployment, SSR, and Prerendering, ng-conf keynote
mgechev
2
2.9k
Other Decks in Programming
See All in Programming
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Deep Dive into ~/.claude/projects
hiragram
10
2k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
490
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
600
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
260
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
460
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
530
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Gamification - CAS2011
davidbonilla
81
5.3k
Speed Design
sergeychernyshev
32
1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
95
6.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
RailsConf 2023
tenderlove
30
1.1k
Docker and Python
trallard
44
3.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
Scaling GitHub
holman
459
140k
Transcript
twitter.com/mgechev Predictive Prefetching twitter.com/mgechev github.com/mgechev blog.mgechev.com
twitter.com/mgechev twitter.com/mgechev github.com/mgechev
twitter.com/mgechev Evolution of the web UI Code-splitting Prefetching Guess.js Agenda
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
twitter.com/mgechev lazy-loading
twitter.com/mgechev - Route-based - Component-based Lazy-loading strategies
twitter.com/mgechev Step 1: Open https://example.com/ Step 2: Determine JavaScript which
is likely to be required Step 3: Download the chunks Step 4: Store chunks in browser cache Pre-fetching
twitter.com/mgechev How do we pick the priorities of the bundles
to pre-fetch?
twitter.com/mgechev
twitter.com/mgechev Lazy-load everything!
twitter.com/mgechev Lazy-load everything! …and let tooling take care of the
rest
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev Route-based splitting
twitter.com/mgechev $ npm run build # For Angular CLI $
serve -s dist
twitter.com/mgechev Let’s emulate *really* bad conditions
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev Let’s take a look at the GA graph
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev - Main & Settings in same chunk ‣ Update
of the source code - Pre-fetch FAQ when the user is at Home Possible optimizations
twitter.com/mgechev
twitter.com/mgechev early preview
twitter.com/mgechev $ vim webpack.config.js
twitter.com/mgechev const { GuessPlugin } = require('guess-webpack'); // ... plugins:
[ // ... new GuessPlugin({ GA: 'XXXXXX' }) ] // ...
twitter.com/mgechev
twitter.com/mgechev
twitter.com/mgechev How it works…
twitter.com/mgechev - guess-ga - guess-parser - guess-webpack Packages
twitter.com/mgechev guess-ga Fetching structured data from Google Analytics
twitter.com/mgechev guess-parser Gets metadata by statically analyzing our app
twitter.com/mgechev guess-webpack Set of webpack plugins which automate the build
twitter.com/mgechev /a /a/a /a/b /b /b/a /
twitter.com/mgechev Markov Chain / /a /a/:id /b /b/a / 0
0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a /
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: / /a
/a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev / /a /a/:id /b /b/a / 0 0.3 0
0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 /a /a/a /a/b /b /b/a / Activity: - Download b.bundle.js Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download
b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / Activity: - Download
b.bundle.js / /a /a/:id /b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action Probability threshold: 0.5
twitter.com/mgechev /a /a/a /a/b /b /b/a / / /a /a/:id
/b /b/a / 0 0.3 0 0.7 0 /a 0 0 0.9 0.1 0 /a/:id 0 1 0 0 0 /b 0 0 0 0 1 /b/a 0 1 0 0 0 Activity: - Download b.bundle.js - No action - Download a.bundle.js Probability threshold: 0.5
twitter.com/mgechev - https://mgv.io/dd-bundling - https://mgv.io/cost-of-js - https://mgv.io/predictive-fetching - https://mgv.io/guess References
Thank you! twitter.com/mgechev github.com/mgechev blog.mgechev.com