Resource Hints modulepreload
Preload ES modules for faster JavaScript startup.
Resource Hints modulepreload is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Compared to preload
preload also fetches files in parallel, but it is unaware of import statements — preloading a module file does not preload its dependencies. modulepreload follows imports automatically, which is the whole point.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Where to Place It
In the <head>, as early as possible. The browser kicks off the preload request immediately and continues parsing HTML. By the time the matching <script type="module"> is encountered later in the document, the file is already in memory.
Discovery and Graph Walk
The browser parses the preloaded module looking for import statements, then issues parallel fetches for each imported URL, recursively. The user pays the cost of one round trip per level but gains parallelism within each level, drastically shortening the critical path.
Use With Bundlers
Modern bundlers (Vite, Rollup, Webpack 5+) emit modulepreload tags for code-split chunks automatically. In hand-rolled applications, generate them from the import graph at build time so the list stays accurate as modules are added or removed.
CrossOrigin Considerations
For cross-origin module preloads, include crossorigin="anonymous". This matches the default fetch mode of <script type="module">, ensuring the preloaded copy is reused rather than re-fetched without CORS headers.
Browser Support
modulepreload is supported in Chrome/Edge/Safari and recent Firefox. In older Firefox, it is silently ignored — modules still work, just without the preload benefit. No polyfill is needed; the worst case is slightly slower loading on outdated browsers.
Limit the Graph Size
Preloading hundreds of modules wastes bandwidth on code the user may never execute. Preload only the route-level entry chunks, not deeply lazy-loaded ones. Trust prefetch (or import on demand) for code paths used rarely.
Combining with Other Hints
For images and fonts in the same head, mix freely: preconnect for third-party CDNs, preload for critical fonts, modulepreload for entry modules, prefetch for next-page assets. The hints do not interfere with each other.
Verification
Check the Network panel: with modulepreload, the second-level imports appear as parallel requests starting almost simultaneously with the entry. Without it, they appear staggered, each request starting only after the parent finished parsing.
Knowledge Check
What does modulepreload do that a regular preload of the same module file does not?
Summary
modulepreload eliminates the ES module waterfall by fetching the entry module and its imports in parallel ahead of execution. Place it early in <head>, generate it from the build graph, set crossorigin for cross-origin modules, and limit the scope to route entry points to avoid wasted bandwidth.
Frequently asked questions
Is the “Resource Hints modulepreload” lesson free?
Yes — the full text of “Resource Hints modulepreload” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Resource Hints modulepreload”?
Preload ES modules for faster JavaScript startup. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Resource Hints modulepreload” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The async and defer Attributes
- Preload Prefetch and Preconnect
- Lazy Loading Images loading=lazy
- Resource Hints modulepreload