.html

<!-- ==========================================================
  Speculation Rules API テンプレート
  構成: prefetch + prerender + 副作用URL除外 + セレクター除外
  ※ type="speculationrules" の中身はJSONとしてパースされるためコメントを含められない。HTML側で補足する
  ※ 配置: head内またはbody内。JSとして実行されないため他のscriptとの順序は無関係
  ※ 無効化条件:
      Save-Dataヘッダー有効時
      省エネモード かつ バッテリー残量低下時
      メモリ不足時
========================================================== -->

<!-- prefetch with eager: HTMLのみ取得。発動タイミングはブラウザ依存で、immediateとmoderateの間 -->
<!-- 同時保持上限は2件。上限到達時は古いものから破棄される -->

<!-- prerender with moderate: デスクトップでは200msホバーまたはpointerdownでJS実行を含む完全なレンダリングを実行 -->
<!-- 同時保持上限は2件。上限到達時は古いものから破棄され、再ホバーで再トリガーされる -->

<!-- 遷移先が単一のページでは where の代わりに urls で対象URLを列挙し、eagerness: immediate を指定する -->
<!-- immediate はルール検出直後に発動する。同時保持上限はprefetchで50件、prerenderで10件 -->
<!-- script要素をDOMから削除するとスロットが解放される -->

<!-- prefetch/prerenderはGETリクエストを送信する -->
<!-- GETで副作用が発生するURL（ログアウト、カート追加等）は not で除外しなければ先読み時に意図しない動作が起きる -->

<!-- selector_matchesにより、data-no-prerender属性を持つリンクは個別に除外される -->
<!-- 使用例: <a href="/admin/danger" data-no-prerender> -->
<!-- prefetchで同一オリジン内の全リンクのHTMLを先行取得し、prerenderはホバー/pointerdownのあったリンクに限定する -->
<!-- これにより帯域とメモリの消費を抑えつつ、クリック時にはレンダリング済みのページを即座に表示できる -->
<script type="speculationrules">
{
  "prefetch": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart/add/*" } },
          { "not": { "href_matches": "/api/*" } },
          { "not": { "selector_matches": "[data-no-prerender]" } }
        ]
      },
      "eagerness": "eager"
    }
  ],
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart/add/*" } },
          { "not": { "href_matches": "/api/*" } },
          { "not": { "selector_matches": "[data-no-prerender]" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

.js

// プリレンダリング中はJSが実行されるため、PVが二重カウントされうる
// Google Analytics と Google Publisher Tag はプリレンダリングに対応済み
// それ以外のアナリティクスツールには以下のガードが必要
if (document.prerendering) {
  document.addEventListener("prerenderingchange", () => {
    initAnalytics(); // prerenderingchangeはユーザーがページを実際に表示した時点で発火する
  }, { once: true });
} else {
  initAnalytics();
}