v147 · Performance
Module Preload Builder
Build <link rel="modulepreload" as="json"> and as="style" tags for Chrome 147. Preview the HTML, test a real preload link, and inspect the MIME, integrity, credentials, and later-import conditions that decide whether the module graph can reuse the hint.
Build a tag
Live preview
<link rel="modulepreload" href="/public/app.js">
BROWSER SUPPORT
Spec contract lab
Change the response metadata and the later import to see when a preload is reusable, wasted, or invalid for JSON and CSS modules.
Response and consumer
Why this matters:
rel="modulepreload" preloads for the module graph. rel="preload" as="json" is the contrast case here: JSON should be preloaded as a module destination, not as a regular preload destination.
Live contract readout
Presets
Click a preset to add it to your library.
Library
Before vs. after comparison
Simulated page load timeline showing how modulepreload reduces critical-path latency for non-JS modules.
Click Run comparison to see timing breakdown.