PageSpeed Insights｜対策：キーリクエストのプリロード【Fonts】

おのです。

GoogleのPageSpeed Insightsで、キーリクエストのプリロードを対策する方法です。

PageSpeed Insightsでサイトスピードを計測すると、改善できる項目の中で以下が指摘されることが多いと思います。

「`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。」

そこで本記事では、PageSpeed Insightsで、キーリクエストのプリロードを対策する方法について書きました。

チャっと解決したい人は、参考にしてください。

PageSpeed Insights｜対策：キーリクエストのプリロード

ということで早速ですが、PageSpeed Insightsで提案される「キーリクエストのプリロード」の対策について、解説していきます。

まず今回は、分かりやすくまとめるために以下について書きます。

キーリクエストのプリロード

キーリクエストのプリロードとは
対策

こういった感じで解説していきます。

1. キーリクエストのプリロードとは

まず始めに、キーリクエストのプリロードとは何かについてです。

結論からすると、「改善できる項目」でキーリクエストのプリロードの部分に書いていることを、”プリロード”してください。という意味です。

プリロードの意味

プリロードの意味としては、英語で「preload」です。日本語に訳すと、「前処理する」などといった意味です。

つまり今回のケースの場合は、PageSpeed Insightsで提案される、キーリクエストのプリロードの中に書いてあることを、事前に読み込んでください。という改善策を提案してくれているわけです。

↓表示されるメッセージも、このように書かれています。

`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

1-1. fontsのケース

キーリクエストのプリロードの部分では、フォントに関することが書いてあることが多いです。

↓こんな感じ。

このように、書いてあるURLでフォントだと判断できます。

2. 対策

上記により、今回のケースだとfontsが影響していると分かりました。

なので、対策としてキーリクエストのプリロード部分に書いてあるURLを、事前に説明したとおりプリロードしていきます。

↓キーリクエストのプリロードの部分に書いてあるURLを、右クリックからコピーします。

↓以下のコードの「〇〇〇」に、コピーしたURLを貼り付けます。

 Preload key requests
<!-- キーリクエストのプリロード対策 1 -->
<link rel="preload" as="font" type="font/woff" href="〇〇〇" crossorigin>
 
<!-- キーリクエストのプリロード対策 2 -->
<link rel="preload" as="font" type="font/woff" href="〇〇〇" crossorigin>

※最初から書いてある○○○は削除します。

キーリクエストのプリロードに書いてあるfontsのURLが一行の場合は、1だけ使います。

二つURLが書いてある場合は、1と2をそれぞれ書き込みます。

↓形的にはこんな感じです。

上記を完了したら、それを丸々コピーしてサイト内に書き込みます。

メモ

ちなみに、Woffと書かれている箇所はfontの場合以下のパターンがあります。

woff
woff2
ttf

↓こんな感じでだいたい書いてあります。

とりあえず今回は一旦、私の書いているコードで対策してみてください。

それでも改善されない場合に限り、フォントのタイプが違う可能性がありますので、woffの部分をwoff2などにして変えてみてください。

参考

2-1. サイト内に書き込む

上記で作成したコードを、サイト内に書き込みます。
サイト内で書き込む場所は、<head>タグの中です。

↓だいたいどのWordPressテーマも、このように「headに出力するコード」「<head>内に書く」などと書いてある欄がありますので、そこに貼り付けます。

ちなみに、私の使っているWordPressテーマで、AFFINGER5だと上記の写真の感じです

先に書いてある他の供述がある場合は、スペースを空けてその下に書いておけばオッケーです。

忘れずに保存をしましょう。

再チェック

サイト内に書き込みが完了したら、PageSpeed Insightsで再チェックをします。

↓しっかりと対策したのがプリロードされていれば、「改善できる項目」の中からキーリクエストのプリロードが消えます。

↓「合格した監査」を見ると、キーリクエストのプリロードがパスしているのが確認できます。

これでfontsの場合に、キーリクエストのプリロードを対策するのはバッチリです。

スピードのスコアも、対策前よりは早くなっていると思います。

あわせて読みたい

そんな感じで、GoogleのPageSpeed Insightsで、キーリクエストのプリロードを対策する方法でした。

これでバッチリです。

では。