v147 · Performance

JSON and style support for link rel=modulepreload

Chrome 147 lets you declare JSON and CSS modules as <link rel="modulepreload" as="json"> / as="style", so those modules are fetched and parsed before the JavaScript that imports them even runs.

concepts

  1. JSON Preload Race

    Two identical JSON module imports compete side by side — one page hints with <link rel="modulepreload" as="json">, the other doesn't. A timing bar shows how much time the hint shaves off the critical path.

  2. CSS Module Preloader

    Live demo of <link rel="modulepreload" as="style">. Toggle the preload hint and watch whether a CSS module is already cached when the import fires — complete with a PerformanceResourceTiming inspector.

  3. Modulepreload Network Waterfall

    Simulated network waterfall comparing three strategies — no preload, as="json"/as="style" (Chrome 147+), and old-workaround — showing how parallel fetching eliminates the JS-parse dependency and reduces total load time.

  4. Module Preload Builder

    Form-based tag builder for <link rel="modulepreload">. Pick type chips (script/json/style with Chrome 147 callout), see live HTML preview, measure PerformanceObserver-based load timing, select from 5 library presets, and copy generated tags. Includes an animated before/after critical-path waterfall showing the saving from parallel JSON+CSS prefetching.

  5. Compatibility Lab

    Detects as="json" and as="style" support on <link rel="modulepreload"> via attribute reflection. Shows an as= value matrix, compares native preload against fetch() fallback, and provides the supportsModulepreloadAs(type) detection helper.

why it shipped

JSON modules (import data from './config.json' assert { type: 'json' }) and CSS modules (import sheet from './theme.css' assert { type: 'css' }) were added to Chromium years before <link rel="modulepreload"> could name them. This left a performance gap: the browser would fetch and parse these non-JS modules only after the importing script had already been parsed and started executing, putting them on the critical path for later imports. Adding as="json" and as="style" destinations to modulepreload closes that gap — the browser can schedule the fetch immediately alongside as="script" preloads.

references

implementation reference

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