PageSpeed Insightsで計測すると毎回表示される「キーリクエストのプリロード」が気になったので改善してみました
キーリクエストのプリロードが出たときの改善方法
プリロードとはファイルが実行される順番のことで、画面が開くまでに下のような順番でダウンロードされていきます
このような順番でダウンロードされていく
画面が開くまでの読み込みが遅いと、PageSpeed Insightsで「キーリクエストのプリロード」と出てしまうわけです
で、今回指摘されたリンクを先にダウンロードしなさいということなので改善してみました
プリロードのコードを作る
このテンプレートに当てはめていきます
<link rel=”preload” href=”プリロードするリンク” as=”種類” type=”分類/種類(拡張子)”crossorigin>
プリロードしたいURLの上で右クリックして「リンクのアドレスをコピー」します
as=”種類” ⇒ “font”を入れる
type=”分類/種類(拡張子)” ⇒ “font/ttf”を入れる
これを先ほどのコピーしたリンクに当てはめると
<link rel=”preload” href=”https://コピーしたリンク” as=”font” type=”font/ttf” crossorigin>
となります
コードを貼り付ける場所
今回はテーマJINに貼り付ける方法です
ダッシュボード画面から「HTMLタグ設定」に貼り付けます
PageSpeed Insightsで確認してみる
緑色の丸、合格した監査内に入っていることがわかると思います
まとめ
プリロードをしたことによって、ページ速度は1、2ぐらい上がったという感じでした
数値は毎回変動するのであれですが、劇的に変わったという感じではなかったです
でも気になっていたところが合格と出たのでとりあえずはよかったのかも
ではまた