Resource Hints modulepreload
Preload ES modules for faster JavaScript startup.
Why modulepreload Exists
ES modules form a dependency graph: an entry module imports others, which import more. Without help, each level of the tree is discovered only after the previous level parses — producing a sequential waterfall that wrecks load performance.
What modulepreload Does
<link rel="modulepreload" href="/app.js"> tells the browser to fetch the module AND its transitively imported modules immediately, in parallel. By the time the <script type="module"> runs, the entire graph is already in cache.
All lessons in this course
- The async and defer Attributes
- Preload Prefetch and Preconnect
- Lazy Loading Images loading=lazy
- Resource Hints modulepreload