v147 · Performance · demo
JSON Preload Race
Two simulated JSON module imports race: one with a <link rel="modulepreload" as="json"> hint, one without. The timing bars show time-to-data for each approach.
Click above to simulate both approaches.
No preload hint
baselineTime to data available
—
With modulepreload
Chrome 147Time to data available
—
<!-- Add this in <head> alongside other preloads -->
<link rel="modulepreload" as="json" href="/config.json">
<!-- Later, your ES module can import it instantly: -->
<script type="module">
// The browser already fetched and parsed config.json
// thanks to the modulepreload hint above.
import config from '/config.json' assert { type: 'json' };
console.log(config.version); // no network wait
</script>see also
- CSS Module Preloader — same idea for CSS modules
- Back to feature index
- ChromeStatus entry
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗