page speed insightsのエラー「LCP要素で使用する画像のプリロード」がやっとのことでクリアできたので、同じ状況で困っている方のヒントになれば幸いです。
yumineko今回解決できたエラーの状況
- page speed insightsで「LCP要素で使用する画像のプリロード」をするようにエラーメッセージが出ている。
- アイキャッチ画像が上記エラーの対象となっている。
- レンタルサーバーはxサーバーを使用（今回おそらく関係はない）
- ワードプレス使用
- 使用テーマは「JIN」
※今回ご紹介する方法で当サイトは解決しましたが、実践する場合は自己責任にてお願いいたします。
また、かならずバックアップをとってからの作業をオススメします。
エラーメッセージ
「LCP要素で使用する画像のプリロード」とは
このページにたどり着いていただいたと言うことは、「page speed insights」のスコアや各エラーについてはもう説明するまでもないと思いますので、早速本題に入ります。
今回ずっと悩まされたエラーが「LCP要素で使用する画像のプリロード」というもの。
画像の赤枠で囲っている部分です。
エラーメッセージの詳細をクリックすると、アイキャッチで使用している画像が対象とのこと。（赤枠内に表示されている画像）
画像は解像度も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のエラーメッセージから入手できます。
エラーメッセージの、画像の横に表示されている URLの部分を右クリックして「リンクのアドレスをコピー」します。
そして、さきほどのプリロードのためのコードの「img.png」の「img」の部分に上書きになるようにペーストします。
最後に、更新して終了です。
これで、もういちどpage speed insightsにかけてみると、該当エラーメッセージが消えているはずです。
「LCP要素で使用する画像のプリロード」
解決方法まとめ
- page speed insightsのエラーメッセージにリンクされている詳細ページで、画像をプリロードするコードをコピーする
- ワードプレス 管理画面の機能を使って、HTMLのhead内にコピーしたコードを貼り付ける
- page speed insightsのエラーメッセージに表示されている、画像の URLをコピーする
- コピーしたURLを、プリロードのコードの「img」の部分の代わりに貼り付ける
コメント