編集

MPA View Transitions の挙動を Speculative rules で改善する

#View Transitions #Speculation Rules API

View Transitions は最近 CSS のみで MPA でも利用できるようになったが、不安定な環境では、2 つの画面をスムーズに切り替えるためのページ読み込みによってフリーズしたような表示になってしまう場合がある。

これを特定のルートを事前レンダリングできるSpeculation Rules APIを利用して改善する方法についての記事。

https://ryanseddon.com/web/view-transitions-speculative/

次のような記述で事前レンダリングをブラウザに要求できる。

html
<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ]
  }
</script>

現状 Speculation Rules API は、Firefox と Safari ではサポートされていない。

https://developer.chrome.com/docs/web-platform/prerender-pages?hl=en

編集