WordPress・ブログ

PageSpeed Insightsの「キー リクエストのプリロード」とは？意味と改善方法を解説

  • 登録：
  • 更新：

PageSpeed Insightsで診断すると「キー リクエストのプリロード」という項目が表示されることがあります。この記事では、その意味と具体的な改善方法をわかりやすく解説します。

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

PageSpeed Insightsの「キー リクエストのプリロード」とは、ページ表示に必要なリソース（CSS・JavaScript・フォントなど）をあらかじめ優先的に読み込むよう指定することで、表示速度を改善する手法です。

現代のWebページは、HTMLだけでなくJavaScript・CSS・フォント・画像など、多数のファイルで構成されています。通常、これらは順番に読み込まれますが、「孫」にあたるファイルはその読み込みが後回しになりがちです。プリロードを指定することで、ブラウザが早い段階から必要なリソースを取得でき、表示完了までの時間を短縮できます。

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

ブラウザがページを表示するまでの順序

たとえば、次のような構成のページを考えます。

階層ファイル
親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に対してプリロードを手動で指定するのは難しいケースがあります。以下の方法が現実的です。

プラグインを使う

「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>' . "\n";
}
add_action( 'wp_head', 'add_preload_links', 1 );

フォントのプリロードには crossorigin 属性が必要な点に注意してください。

高速なサーバーに移行する

プリロードの設定と合わせて、サーバー自体の応答速度を改善することも重要です。表示速度に課題があるなら、レンタルサーバーの見直しも検討してみてください。

スポンサーリンク

改善効果を確認する方法

プリロードを設定した後は、ブラウザの開発者ツール（ChromeならF12キー→「ネットワーク」タブ）でリソースの読み込みタイムラインを確認できます。各リソースのリクエスト開始タイミングが早まっているかどうかを目視で確認してみましょう。

また、PageSpeed Insightsで再度診断を行い、スコアの変化を確認するのも効果測定の基本です。指摘項目が解消されているか、LCP（最大コンテンツの描画）やFID（初回入力遅延）などの指標が改善しているかをチェックしてみてください。

まとめ

「キー リクエストのプリロード」は、表示に必要なリソースをブラウザに先読みさせる仕組みです。HTMLに数行追記するだけで対応でき、表示速度の改善につながります。

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

PageSpeed Insightsの他の指摘項目についても、あわせて対処することでサイト全体の表示速度が底上げされます。

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