GoogleがWeb上でより良いUXを実現するために指標化したCLS（Cumulative Layout Shift）とは？Googleがユーザーエクスペリエンス上重要であると指摘しているCLSについて解説しています。

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の改善”を試してみたいと思います。