しろくまフォルダ

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

ブログ運営
 
しろくま
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の自由記述エリア

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

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

対策してもページ表示速度が遅い場合

キー リクエストのプリロード改善後も表示速度が遅い場合、次の記事も参考にしてみて下さい。

実施できていない対策や盲点となっていたものが見つかって、解決に近づけるかもしれません。

画像・JS・CSS・HTMLのパフォーマンスを改善できるプラグイン
Autoptimizeで【画像・JS・CSS・HTML】を最適化設定してサイトを高速表示しよう

画像を自動で圧縮・軽量・最適化して、サイトを高速表示するプラグイン
 EWWW Image Optimizerのおすすめ設定とWebPの使い方

サイト表示速度が遅いのは、アドセンスが原因かも！？
 PageSpeed Insightsの低いモバイルスコア改善！Google Adsense遅延読み込みが鍵

さいごに

 
しろくま

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

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

スポンサーリンク

ブログ運営の最新記事