Yuto Blog
rss-iconx-icongithub-iconyoutube-icon

Core Web Vitals の CLS について

CLS とは何か

CLS は Cumulative Layout Shift の略で、ページのレイアウトが変化する度合いを表す指標です。

例えばブログを読んでいる際に、

みたいな経験ありませんか??

Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

CLS Example 1

要は「ガタン!」ってなるやつのことですね。

CLS の改善結果の例

https://techblog.yahoo.co.jp/entry/2020120330052925/

CLS が原因でよくあるもの

などが主な原因です。

実際に起こる画面

jsonplaceholder を 1 秒後に叩くようにしています。(処理が重い api という認識で...🙇‍♂️)

CLS Example 1

すると取得後で dom が変わるため、何もなかったところからいきなり post の title が表示されるようになります。 これが一番最初に自分が言った、『ブログを読んでいるときに文字がいきなり変わるような現象』のことですね。

CLS を確認する

大きな web アプリなどであれば、どこで cls が起きているのか人間の目で確認しようとするととても大変なので、何かしらのツールを使用します。 ほとんどのケースは以下の三つの何かしらを使えば確認できると思います。

参考: https://web.dev/cls/#how-to-measure-cls

Search Console

https://search.google.com/search-console/about

Lighthouse

https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja

拡張機能

https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja

https://chrome.google.com/webstore/detail/cls-visualizer/jbbeihojggidiclbcneckhcblilapahn?hl=ja

CLS を改善する

基本的には上記のような対応をすれば問題ないかと思います。

まとめ

今回は Web Core Vitals の指標の一つである CLS についてのまとめました。 この記事が少しでも誰かのためになれば幸いです。

参考記事

https://developers-jp.googleblog.com/2020/05/web-vitals.html

https://web.dev/cls/

https://web.dev/optimize-cls/#dynamic-content

https://web.dev/i18n/ja/optimize-cls/

0