ホームページ制作 
Webマーケティング 
FHスタッフ雑記 ホームページ制作・Web制作のSEO -【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じゃなくしたってだけです。
結果は
無事にエラーが解消されパフォーマンスの値が表示されるようになりました。
ちょっと考えればそりゃそうだよなってことではありますが、以後気をつけていきたいと思います。
同じエラーが出てしまった人の一助になれば幸いです。
こんなお困りごとは
ございませんか？
-
ホームページで
何をゴールにすればよいかが
わからないホームページで
達成したい成果をまず設定MORE
-
ホームページをリニューアルしたいけど
どこから手を付ければいいか
わからない今のサイトをよりよくするため
情報整理から始めましょう！MORE
-
デザインだけではなく
Webシステム制作も一緒にやってほしいホームページにおける
Webシステム制作の実績は豊富ですMORE
-
コンバージョンにつながる
ツールはないだろうか？Webチャットツール - Fチャットで
お客様をサポートMORE
-
どれくらいの費用がかかるか
ざっくりでいいから知りたい3つの規模感で
ざっくりこんな感じですMORE
-
ホームページ制作の
進め方のイメージが湧かないホームページ制作
の流れを紹介MORE
-
公開後も継続的に
メンテナンスや保守をしてほしい更新毎のお見積りや
月額制の更新などもご用意MORE
-
SEO対策は何から
始めればよいの？基礎的なSEOは
おまかせくださいMORE
お問い合わせ
