- PageSpeed Insightsで発生するキーリクエストのプリロードの改善方法
- 解決事例も紹介
今回はPageSpeed Insightsの改善項目でキーリクエストのプリロードが表示された場合の対処法を説明します。
PageSpeed Insightsで調べる
まずはPageSpeed Insightsで自分のサイトの表示速度を計測してみてください。
▼
PageSpeed Insightsは採点をしてくれるだけではなく、下のような読み込み速度を改善する項目も教えてもらえるので一つ一つ対処することで100点に近づけることができます。
マークの見方はとても簡単で下のように理解してください。
| ▲ | 優先的に改善すべき項目 |
| ■ | ▲が無くなった次に改善すべき項目 |
| ● | 合格した項目 |
今回は優先的に改善すべき項目となっているキーリクエストのプリロードを対処していきたいと思います。
改善策の項目の詳細を確認
表示された改善項目をクリックすると詳しい内容を表示させることができます。
今回の表示内容は下のとおりです。
`<link rel=preload>` を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。
サイト上で読み込む画像やフォントを優先的に取得すれば表示が早くなることを意味しており、表示されるURLや減らせるデータ量は、使用しているWordPressのテーマによって異なります。
改善すべき詳細が分かったところで実際に対策をしていきましょう。
キーリクエストのプリロード対策
- プリロードするコードを作成
- 作成したコードをheader.phpに追記
プリロードするコードの作成
header.phpに追記するコードは下のとおりです。
<!– 編集部分 –>
<link rel=”preload” as=”①” type=”①/②” href=”③” crossorigin>
記入するコードは改善項目に表示された内容により異なるため各自で入力すべき場所を①～③としています。
| 入力内容 | |
|---|---|
| ① | 属性を設定します。画像なら「image」、文字なら「font」となります。 |
| ② | ①の拡張子を記入します。fontの場合「woff」や「woff2」、「ttf」が多いです。 |
| ③ | 改善できる項目で表示されるURLを入力 |
コードの参考例
<!– 編集部分 –>
<link rel=”preload” as=”font” type=”font/woff” href=”URL” crossorigin>
<!– 編集部分 –>
<link rel=”preload” as=”font” type=”font/woff2” href=”URL” crossorigin>
<!– 編集部分 –>
<link rel=”preload” as=”font” type=”font/ttf” href=”URL” crossorigin>
わたしが使用しているWordPressテーマ「THE THOR」では3番目のttfを利用して改善しました。
作成したコードをheader.phpに追記
コードを追記する場所はテーマエディター（header.php）の<head></head>内になります。子テーマではなく親テーマに入力するので間違わないようにしましょう。
WordPressテーマ「THE THOR」の場合
THE THOR（ザ・トール）の場合、カスタマイズ画面で<head></head>内に追記ができます。
直接親テーマをいじってしまうとテーマのアップデート時に再度追記する必要がありますが、THE THORのカスタマイズ画面で設定した内容は親テーマが更新されても何もしなくてよいので便利です。
キーリクエストのプリロードを改善：まとめ
コードの追記が完了したら再度PageSpeed Insightsで分析を行いましょう。
下のように合格した監査に入っていれば対策成功です。
最後に対策方法をもう一度まとめておきます。
- PageSpeed Insightsで分析
- キーリクエストのプリロードで指摘されたURLを確認
- 対策用コードを作成
- 作成したコードを<head></head>内に追記
