v147 · Performance · demo

CSS Module Preloader

Toggle <link rel="modulepreload" as="style"> on and off. The timeline shows when the CSS module lands relative to your JavaScript, and whether it's already cached when the import runs.

CSS module cache status when import() runs

click ▶ Simulate load

<!-- In <head> — Chrome 147 now accepts as="style" -->
<link rel="modulepreload" as="style" href="/theme.css">

<!-- Later in a JS module: -->
<script type="module">
  // By the time this import fires, the CSS is already fetched
  import sheet from '/theme.css' assert { type: 'css' };
  document.adoptedStyleSheets = [sheet];
</script>

implementation reference

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

see also

implementation reference