PageSpeed Insightsがキー リクエストを改善しろと・・・。
1月末からブログの表示スピードに悩まされているミッツです。PageSpeed Insightsでサイトスピードのスコアが過去記事で20点➡66点にまで上昇しました。
しかし、新たな問題が・・。
キー リクエストのプリロード ？？？
説明を読んでも、ググっても何が何だかよく分かりません。
非常に心苦しかったのですが、Cocoon作者のわいひらさんに質問してみることに。
優しいですよね～。忙しいはずなのに・・。本当にありがとうございます。紹介されたページを見てみます。
なになに・・。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
<link>要素のrel属性でpreloadを指定すると、 HTML の<head>要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。
なにがなんだかわからないよ・・。
くっそー。聞いたことのない言葉のバーゲンセール。まぁしかし、落ち着いてゆっくり読み解いていくと、なんとなくわかりました。
要するに キー リクエストのプリロード をすることで
ということみたいですね。私の場合、オレンジ線のURL部分のデータを先に読み込みなさい！ってことのようですね。
キー リクエストのプリロードの改善設定
そういえば、わいひらさんがヒントをくれていました。ヘッダーをいじれと。
①まずワードプレスの場合、【外観】➡【テーマエディター】を選択。
②私は【Cocoonスキン】を利用しているので、選択。Cocoon_childにはヘッダーの設定部分はないので間違えないように。
③【テーマヘッダー（header.php）】を選択しましょう。
④PageSpeed Insightsへ戻り、問題のあるURLを右クリック➡リンクのアドレスをコピー
⑤header.phpに追記
どこに追記していいかよくわかりませんでしたが、真ん中あたりに追記。
ソースコードはこんな感じ。私はwebフォントの設定なのでこんな感じですが、人によってここは違うかも。
<!-- 編集部分 -->
<link rel="preload" as="font" type="font/woff" href="（問題のあったURLを貼り付けます。 https://syopur・・・）" crossorigin>
以上で設定は完了です。保存して、再度 PageSpeed Insightsで確認してみると・・・。
キーリクエストのプリロードが合格に！
スコアが劇的に変化したわけではありませんが、また一つ課題が解決できました。90点への道は長いなぁ・・。
コメント
初めまして。
記事拝見しました。
私も同じく、「キー リクエストのプリロード」を改善したいのですが、URLをどこに貼り付ければよいのか分かりません。
コクーン チャイルドを使用しているのですが、URLをどこに貼り付ければ良いのでしょうか？
もし、お分かりでしたらご教示いただければと存ます。
初心者なので、調べていますが全く分かりません・・・
Cocoon Child（子テーマ）を利用している人も、Cocoon（親テーマ）を編集すると反映されます。
ですので、この記事と同じように③の工程で「Cocoon」を選択し、「header.php」を編集してみてください。