キーリクエストのプリロードをする
今回もPageSpeed Insightsの改善項目をやっていきましょう。
その前に、PageSpeed Insightsのおさらいを。
Page Speed Insightsとは、Googleが提供している無料のサイトチェックツールです。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
サイトをチェックした結果は、速度スコアとして点数で確認できます。
この速度というのは、サイトが表示されるスピードを表しています。
速度スコアが高いほど、サイト訪問者に快適なサイトを提供できているということになるので、是非とも高得点を狙いましょう。
今回の改善項目
キーリクエストのプリロード
キーリクエストのプリロードをすることで、2.7sの時間が短縮できるようです。
プリロード(preload)とは
pre=あらかじめ、load=読み込むの意味です。
プリロードすることでHTML、CSS、画像、フォントなどのファイルを読み込む順序を変えることができます。
今回の場合は「フォント」の項目をプリロードして欲しい、となっていたのでフォントをプリロードしていきます。
プリロードを実際にやってみる
ワードプレスの場合は<head></head>の中に記述していきます。
使うコードは<link rel="preload" as="font" type="font/woff" href="/wp-content/・・・・"crossorigin>です。
href="以降の・・・・の部分は、キーリクエストで診断されたファイルのURLをコピーします。
※下の画像のURLの部分です。画像では長くて全部は映っていません。
プリロードのコードをワードプレスの<head></head>の中に記述したら完了です。
結果を見てみましょう。
プリロードした結果、キーリクエストの改善項目は無くなりました。
他の改善項目がまだまだ多いのが気になりますが、次回以降徐々にやっていきます。
今回は以上です。ありがとうございました。
PageSpeed Insightsの「レンダリングを妨げるリソースの除外」の項目はこちらから
