yaakai.to

🖊

Speculation Rules API を使ったページの事前レンダリング

rel="prerender" を利用したページの事前読み込みに変わる次世代の API として、 Speculation Rules API というものが Chrome に導入されました。

<script> で比較的簡単な記述をするだけでページの事前準備をすることができ、前回の View Transition API と組み合わせるとネイティブアプリのような滑らかなページ遷移を実現することが出来るようです。View Transition API の例を元にすると、次のようなコードで遷移先の内容を読み込んでおくことができます。

<!DOCTYPE html>
<html lang="en">
  <!-- 略 -->
  <body>
    <nav>
      <ul>
        <li id="navHome">
          <a href="./index.html">🏠 Home</a>
        </li>
        <li id="navBlog">
          <a href="./blog.html">🖊 Blog</a>
        </li>
        <li id="navAbout">
          <a href="./about.html">🐴 About</a>
        </li>
      </ul>
    </nav>
    <div id="mark"></div>
    <script type="speculationrules">
      {
        "prerender": [
          {
            "urls": ["about.html", "blog.html"]
          }
        ]
      }
    </script>
  </body>
</html>

実際の動作を比べてみると、View Transition API のみでは一度遷移し読み込みが完了するまで少し待ってからアニメーションが動作するのに対して、Speculation Rules API も足すことでクリック直後に素早くアニメーションと遷移が動作するようになります。

DevTool で動作確認を行う場合、 Application > Background Services > Speculative loads から動作を確認できます。

また、JavaScript から動的にルールを生成することも可能です。