Demos for the ICS MEDIA article “Already Loaded Before You Click — Building ‘Zero-Wait’ Page Transitions with Speculation Rules.”
| Demo | Description | URL |
|---|---|---|
| 01 | Article list — Toggle Speculation Rules ON/OFF and observe prerendering behavior in DevTools | Open demo |
| 02 | Card grid — A combined Speculation Rules + View Transitions API example. Compare the transition experience with and without SR | Open demo |
| 03 | EC product list → product detail — Modeled on the Ray-Ban case study. Desktop uses moderate on hover; mobile prerenders the first 4 products with immediate. The image-heavy PDP makes the performance difference clear |
Open demo |
The Speculation Rules API does not work under the file protocol (file://). Start a local server:
npx serve
Then open http://localhost:3000/01/ in your browser.
A
serve.jsonconfig is included in the repo.cleanUrls: falseprevents.htmlredirects so that Speculation Rules prerendering works correctly.
Open DevTools Application → Speculative loads panel and hover over links to see prerendering in action.
├── 01/
│ ├── index.html … Article list (SR toggle)
│ ├── 1.html–4.html … Article detail
│ └── style.css
├── 02/
│ ├── index.html … Card grid (SR toggle + View Transitions)
│ ├── 1.html–6.html … Article detail
│ └── style.css
├── 03/
│ ├── index.html … Product list PLP (SR toggle + device-specific eagerness)
│ ├── 1.html–6.html … Product detail PDP (many images + Google Fonts)
│ └── style.css
└── README.md
<script type="speculationrules"> (Demos 01 & 02: eagerness: "eager", Demo 03: device-specific "moderate" / "immediate")@view-transition { navigation: auto; } (Demo 02)Chrome 121+ (document rules support for Speculation Rules)
Product images in 03/images/ are sourced from Unsplash and used under the Unsplash License.
MIT License — Copyright (c) 2026 ICS INC.