サイト表示速度

「キー リクエストのプリロード」とは？仕組みと改善方法をわかりやすく解説【PageSpeed Insights】

  • 登録：
  • 更新：

PageSpeed Insightsの診断結果に「キー リクエストのプリロード」が表示されたとき、その意味が分からずに戸惑う方は多いはずです。これは「特定のファイルを先に取得するよう指示できますよ」というヒントで、対処方法はシンプルです。この記事では仕組みと改善手順を順を追って解説します。

「キー リクエストのプリロード」とは？

「キー リクエストのプリロード」とは、ページ表示に欠かせないCSS・JavaScript・フォントなどのリソースを、ブラウザに対して優先的に先読みさせる指示を追加することで表示速度を改善する手法です。

現代のWebページは多数のファイルで構成されており、通常はそれぞれが依存関係に沿って順番に読み込まれます。依存関係の末端にあるファイル（いわば「孫」にあたるリソース）は読み込みが後回しになりやすく、表示完了が遅れる原因になります。プリロードを設定すると、ブラウザがページ読み込みの早い段階からそのファイルを取得し始めるため、全体の表示完了を早めることができます。

仕組みをわかりやすく解説

ブラウザがリソースを読み込む順番

次のようなファイル構成のページを例に考えてみます。

階層ファイル
親index.html
子main.js（index.htmlから読み込まれる）
孫child.js・child.css（main.jsから読み込まれる）

プリロードなしの場合、ブラウザは「親→子→孫」の順にリクエストします。child.jsやchild.cssはmain.jsの処理が完了して初めてリクエストされるため、その待ち時間がそのまま表示の遅延につながります。

PageSpeed Insightsが測定する「表示完了時間」には、こうした孫リソースの処理時間も含まれます。孫リソースを早めに取得させることが改善のポイントです。

プリロードで読み込みを並列化する

HTMLの<head>内に<link rel="preload">を追記することで、ブラウザに先読みを指示できます。これにより、子リソースの読み込み完了を待たずに孫リソースのリクエストが並列で走るようになります。

<link rel="preload" href="child.css" as="style">
<link rel="preload" href="child.js" as="script">

上記をindex.htmlに追加すると、main.js（子）と同じタイミングでchild.css・child.js（孫）のリクエストが発生し、処理が並列化されて表示完了が早まります。

as属性にはリソースの種類に合わせた値を指定する必要があります。

リソースの種類as属性の値
CSSファイルstyle
JavaScriptファイルscript
フォントfont
画像image

WordPressでの対応方法

WordPressではテーマやプラグインが自動的にCSS・JSを出力するため、手動でpreloadを設定するのが難しいケースもあります。現実的な対応方法を2つ紹介します。

最適化プラグインを活用する

「WP Rocket」「LiteSpeed Cache」「W3 Total Cache」といった高速化・キャッシュ系プラグインには、プリロード設定が含まれているものがあります。設定画面から該当項目を有効にするだけで対応できるため、コードを書かずに導入できる点が利点です。

functions.phpにコードを追記する

特定のファイルだけプリロードしたい場合は、子テーマのfunctions.phpに次のようなコードを追加する方法もあります。

function add_preload_links() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/fonts/example.woff2" as="font" type="font/woff2" crossorigin>' . "
";
}
add_action( 'wp_head', 'add_preload_links', 1 );

フォントのプリロード指定ではcrossorigin属性が必要です。この属性が抜けていると、ブラウザが同じフォントを二重にリクエストしてしまう場合があるため注意してください。

改善効果を確認する方法

プリロードを設定した後は、ChromeのデベロッパーツールでF12を押し「ネットワーク」タブを開いて、各リソースの読み込みタイムラインを確認しましょう。対象ファイルのリクエスト開始が早まっていれば、設定が機能しています。

また、PageSpeed Insightsで再診断を行い、指摘項目が消えているかどうか、LCP（最大コンテンツの描画）などのコアウェブバイタル指標が改善しているかを確認することも忘れずに行いましょう。キャッシュが残っているとスコアに反映されないことがあるため、キャッシュをクリアしてから測定すると正確です。

スポンサーリンク

まとめ

「キー リクエストのプリロード」は、後から読み込まれるリソースをブラウザに事前取得させることで、ページ表示を高速化する手法です。対応のポイントを整理すると次の通りです。

  • プリロードは<link rel="preload" href="..." as="...">で設定する
  • WordPressではプラグインまたはfunctions.phpで対応できる
  • 設定後は開発者ツールとPageSpeed Insightsで効果を確認する

この項目への対処と合わせて、PageSpeed Insightsの他の指摘項目にも取り組むことで、サイト全体の表示速度を継続的に改善できます。

このテーマの関連記事はこちら