現象#

GoogleのPageSpeed Insightsで「NO_LCP」というエラーが出てしまいPC環境のデータが上手く計測できない事象に遭遇し、改善のために色々と試した為備忘録としてここに残しておく。

なおPC側の計測は上記エラーで計測失敗しているがスマホ側の計測は問題なく成功している。

対処法#

色々と調べてみると、どうもCSSの不透明度が影響しているらしく

該当しそうなコンテンツのopacity: 0をopacity: 0.01に変更すると治る……という情報がいくつか出てくる。

• Lighthouse NO_LCP error due to offscreen animation
• Fixing the NO_LCP error in Lighthouse

ほんとかよ……と思いながらもとりあえず試してみる。

LCP（Largest Contentful Paint）は通常ビューポートに含まれるコンテンツのうち最も大きい画像もしくはテキストブロック等が当てはまる。

あ、ビューポートは画面に現在表示されている箇所で、LCPにおいてはページを開いた直後に表示されている領域。

このブログだとLCPは明らかにバナー画像で、各コンポーネントに設定しているコンポーネント読み込み時のフェードインアニメーションのために不透明度を設定しているがここにも適応されている。

半信半疑で0.01に変更してみると……。

結果#

治った

まじかよ