WEB標準のプリフェッチについて

投稿日:2025/08/22　最終更新日:2025/08/22

Table of Contents

結論から

WEB標準では以下を用いることでプリフェッチを実装できる。

<script type="speculationrules">
 {
  "urls": ["hoge.html"],
  "prerender": [
   { where: { "selector_matches": "a" } }
  ]
 }
</script>

「各ブラウザ間の環境の違いが減少した」「WEB標準で実装できる幅が広がった」ことが理由。

IEの終了やChroniumを利用するブラウザが増加したことにより、各ブラウザ間による仕様の違いは徐々に改善された。
そして、WEB APIがちらほら実装されたことでフレームワークに頼らずにUXに優れたサイトを作ることが可能になりつつある。

ここで挙げているSpeculation Rules APIはその一つである。

これは、ページ内にあるリンクから遷移先の情報を事前に読み込んでおくことで、遷移時のパフォーマンスを向上させるための仕組みである。

Next.jsのLinkコンポーネントと同じようなものと捉えられ、これまではフレームワークを利用することでこれらを実現していたが、WEB標準でも可能となっている。

他にもView Transitions APIによりSPAのような滑らかなページ間遷移をCSSのみで実現できる。

実際に使ってみたところファイルサイズの大きい画像もプリフェッチにより読み込み待ちが限りなくゼロに削減出来たので、使い所はたくさんありそう。

これまではReactなどのモダンフロントエンド技術がよく使われていたと思われるが、ビルドシステムの複雑さやJSバンドルサイズの増大などアップデートされるとともに扱い辛くなってきた模様。

実際、Next.jsよりもReactの方がページ表示が早いと書かれた記事も目にしたこともある。

ここ最近はWEB標準が再評価されたとの記事も見られたり、パフォーマンス・アクセシビリティなどを求めるにはWEB標準を基本に構築して必要な部分でフレームワークを採用するのが良いらしいが、良し悪しはありそうなので慎重に使い所を検討したいところ。

<< DOEの概要