WordPress

キーリクエストのプリロードを改善・解決する方法|5分でできます

Google PageSpeed Insightsでサイトの表示速度を計測すると「改善できる項目」に「キーリクエストのプリロード」が出てきます。

タブを開くと以下のような文言が記載されています。

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

これをサクッと改善する方法をご紹介します。

作業時間目安は5分です。

キーリクエストのプリロードを改善する方法

URL項目に「fonts」と書かれています。fontsはフォントのことですね。

フォントを先に読み込む施策を行えば、改善できると示してくれています。

解決までのステップは2つ。

  1. 「キーリクエストのプリロード」のURLを調べる
  2. <head>内に「キーリクエストのプリロード」のURLが記載されたコードを貼り付ける

一つずつ解説します。

1:「キーリクエストのプリロード」のURLを調べる方法

キーリクエストのプリロードのタブを開くとURLの項目に「stsvg.ttf?poe1v2」と「fontawesome-webfont.woff2?v=4.7」の2つありました。

僕の場合は2つを改善しなければいけませんでした。

運営するブログによっては1つのこともあります。

表示されているURLの数だけ改善する必要があります。URLの調べ方は以下です。

右クリック⇒リンクのアドレスをコピー

表示されているURLにカーソルを合わせて、右クリックをします。

「リンクのアドレスをコピー」を選択します。

コピーした情報を後ほど使うため、メモ帳などに貼り付けておいてください。

2:<head>内に「キーリクエストのプリロード」のURLが記載されたコードを貼り付ける方法

<head>内に「キーリクエストのプリロード」のURLが記載されたコードを貼り付けていきます。

使用しているテンプレートによって貼り付け場所が変わります。

  • アフィンガーの場合:WordPress左メニューの「AFFINGER管理」
  • JINの場合:WordPress左メニューの「HTMLタグ設定」

テンプレートごとに以下のコードを貼り付けます。

貼り付けるコード

以下コード内の〇〇部分に先ほど「リンクのアドレスをコピー」でコピーした情報を貼り付けます。

<!– キーリクエストのプリロード –>
<link rel=”preload” as=”font” type=”font/woff” href=”○○” crossorigin>

例えば「href=”○○“」の「””」の間にURLを貼り付けたら以下のようになります。

<link rel=”preload” as=”font” type=”font/woff” href=”http://shotayamagiwa.com/wp-content/themes/affinger5/st_svg/fonts/stsvg.ttf?poe1v2” crossorigin>

コピーしたものを丸々貼り付けます。

アフィンガーを使用している場合は、改善URLが2つあったので、もう1つ用意します。

<link rel=”preload” as=”font” type=”font/woff” href=”http://shotayamagiwa.com/wp-content/themes/affinger5/css/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0” crossorigin>

2つのコードをそのまま貼り付けます。

アフィンガーの場合

WordPress管理画面の左メニューから「AFFINGER管理」>>>「その他」>>>「上級者向け」>>>「</>コードの出力」>>>「headに出力するコード」に貼り付ければOKです。

貼付け後に「保存」ボタンをクリックして完了です。

JINの場合

WordPress管理画面の左メニューから「HTMLタグ設定」>>>「head内」に貼り付ければOKです。

貼付け後に「変更を保存」ボタンをクリックして完了です。

「キーリクエストのプリロード」が改善されたかどうかを確認する方法

作業が完了したら、Google PageSpeed Insightsで再度計測してみてください。

計測後、画面を下にスクロールすると「合格した監査」という項目があります。

項目内に「キーリクエストのプリロード」があれば改善されたことになります。

お疲れさまでした!