Google PageSpeed Insightsでサイトの表示速度を計測すると「改善できる項目」に「キーリクエストのプリロード」が出てきます。
タブを開くと以下のような文言が記載されています。
<link rel=preload>を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。
これをサクッと改善する方法をご紹介します。
作業時間目安は5分です。
キーリクエストのプリロードを改善する方法
URL項目に「fonts」と書かれています。fontsはフォントのことですね。
フォントを先に読み込む施策を行えば、改善できると示してくれています。
解決までのステップは2つ。
- 「キーリクエストのプリロード」のURLを調べる
- <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で再度計測してみてください。
計測後、画面を下にスクロールすると「合格した監査」という項目があります。
項目内に「キーリクエストのプリロード」があれば改善されたことになります。
お疲れさまでした！
コメント
コメント一覧 （1件）
[…] 詳しくは「キーリクエストのプリロードを改善・解決する方法」で図解入りで解説しています。 […]