v147 · Performance · Modules

Modulepreload Network Waterfall

Simulated network waterfall comparing three loading strategies for a page that imports JSON data and a CSS module: no preload, preload with as="json"/as="style" (Chrome 147+), and the traditional workaround.

JavaScript module

JSON module

CSS module

preload

the HTML

<!-- Chrome 147+: preload JSON and CSS modules by type -->
<link rel="modulepreload" href="/data/config.json" as="json">
<link rel="modulepreload" href="/styles/tokens.css" as="style">

<script type="module">
  // By the time this runs, config.json and tokens.css are already fetched
  import config from '/data/config.json' assert { type: 'json' };
  import styles from '/styles/tokens.css' assert { type: 'css' };
</script>

references

ChromeStatus entry
Chrome 147 release notes

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗