ICS MEDIA の記事「クリックの前からロード済み ── Speculation Rules で『待ち時間ゼロ』のページ遷移を作る」で使用するデモです。
| デモ | 内容 | URL |
|---|---|---|
| 01 | 記事一覧 — Speculation Rules の ON / OFF を切り替えて、プリレンダリングの効果を DevTools で確認できます | デモを開く |
| 02 | カードグリッド — Speculation Rules と View Transitions API の併用例。SR の有無による遷移体験の違いを比較できます | デモを開く |
| 03 | EC 商品一覧→商品詳細 — Ray-Ban の事例を踏襲。デスクトップはホバーで moderate、モバイルは先頭4商品を immediate でプリレンダリング。画像の多い PDP で体感差が出ます |
デモを開く |
Speculation Rules API はファイルプロトコル（file://）では動作しません。ローカルサーバーを起動してください。
# Python（ポート 8000）
python3 -m http.server
# Node.js（ポート 3000）
npx serve
起動後、http://localhost:<ポート>/01/ にアクセスすると確認できます。
npx serve用の設定（serve.json）をリポジトリに含めています。cleanUrls: falseにより.htmlリダイレクトを抑止し、Speculation Rules のプリレンダリングが正常に動作するようにしています。
DevTools の Application → Speculative loads パネルを開いた状態でリンクにホバーすると、プリレンダリングの発生を確認できます。
├── 01/
│ ├── index.html … 記事一覧（SR トグル付き）
│ ├── 1.html〜4.html … 記事詳細
│ └── style.css
├── 02/
│ ├── index.html … カードグリッド（SR トグル + View Transitions）
│ ├── 1.html〜6.html … 記事詳細
│ └── style.css
├── 03/
│ ├── index.html … 商品一覧 PLP（SR トグル + デバイス別 eagerness）
│ ├── 1.html〜6.html … 商品詳細 PDP（画像多数 + Google Fonts）
│ └── style.css
└── README.md
<script type="speculationrules"> によるプリレンダリング（デモ 01・02: eagerness: "eager"、デモ 03: デバイス別 "moderate" / "immediate"）@view-transition { navigation: auto; } によるクロスドキュメント遷移アニメーション（デモ 02）Chrome 121 以降（Speculation Rules のドキュメントルール対応）