Loading techniques
Agenda
- The problem
- How to avoid render blocking resources
- Resource Hints
- Priority Hints
- Lazy Load
- Decoding
- Quicklink
- Predictive fetching
The problem
The problem
Sequential
< 2008
Parser modes
Speculative
Parser modes
2008 <
Sequential
Speculative
Parser modes
< 2008
2008 <
Speculative
Preload scannner
Blocking
Non blocking
Blocking resources
- script
- css
- font
- sync xhr
- script (async / defer / type="module")
- css with appropriate media rule
- font with display swap etc
-
sync xhr- avoid
- Feature-Policy: sync-xhr 'none'; document-write 'none';
Defer third-parties
Script behavior
Script parse + compiling
More than 30kb
Style sheets behavior without @media
Style sheets behavior with @media
Fonts behavior with font-display: swap;
Future variable fonts
Hints
Resource Hints
Preconnect
Preload
Preload with srcset, sizes
Prefetch
Prerender (No-State-Prefetch)
Modulepreload
Priority Hints
importance
So, head section must be close to
Lazy Load
The future present
The future present
The future present
How it works
Decoding API
Solution
Quicklink
Quicklink
Quicklink
Predictive prefetching data
Instant Page
Adaptive Loading
Adaptive Loading
Adaptive Loading
@babel/preset-modules
@babel/preset-modules
bundlephobia
bundlephobia
?