【海外記事紹介】たった6行のHTMLであらゆるWebサイトを高速化する手法が話題に

8月1日、オープンソースの電子署名サービスDocusealが「Make any website load faster with 6 lines of HTML」と題したブログ記事を公開し、海外で話題を呼んでいる。

この記事では、Chrome 121以降で利用可能な Speculation Rules API を活用し、わずか6行のHTMLだけでページ遷移を“ほぼ瞬時”にする手法について詳しく紹介されている。以下に、その内容を紹介する。

Speculation Rules APIの概要

Speculation Rules APIは、ブラウザに対して「どのリンク先をいつプリフェッチ／プリレンダーすべきか」を宣言的に指示できる仕組みだ。Speculation Rulesは、以下のようにJSONを <script type="speculationrules"> に埋め込む形でブラウザに指示を与える。

<script type="speculationrules">
{
  "prerender": [
    { "source": "list", "urls": ["/services", "/pricing"] }
  ],
  "prefetch": [
    { "source": "document", "where": { "and": [ { "href_matches": "/blog/" } ] } }
  ],
  "eagerness": "moderate"
}
</script>

prefetch
リンク先HTMLだけを先読みし、レンダリングやサブリソース取得は行わない。帯域消費は抑えつつ、HTMLをキャッシュに貯めておくことができる。
prerender
バックグラウンドでページ全体を描画し、CSS・JS・画像も取得して実行まで完了させる。クリック時には描画済みDOMを即座にスワップできる。
eagerness: "moderate"
マウスホバー時の挙動を指定する。moderateを指定すると、マウスホバー後約200 msでルールを発火させ、誤操作による無駄なプリレンダーを防ぐ。

詳細を知りたい開発者はMDNのドキュメントを参照するとよいだろう。

Speculation Rulesによる描画待ち時間の短縮イメージ。

6行で実装できる最小サンプル

以下は、このSpeculation Rules APIを用いてあらゆるWebページの読み込みを高速化するサンプルコードだ。

<script type="speculationrules">
{
  "prerender": [{ "source": "document" }],
  "eagerness": "moderate"
}
</script>

この 6 行のコードは、Speculation Rules API を使ってブラウザに「リンク先ページを事前に描画しておけ」と宣言する最小構成だ。上記を<head>に挿入するだけで、現在表示中のHTMLを対象にプリレンダーが始動し、ナビゲーションが体感的に向上する。

<script type="speculationrules"> というタグが始点となり、インライン JSON でルールを記述している。

JSONによる設定ではまず "prerender" を指定し、配列の中に { "source": "document" } を置くことで 「現在表示している HTML ドキュメントに含まれるすべての <a> 要素」をプリレンダー対象に設定している。

次の "eagerness": "moderate" は発火タイミングを制御するキーで、リンクにマウスカーソルを 200 ms ほど重ねた時点でプリレンダーを開始せよ、という挙動を示す。

わずか 6 行ながら、ページ遷移の体感速度を劇的に高める仕組みである。

実装時の留意点

リソースコストに配慮する
prerender はCPU・メモリ使用量が高い。トラフィックの多いページやモバイル環境ではprefetchとの併用でバランスを取る。
プライバシーに配慮する
背景で実行されるサードパーティスクリプトの挙動を把握し、分析タグなどが二重計測しないよう対処が必要。
よりきめ細やかな指定を行う
eagernessパラメータを調整し、目線誘導やスクロールで偶発的に発火しないよう試験を重ねる。
対応ブラウザが限られていることに配慮する
現時点では、Speculation Rules APIに対応しているブラウザは、ChromiumをベースとしたChromeとEdgeが主であり、SafariやFirefoxは対応していない。非対応ブラウザに対しては、JavaScriptを用いたプリフェッチなど、フォールバックの仕組みを用意しておくと良い。

Speculation Rules APIは、従来のSPAフレームワークを使わず“素のHTML”だけで高速ナビゲーションを実現できる点が画期的だ。ブラウザが限定されているという制約はあるものの、フォールバック戦略を併用すれば他ブラウザでも十分な体感速度を得られる。6行のHTMLがサイトパフォーマンスのボトルネックを打破する――そのインパクトは大きい。

詳細はMake any website load faster with 6 lines of HTMLを参照していただきたい。