目次
CLS（Cumulative Layout Shift）とは？
CLS（Cumulative Layout Shift）とは、CLSは、Googleが提唱する”Core Web Vitals（コア ウェブ バイタル）”の３つの指標のうちのひとつで、翻訳すると「累積レイアウトシフト」。
ユーザーが予期しないレイアウトのズレの量がどの程度あるのかをGoogleが指標にしたものです。
因みに、3つのCore Web Vitals（コア ウェブ バイタル）とは以下の3つの指標です。
- LCP（Largest Contentfu Paint）
- FID(First Input Delay)
- CLS(Cumulative Layout Shift)
CLSを調べる方法
PageSpeed InsightでCLSの値を確認する。
CLSは、Googleが提供してくれている「PageSpeed Insight」で確認することがでます。以下は、PageSpeed Insightで弊社のコーポレートサイトを測定してみた結果ですが、CLS（Cumulative Layout Shift）の値がなんと”0.284″と計測され、赤い警告表示となってしまっています( ;∀;)
CLSで目標とすべき値
web.devによると、ユーザーに優れたユーザーエクスペリエンスを提供する為には、CLSのスコアを0.1未満にすることが重要だとしています。少なくともNEED IMPROVEMENTを達成する為には0.25秒以内に重要なコンテンツが読み込まれることが前提のウェブページレイアウトになっていなければならないということです。
CLSがGoogle検索での表示にとって重要な指標に
因みに、CLSを含む”3つのCore Web Vitals（コア ウェブ バイタル）”の値が、今後のGoogle検索での表示にとって重要な指標とするとGoogle Blogで発表しています。
現在の値が0.284ですので、なかなか大変な作業になるかもしれません。(;’∀’)
時間のある時にでも、”CLSの改善”を試してみたいと思います。