2023.04.05 Web制作

【PageSpeed Insights】LCPのエラーでパフォーマンスが「？」になる

 

あるサイトでPageSpeedを測ったところ、Largest Contentful Paintの項目が「Largest Contentful Paint（LCP）に該当するコンテンツがページに表示されていません。ページに有効なLCP要素があることを確認してから、もう一度お試しください（NO_LCP）。」というエラーになり、パフォーマンスが「？」になってしまいました。

何度分析しても結果は同じで、パフォーマンスが計測できません。
ちなみにLighthouseではちゃんと計測できています。。

エラーメッセージで検索しても特にこれといった情報はヒットしなく半分諦めかけたんですが、色々と検索した結果、無事に解決できたので備忘のために書き残すことにしました。

原因はオフスクリーンアニメーション！？

色々検索している中でこのページに辿り着きました。
Lighthouse NO_LCP error due to offscreen animation #10869

どうもLCP要素がビューポート外からアニメーションしてくる時にこのエラーになるみたいなことを言っています。
そこでサイトを見直したところ、確かにヘッダーはビューポート外からニュルッと出てきて、ヒーローイメージもopacity0から1になるようになっていました。

.hero {
  opacity: 0;
  filter: blur(25px);
  .is-loaded & {
    opacity: 1;
    filter: blur(0);
  }
}

LCP要素が何も無いってことですね。。

なのでちょっとでも見えてれば良いのかなと思い修正してみました。

.hero {
  filter: blur(25px) opacity(1%);
  .is-loaded & {
    filter: blur(0) opacity(100%);
  }
}

opacityを0じゃなくしたってだけです。

結果は

無事にエラーが解消されパフォーマンスの値が表示されるようになりました。

ちょっと考えればそりゃそうだよなってことではありますが、以後気をつけていきたいと思います。

同じエラーが出てしまった人の一助になれば幸いです。

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら