CLS(Cumulative Layout Shift)とは?

CLS(Cumulative Layout Shift)とは、CLSは、Googleが提唱する”Core Web Vitals(コア ウェブ バイタル)”の3つの指標のうちのひとつで、翻訳すると「累積レイアウトシフト」。

ユーザーが予期しないレイアウトのズレの量がどの程度あるのかを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″と計測され、赤い警告表示となってしまっています( ;∀;)

SpeedPage Insights

CLSで目標とすべき値

web.devによると、ユーザーに優れたユーザーエクスペリエンスを提供する為には、CLSのスコアを0.1未満にすることが重要だとしています。少なくともNEED IMPROVEMENTを達成する為には0.25秒以内に重要なコンテンツが読み込まれることが前提のウェブページレイアウトになっていなければならないということです。

CLSがGoogle検索での表示にとって重要な指標に

因みに、CLSを含む”3つのCore Web Vitals(コア ウェブ バイタル)”の値が、今後のGoogle検索での表示にとって重要な指標とするとGoogle Blogで発表しています。

Google Blog Evaluating page experience for a better web

現在の値が0.284ですので、なかなか大変な作業になるかもしれません。(;’∀’)

時間のある時にでも、”CLSの改善”を試してみたいと思います。