ページを開いた瞬間に次の画面が表示される。そんな体験を、JavaScriptのライブラリを足さずにブラウザの標準機能だけで実現する動きが広がっている。投機的読み込み(speculative loading)と呼ばれる仕組みで、Chromeを中心に実装が進み、WordPressにも標準機能として組み込まれた。表示速度は検索評価にも使い勝手にも直結する話なので、地方の制作現場でも知っておいて損はない。
ただ、この仕組みは入れれば速くなるという単純なものではない。先に読み込むという性質上、アクセス解析の数値が狂ったりサーバーの負荷が増えたりといった副作用がある。今回は投機的読み込みの考え方と、実務で使うときに気をつけたい点を整理してみる。
投機的読み込みとは何か
投機的読み込みは、利用者が次に開きそうなページを、実際にクリックする前にブラウザが裏側で先に取得しておく仕組みだ。土台になっているのがSpeculation Rules APIで、どのURLをどのタイミングで先読みするかをルールとして宣言できる。従来もlink要素によるprefetchのような先読み手段はあったが、Speculation Rules APIはより細かく、より積極的な制御ができる点が違う。
先読みの積極度はeagernessという段階で指定する。控えめな設定はリンクを押した瞬間に動き、中間の設定はリンクにカーソルを合わせたりタップしかけた段階で動く。さらに積極的な設定にすれば、リンクが画面に入った時点で先読みを始める。押してから読み込むのではなく、押しそうな気配を見て先に動くという発想だ。
この気配の読み方はスマートフォンでも工夫が進んでいる。最近のChromeでは、リンクが画面内に入ってから短い時間を置いて先読みを始める挙動が入り、指がまだリンクに触れていない段階でも準備を進められるようになった。マウスのホバーがないタッチ環境では、こうした画面内に入ったという合図が先読みのきっかけとして重みを持つ。
プリフェッチとプリレンダーの違い
投機的読み込みには大きく二つのモードがある。プリフェッチ(prefetch)は次のページのHTMLなど主要な資源を先に取得しておくだけで、ページの組み立ては利用者が実際に移動してから行う。取得済みのぶん移動が速くなるが、効果は限定的だ。
もう一つのプリレンダー(prerender)は、資源の取得だけでなくページの描画まで裏側で済ませてしまう。利用者が移動した瞬間には完成した画面を差し出すだけになるので、体感はほぼ一瞬になる。表示速度の指標で言えばLCPやINPが大きく改善し、ほぼ瞬時と呼べる速さが出る。
効果が大きいぶん、プリレンダーは踏み込んだ挙動になる。描画までするということは、そのページのJavaScriptが裏側で実際に走るということでもある。ここが後述する副作用の入り口になる。
WordPressに標準搭載された投機的読み込み
この仕組みは、WordPress 6.8でコアに取り込まれた。もともとは実験的なプラグインとして提供され、多くのサイトで検証を重ねたうえで安定版に昇格し、コア標準機能になったという経緯がある。特別なプラグインを入れなくても、きれいなパーマリンクを使っているサイトなら初期状態で先読みが働くようになっている。
ただしコアの初期設定は安全側に振ってある。ログインしていない訪問者に対して、控えめな積極度でプリフェッチだけを行う。描画まで踏み込むプリレンダーや、より積極的な設定は初期状態では有効にならない。より強い効果を求める場合は、公式のSpeculative Loadingプラグインを入れると、設定画面からモードや積極度を選べる。プラグイン側の初期値はプリレンダーの中間設定で、コアより一歩踏み込んだ構成になっている。
使いどころとして向いているのは、複数ページを続けて見てもらう性質のサイトだ。ブログや事例紹介、ドキュメント、商品一覧などは相性がよい。一方でカート内や決済の流れのように、先に走らせると困る処理を含むページはプリレンダーの対象から外すのが定石になっている。
先読みが引き起こす副作用
投機的読み込み、とくにプリレンダーで注意したいのがアクセス解析への影響だ。プリレンダーはページのJavaScriptを先に走らせるため、ページ表示を記録する計測タグが、利用者がまだ移動していない段階で発火してしまうことがある。結果として、実際には見られていない訪問がアクセス解析に記録される。
実際にWordPress 6.8の投機的読み込みで、GA4などに幻の訪問が計上される事例が報告されている。数字が水増しされれば、直帰率や滞在時間といった指標の読み方が狂い、サイト改善の判断を誤りかねない。対策として、主要な計測ツールの一部は、ページが実際に表示される瞬間まで計測を保留する仕組みを持っている。導入するなら、使っている計測ツールが先読みに対応しているかを確かめておきたい。
ブラウザ側でも副作用を抑える改良が進んでいる。最近のChromeには、プリレンダー中に最初の外部スクリプトの手前で処理をいったん止め、CSSや画像、フォントの先読みは進めつつ計測タグなどの実行だけを保留する挙動が加わった。裏側で読み込みは進めても、実際に表示されるまで余計な処理を走らせないという方向で、先読みと計測の食い違いを和らげる狙いがある。
もう一つはサーバーへの負荷だ。訪問者が実際に開くより多くのページを先に取得させるので、そのぶんアクセスが増える。多くの閲覧者を抱えるサイトや、動的にページを組み立てる構成では、キャッシュの整備なしに踏み込むと負荷が読みにくくなる。ログイン利用者にまで先読みを広げるかどうかは、サーバーが耐えられるかを見てから決めるのが安全だ。
対応ブラウザの現実
効果の大きい仕組みだが、すべてのブラウザで使えるわけではない点も押さえておきたい。Speculation Rules APIはChromeやEdge、OperaといったChromium系ブラウザで実装されている一方、SafariやFirefoxは現時点で対応していない。対応していないブラウザは、書かれた先読みのルールを単に無視するだけなので、表示が壊れるわけではない。
つまり投機的読み込みは、対応ブラウザの利用者だけが速さの恩恵を受け、それ以外の利用者はこれまで通りという上乗せ型の改善になる。壊れないという安心感がある半面、全員に効く施策ではないので、これ一本で表示速度を語るのは早い。土台となるページ自体の軽さや画像の最適化といった基本があってこそ効いてくる。
中小企業サイトでの取り入れ方
では現場でどう扱うか。まず、WordPressで運用していてきれいなパーマリンクを使っているなら、コアの控えめな先読みはすでに働いている可能性が高い。ここは特別な作業なしに得られている速さなので、まず現状を把握するところから始めるとよい。
そのうえでもう一段速くしたい場合は、プリレンダーへの引き上げを検討する。ただし前述のとおり、アクセス解析の数値と決済まわりの挙動は必ず先に確認する。小さく試して、計測の数字が乱れないか、サーバーの負荷が跳ねないかを見ながら広げるのが現実的だ。ChromeのDevToolsには先読みの挙動を確認する機能があるので、想定通りに動いているかを目で確かめられる。
投機的読み込みは、派手さはないが体感速度をはっきり押し上げる技術だ。ブラウザ標準の仕組みに寄せることで、重いライブラリを足さずに使い勝手を上げられる方向は、限られた予算でサイトを育てる中小の制作現場と相性がよい。副作用を理解したうえで、小さく取り入れていく価値はある。