コアウェブバイタルに関する指標に「LCP」と「CLS」がありますが、今回はこの二つを比較してみたいと思います。
・LCP（Largest Contentful Paint）
・CLS（Cumulative Layout Shift）
なぜ、LCPとCLSを比較するのかでいえば、この二つは「P」と「S」の違いしかなく非常に紛らわしいからです。
ページスピードの方はLCPだっけ？CLSだっけ？と迷うことも多いため、このふたつの違いを理解しておくことをおすすめします。
このLCPの「P」は「Paint」のPになりますが、ファーストビューの一番大きなコンテンツを表示（paint）するのに要する時間のことを指しています。
そのため、LCPは時間の秒を意味する指標になりますが、この数値が長いとなかなかページが表示されないため、ページエクスペリエンスが低下してしまいます。
できるだけ、短時間で表示されるように改善する必要がありますが、具体的には画像やスクリプト、フォントなどのリソースのダウンロード時間を短くするのが効果的かと思われます。
そして、このダウンロード時間を短くするには、リソースのデータサイズを縮小するのが効果があります。画像を圧縮して容量を削減したり、フォントをサブセット化したり、あるいは使用していないスクリプトを削除するとよいでしょう。
このLCPの次に、CLSが出てくるわけですが、こちらは「Cumulative Layout Shift」、つまり累積のレイアウトシフトのことを意味しています。
ページを表示してレンダリングされた後、コンテンツが移動してシフトすることがありますが、これには様々な要因が考えられます。概ね、ブラウザが再計算した結果、再度レンダリングしなおす際に位置がずれてしまうことが多いと感じています。
仮に、「不安定な表示面積」が全体の30％で「0.3」、その「移動距離」が50％で「0.5」だった場合、0.3×0.5で0.15という値が出てきます。
これがレイアウトシフトスコアと呼ばれるものですが、一般的にはCLSが0.1以下であることが良好とされています。
おおむね、画像などが大きくシフトする際はスコアが悪くなるかと思いますが、widthやheight属性を設定しておけば、それほど大きくシフトすることはありません。
LCPが時間の値で理解しやすいのに対し、CLSはインパクト的な測定値になるため、どちらかといえば、CLSの方が難解かもしれません。
最近では巨大な広告が表示されるケースもありますが、その際にレイアウトが大きくずれるサイトもあり、そのようなサイトは今後、検索ではヒットしづらくなる可能性があるかもしれません。
おおむね、「LCP」と「CLS」は以上のような概念になりますが、これらはLighthouseなどのツールで数値として測定可能なため、一度、検証されてみることをおすすめします。