キー リクエストのプリロード改善!ブログ初心者が分かりやすく設定方法を解説

SEO対策

PageSpeed Insightsがキー リクエストを改善しろと・・・。

 

1月末からブログの表示スピードに悩まされているミッツです。PageSpeed Insightsでサイトスピードのスコアが過去記事で20点➡66点にまで上昇しました。

 

しかし、新たな問題が・・。

  

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

 

PageSpeed Insightsがキー リクエストを改善

 

説明を読んでも、ググっても何が何だかよく分かりません。

 

非常に心苦しかったのですが、Cocoon作者のわいひらさんに質問してみることに。

 

PageSpeed Insights キーリクエストのプリロードの改善について
いつも運営ありがとうございます。cocoonテーマを使わせていただいています。質問を1件お願いいたします。 PageSpeed Insightsで速度の計測をしたのですが、真っ新な記事ページだと99点が取れたのですが、下記の計測記事のスコアが66点でした。 そしおて「キーリクエストのプリロー...

 

優しいですよね~。忙しいはずなのに・・。本当にありがとうございます。紹介されたページを見てみます。

 

なになに・・。

 

<link> 要素の rel 属性で preload を指定すると、 HTML の <head> 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。

https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

  

ミッツ
ミッツ

なにがなんだかわからないよ・・。

 

くっそー。聞いたことのない言葉のバーゲンセール。まぁしかし、落ち着いてゆっくり読み解いていくと、なんとなくわかりました。 

 

要するに キー リクエストのプリロード をすることで

 

ブログを表示する時に、あるデータを先に読み込むことでスムーズに表示ができるよ!

 

ということみたいですね。私の場合、オレンジ線のURL部分のデータを先に読み込みなさい!ってことのようですね。

 

PageSpeed Insightsがキー リクエストを改善

 

キー リクエストのプリロードの改善設定

 

そういえば、わいひらさんがヒントをくれていました。ヘッダーをいじれと。

 

①まずワードプレスの場合、【外観】➡【テーマエディター】を選択。

 

キー リクエストのプリロードの改善設定

 

②私は【Cocoonスキン】を利用しているので、選択。Cocoon_childにはヘッダーの設定部分はないので間違えないように。

 

③【テーマヘッダー(header.php)】を選択しましょう。

 

キー リクエストのプリロードの改善設定

 

④PageSpeed Insightsへ戻り、問題のあるURLを右クリック➡リンクのアドレスをコピー

キー リクエストのプリロードの改善設定

⑤header.phpに追記

 

どこに追記していいかよくわかりませんでしたが、真ん中あたりに追記。

⑤header.phpに追記

 

ソースコードはこんな感じ。私はwebフォントの設定なのでこんな感じですが、人によってここは違うかも。

<!-- 編集部分 -->
<link rel="preload" as="font" type="font/woff" href="(問題のあったURLを貼り付けます。 https://syopur・・・)" crossorigin>

 

以上で設定は完了です。保存して、再度 PageSpeed Insightsで確認してみると・・・。

 

キーリクエストのプリロードが合格に!

 

スコアが劇的に変化したわけではありませんが、また一つ課題が解決できました。90点への道は長いなぁ・・。

 

過去の表示スピード改善に関する記事はこちら
 

 

コメント

  1. 雄太 より:

    初めまして。
    記事拝見しました。

    私も同じく、「キー リクエストのプリロード」を改善したいのですが、URLをどこに貼り付ければよいのか分かりません。

    コクーン チャイルドを使用しているのですが、URLをどこに貼り付ければ良いのでしょうか?
    もし、お分かりでしたらご教示いただければと存ます。
    初心者なので、調べていますが全く分かりません・・・

  2. ミッツ より:

    Cocoon Child(子テーマ)を利用している人も、Cocoon(親テーマ)を編集すると反映されます。

    ですので、この記事と同じように③の工程で「Cocoon」を選択し、「header.php」を編集してみてください。

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