ページの表示を速くする手段のひとつに、リンク先を先に読み込んでおく先読み(prerender)がある。ChromeではSpeculation Rules(投機ルール)という仕組みが用意されていて、JSONを数行書くだけで、どのページを先読みするかをブラウザに伝えられる。先読みといっても中身は実際にページを読み込んで表示の準備まで済ませておく処理で、遷移した瞬間に画面が出るのが特徴になる。ただしこれまでは、フォームの送信による画面遷移には効かなかった。7月に安定版へ上がったChrome 151で、その穴が埋まっている。
新しく使えるようになったのは、prerenderのルールに書けるform_submissionというフィールド。サイト内検索のように、送信すると /search?q=… といったGETリクエストの遷移になるフォームを対象に、遷移先をあらかじめ用意しておける。これまでもURLを指定した先読み自体は書けたのだが、実際の遷移がフォーム送信だと用意した先読みを使えず、結局その場で読み込み直しになっていた。ブラウザ側から見れば、使われないページの準備に通信量とCPUを費やしていたことになる。今回の指定は、フォーム送信という遷移の種類そのものを先読み側に伝えるもので、ボタンを押した瞬間に用意済みのページへ切り替えられる。Chromeは146でオリジントライアルとして試したうえで、151からデスクトップとAndroidで正式に有効化した。WebViewは対象外のままとなっている。
サイト内検索を抱えるサイトでの使いどころ
商品検索や記事検索を備えたサイトは、規模を問わず多い。検索結果ページは一覧の組み立てやデータベースへの問い合わせが挟まるぶん、トップページより重くなりやすい。そこを先読みで前倒しできれば、押してから表示までの体感は変わってくる。もっとも、先読みしたのに遷移しなかった分はそのまま無駄になるので、あれもこれもと広げる性質のものではない。先読みは通信環境や省データ設定によってブラウザ側の判断で見送られることもあり、必ず効くものとして設計するより、効いたら速いという上乗せとして扱うほうが無難だと思う。対象を選ぶときは、アクセス解析でよく使われている検索欄はどれかを先に見ておくと判断しやすい。
気をつけたいのはサーバー側の負荷とアクセス解析の扱い。WordPressのサイト内検索は結果がURLごとに散らばるためキャッシュが効きにくく、先読みの指定を広げるとリクエストだけが増えることもある。計測についても、先読みされた時点と実際に表示された時点をどう数えるかはツールによって差がある。また、今回想定されているのは検索フォームのようなGETでの遷移で、POSTで送る問い合わせフォームの類は同じようにはいかない。ChromeのDevToolsには投機ルールの動作を確認する画面があるので、まずはそこで先読みが成立しているかを見ながら、よく使われる検索フォームひとつに絞って試すあたりが現実的なところだろう。
