キー リクエストのプリロードとは?改善方法とコード記述内容を紹介

 
しろくま
PageSpeed Insightsで「キー リクエストのプリロード」が改善項目に上がってきたので、改善方法とコード記述内容をご紹介します。
スポンサーリンク

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

改善できる項目に表示された「▲キー リクエストのプリロード」
 
くろくま
キー リクエストのプリロード」って、どういう意味なの?
 
しろくま
キー(=特定のファイル)、リクエスト(=要求)、プリロード(=先に読み込む)という意味になります。
つまり、表示速度を改善する為に「特定のファイルを先読みしましょう」という事ですね。

「キー リクエストのプリロード」の改善方法

キー リクエストのプリロード」を選択すると、改善すべき内容が表示されます。

改善すべき「キー リクエストのプリロード」の内容
 
くろくま
<link rel=preload>を使用して…、って書いてあるね。
 
しろくま
<link rel=preload>のコード記述方法をご紹介しますね。

<link rel=preload>のコード記述方法について

 
しろくま
<link rel=preload>は、次のように記述して使います。
<link rel="preload" href="リンクのアドレス" as="XXX" crossorigin>

「href=”リンクのアドレス“」は、対象のURLを右クリックして、「リンクのアドレスをコピー」を選択して貼り付けます。

「キー リクエストのプリロード」のリンクのアドレスをコピーする

「as=”XXX”」の値は、コンテンツの種類によって使い分ける必要があります。

  • CSSの場合
    • <link rel=”preload” href=”XXX.css” as=”style” crossorigin>
  • JavaScriptの場合
    • <link rel=”preload” href=”XXX.js” as=”script” crossorigin>
  • フォントの場合
    • <link rel=”preload” href=”XXX.ttf” as=”font” crossorigin>
 
しろくま
asの値は他にも「audio」「document」などあります。
コンテンツの内容に応じて、「as=”XXX“」の値を変更しましょう。

<link rel=preload>のコード記述先について

<link rel=preload>の記述先は、<head></head>の間です。

WordPressのテーマに、<head></head>の自由記述エリアが設けられている場合は、そちらに記述しましょう。

【THE THOR(ザ・トール)】をお使いの方は、WordPressの管理画面から「外観」→「カスタマイズ」→「基本設定(THE)」→「高度な設定」と進んで、「◼️</head>直上の自由入力エリア」に入力します。

【THE THOR(ザ・トール)】の<head></head>の自由記述エリア

設定後、PageSpeed Insightsで再度計測して「合格した監査」の欄に、【 キー リクエストのプリロード】があれば、問題解決となります。

合格した監査に表示された「キー リクエストのプリロード」

さいごに

 
しろくま

キー リクエストのプリロード」の意味に始まり、実際に改善できたコード記述方法をご紹介いたしました。

ページの表示速度に関わる項目なので、早めの改善をお勧めします。

スポンサーリンク