お役立ち情報

【page speed insightsスコアアップ】LCP要素で使用する画像のプリロードをする方法【解決済み】

パソコンを操作する男性のイラスト

page speed insightsのエラー「LCP要素で使用する画像のプリロード」がやっとのことでクリアできたので、同じ状況で困っている方のヒントになれば幸いです。

yumineko
yumineko
 今回の対処法で、スコアは63点から75点にアップ、LCPスピードも6.5秒から4.1秒まで改善しました!

今回解決できたエラーの状況

  • page speed insightsで「LCP要素で使用する画像のプリロード」をするようにエラーメッセージが出ている。
  • アイキャッチ画像が上記エラーの対象となっている。
  • レンタルサーバーはxサーバーを使用(今回おそらく関係はない)
  • ワードプレス使用
  • 使用テーマは「JIN」

※今回ご紹介する方法で当サイトは解決しましたが、実践する場合は自己責任にてお願いいたします。
また、かならずバックアップをとってからの作業をオススメします。

エラーメッセージ
「LCP要素で使用する画像のプリロード」とは

このページにたどり着いていただいたと言うことは、「page speed insights」のスコアや各エラーについてはもう説明するまでもないと思いますので、早速本題に入ります。

今回ずっと悩まされたエラーが「LCP要素で使用する画像のプリロード」というもの。

画像の赤枠で囲っている部分です。

page speed insightsのエラーメッセージの画像
エラーメッセージの詳細をクリックすると、アイキャッチで使用している画像が対象とのこと。(赤枠内に表示されている画像)

画像は解像度も72dpiにしていたし、サイズも699×466px(サイトの幅に収まるサイズなのを確認済み)。

もちろん「TinyPNG」で限界まで圧縮もしています。

それでも、LCPの時間を改善するために「この画像をプリロードしろ」との指摘を受けてしまいました。

プリロードとは、「事前読み込み」ということですね。

というわけで、どうにかせねばと色々なサイトページを読み漁るものの、
「キーリクエストのプリロード」の方法だったり、
JavaScriptを使う方法だったり、HTMLとCSSをいじる方法だったり・・
全て試してみたものの、どうしてもエラーメッセージが消えてくれず、途方にくれていました。

「LCP要素で使用する画像のプリロード」
エラーが解決した方法

結局、どうやって解決したかというと、
なんてことない、page speed insightsのエラーメッセージにリンクされている「詳細」のページに書いてありました。

リソースのプリロードのコードの画像

今回は画像をプリロードするので、赤線を引いたコードが必要になります。
コチラをコピーするか、何か用紙などに書き留めておきます。

このコードを貼り付ける場所は、HTMLのHead内。

私はJINテーマを使っているため、ワードプレス の管理画面に「HTMLタグ」をカスタマイズする機能がありました。(下の画像の

ワードプレス のカスタマイズの様子の画像

「head内」の空いているところに先ほどコピーしておいた(または書き留めていた)コードを貼り付けます。(②の部分。これより前にはアドセンスやアナリティクスなどの他のタグを入力していますが、セキュリティ上、画像では消してあります)

この時、先ほどコピーしたコードの「img.png」の「img」の部分には、プリロードしたい画像の URLを入力しなければいけません。

この「画像のURL」は、page speed insightsのエラーメッセージから入手できます。

page speed insightsのエラーメッセージの加増

エラーメッセージの、画像の横に表示されている URLの部分を右クリックして「リンクのアドレスをコピー」します。

そして、さきほどのプリロードのためのコードの「img.png」の「img」の部分に上書きになるようにペーストします。

最後に、更新して終了です。

これで、もういちどpage speed insightsにかけてみると、該当エラーメッセージが消えているはずです。

「LCP要素で使用する画像のプリロード」
解決方法まとめ

まとめ
  • page speed insightsのエラーメッセージにリンクされている詳細ページで、画像をプリロードするコードをコピーする
  • ワードプレス 管理画面の機能を使って、HTMLのhead内にコピーしたコードを貼り付ける
  • page speed insightsのエラーメッセージに表示されている、画像の URLをコピーする
  • コピーしたURLを、プリロードのコードの「img」の部分の代わりに貼り付ける

 

 

 

ABOUT ME
yumineko
2児の母。2019年の長女の高校受験時、訳あって塾には行かずに自宅学習のみで挑戦することになり、教科書をイチから一緒に読み直しながら勉強を見た結果、偏差値20上昇。 志望校にトップ10位内で合格を果たす。 勉強をみるにあたって感じたのは、教科書の説明には子供には分かりづらい部分が多く、子供にイメージしやすく噛み砕いて説明するのがとても有効だということ。 同じように教科書の内容が分かりづらいと感じている子供たちの ヒントになれば、との思いで「教科書を分かりやすく通訳するサイト」創設。

COMMENT

メールアドレスが公開されることはありません。