google PageSpeed Insightsで、読み込み時にopacity: 0→animation表示の場合、エラーでデータが出ない

今回は私の大嫌いな（笑）google PageSpeed Insightsでの、エラーで全然データが戻ってこない件について、状況や対策を確認していきます。PageSpeed Insightsの画面がエラーで真っ赤になると焦りますが、対策はできるので大丈夫です。早速確認していきましょう。

google PageSpeed Insightsでデータが全部エラーになる状況・原因

PageSpeed Insightsの『Error!ページにコンテンツが描画されませんでした』状況

管理人はグループサイトSSFのチューニングをしていたんですけど、表示確認のほか、ロード速度もチェックしました。そしたらこんな感じでエラーが。

『First Contentful Paint，Largest Contentful Paint，Total Blocking Time，Cumulative Layout Shift』などの項目が『コンテンツが描画されませんでした』ということで、データなし。せっかく良い感じでチューニングしたのに、成果がわからないとやった甲斐がありません。

原因～ロード時のopacity: 0をコンテンツ描画されない判定している

とはいえ、心当たりはあったので該当ＣＳＳプロパティとかで検索しまくって見つけました。search consoleヘルプのフォーラムやChromiumのフォーラムでは報告されているようです。内容は『opacity: 0をコンテンツ描画されない判定している』というもの。処理を少し遅らせればみつかりそうなもんですけどね（笑）

LCP missing candidates painted with opacity 0 then animated to non-zero（Chromium　英語）
https://issues.chromium.org/issues/40139583

search consoleヘルプ
https://support.google.com/webmasters/thread/162198330/

該当のＣＳＳ

心当たりがあった部分は以下の部分です。CSSのアニメーションで、opacity: 0からopacity: 1にfadeInするというもの。このopacity: 0がコンテンツ表示しない判定になっているっぽいです。

jqueryとか無しでもフェードができるんで便利なんですけど、管理人はフェードがかかればよいので、ちょっと調整してみます。

調整例と結果

というわけで、簡単に対策をしてみます。ロード時はopacity: 0からスタートだったのを、opacity: 0.1からスタートします。これでもフェードがかかっているようにはなります。心持アニメーションの時間を遅らせてもよさそうですね。

opacity: 0.1設定にした場合は、PageSpeed Insightsもデータを計測できるようになりました。ちなみに昔のSSF、重いテーマ・子テーマ＆bootstrapだったので、モバイルパフォーマンススコアは50点切ってましたよ。

あとがき・まとめ

まとめると、こんなところでしょうか。フェードにopacity使っていてスコアが出ない方は、是非チェックしてみてください。