目次
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″と計測され、赤い警告表示となってしまっています( ;∀;)
![](https://dev.appswingby.com/home/wp-content/uploads/2020/11/CLS_SpeedPageInsightで調査する-1.jpg)
CLSで目標とすべき値
web.devによると、ユーザーに優れたユーザーエクスペリエンスを提供する為には、CLSのスコアを0.1未満にすることが重要だとしています。少なくともNEED IMPROVEMENTを達成する為には0.25秒以内に重要なコンテンツが読み込まれることが前提のウェブページレイアウトになっていなければならないということです。
![](https://dev.appswingby.com/home/wp-content/uploads/2020/11/CLSの目標値-1024x314.jpg)
CLSがGoogle検索での表示にとって重要な指標に
因みに、CLSを含む”3つのCore Web Vitals(コア ウェブ バイタル)”の値が、今後のGoogle検索での表示にとって重要な指標とするとGoogle Blogで発表しています。
![](https://dev.appswingby.com/home/wp-content/uploads/2020/11/Google-Blog-Evaluating-page-experience-for-a-better-web.jpg)
現在の値が0.284ですので、なかなか大変な作業になるかもしれません。(;’∀’)
時間のある時にでも、”CLSの改善”を試してみたいと思います。