キーリクエストのプリロード問題、解決法

プリロードHP作成

Googleの「Page Speed Insight」

ご利用の方多いのではないでしょうか?

こちらで「キーリクエストのプリロード」という聞いたこともない用語が出てきてて、

これをすることで早くなりますよ?という指示が出ていました。

スポンサーリンク

解決するためのコード

僕の場合は「 https://shiroinublog.com/wp-content/themes/cocoon-master/webfonts/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0 」のコードをなんとかするとええで?

という指示でした。

こちら「フォント」に対しての指示だったので

<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>

上記ですね。

こちらをテーマの<head>ここ!</head>

に書き込んであげてください。

それだけで解決です。

キーリクエストのプリロードとは?

そもそもこれですよね。

どういう意味か?

まず説明しないといけないのが、

読み込みの順番です。

読み込みの順番

link先のcssに用があったとします。

そうなるとこちらは

「html→親のjp→子のcss」

という順番で読み込まれます。

つまり「子のcss」の順番が最後で読み込まれるまで時間がかかるわけですね。

プリロードの役割

こちらを入力することで

<link rel="preload" as="font" type="font/woff2" href="font.woff2" crossorigin>

「html」の段階で「子のcss」を用意しにいきます。

それで早くなる仕組みです。

実際の効果は?

プリロード前

数日前の僕のスピードは以下の通り

「モバイル」「26」

「パソコン」「77」

これ

画像圧縮してこんなもんでした。

画像を次世代フォーマット「webp」に変換してもまだ尚こんなもんでした。

「激遅」です。

プリロード後

どちらも大幅な改善がみられました。

実は2日間に渡り、スピードの改善を行ってきたのですが、

正直雀の涙。

1〜5程度変動しては元に戻り

これを幾多の作業で繰り返してきました。

ここまではっきり効果が出たことはなかったです。

まとめ

ページのスピードはSEOや離脱率に大きく関わってきます。

読み込み遅いページは余程魅力あるページでない限り、見たくないですよね?💦

もし「Page Speed Insight」を使用して

「キーリクエストのプリロード」に関する問題がある場合は

是非お試しあれ☺️

参考サイトはこちら↓

PageSpeed Insights リニューアル後のスピード改善(静的HTMLサイト編)|未来的エンジニアリング
2018年11月にGoogleのPageSpeed Insights(PSI)が大幅リニューアルされた。LightHouseという今までChrome拡張などのオプションでしかなかったツールが標準導入され、チェック項目や採...

今度はリソースサイズが大きい問題をなんとかします😂

コメント

タイトルとURLをコピーしました