Core Web Vitals の CLS について

目次

• CLS とは何か
• CLS の改善結果の例
• CLS が原因でよくあるもの
• 実際に起こる画面
• CLS を確認する
• Search Console
• Lighthouse
• 拡張機能
• CLS を改善する
• まとめ
• 参考記事

CLS とは何か

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

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

• いきなり文字の位置が変わる
• 画像がいきなり現れる
• クリックしようとしたボタンやリンクの位置が変わって別のものをクリックしてしまった

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

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

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

CLS の改善結果の例

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

CLS が原因でよくあるもの

• 寸法のない画像

• 寸法のない広告、埋め込み、iframe

• 動的に挿入されたコンテンツ

• FOIT / FOUT を引き起こす Web フォント

などが主な原因です。

実際に起こる画面

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

すると取得後で 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 を改善する

• 全ての fetch が終わるまで表示を遅らす

• ガタンとなる分の高さを事前にとっておく。(スケルトンローディングなど)

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

まとめ

今回は 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/