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」を使用して
「キーリクエストのプリロード」に関する問題がある場合は
是非お試しあれ☺️
参考サイトはこちら↓
今度はリソースサイズが大きい問題をなんとかします😂
コメント