\n
要は「ガタン!」ってなるやつのことですね。
\nhttps://techblog.yahoo.co.jp/entry/2020120330052925/
\n寸法のない画像
\n寸法のない広告、埋め込み、iframe
\n動的に挿入されたコンテンツ
\nFOIT / FOUT を引き起こす Web フォント
\nなどが主な原因です。
\njsonplaceholder を 1 秒後に叩くようにしています。(処理が重い api という認識で...🙇♂️)
\nすると取得後で dom が変わるため、何もなかったところからいきなり post の title が表示されるようになります。\nこれが一番最初に自分が言った、『ブログを読んでいるときに文字がいきなり変わるような現象』のことですね。
\n大きな web アプリなどであれば、どこで cls が起きているのか人間の目で確認しようとするととても大変なので、何かしらのツールを使用します。\nほとんどのケースは以下の三つの何かしらを使えば確認できると思います。
\n参考: https://web.dev/cls/#how-to-measure-cls
\nhttps://search.google.com/search-console/about
\nhttps://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja
\nhttps://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=ja
\nhttps://chrome.google.com/webstore/detail/cls-visualizer/jbbeihojggidiclbcneckhcblilapahn?hl=ja
\n全ての fetch が終わるまで表示を遅らす
\nガタンとなる分の高さを事前にとっておく。(スケルトンローディングなど)
\n基本的には上記のような対応をすれば問題ないかと思います。
\n今回は Web Core Vitals の指標の一つである CLS についてのまとめました。\nこの記事が少しでも誰かのためになれば幸いです。
\nhttps://developers-jp.googleblog.com/2020/05/web-vitals.html
\nhttps://web.dev/cls/
\nhttps://web.dev/optimize-cls/#dynamic-content
\nhttps://web.dev/i18n/ja/optimize-cls/
"}" data-hono-hydrated="true">CLS は Cumulative Layout Shift の略で、ページのレイアウトが変化する度合いを表す指標です。
例えばブログを読んでいる際に、
みたいな経験ありませんか??
Cumulative Layout Shift は、ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。
要は「ガタン!」ってなるやつのことですね。
https://techblog.yahoo.co.jp/entry/2020120330052925/
寸法のない画像
寸法のない広告、埋め込み、iframe
動的に挿入されたコンテンツ
FOIT / FOUT を引き起こす Web フォント
などが主な原因です。
jsonplaceholder を 1 秒後に叩くようにしています。(処理が重い api という認識で...🙇♂️)
すると取得後で dom が変わるため、何もなかったところからいきなり post の title が表示されるようになります。 これが一番最初に自分が言った、『ブログを読んでいるときに文字がいきなり変わるような現象』のことですね。
大きな web アプリなどであれば、どこで cls が起きているのか人間の目で確認しようとするととても大変なので、何かしらのツールを使用します。 ほとんどのケースは以下の三つの何かしらを使えば確認できると思います。
参考: https://web.dev/cls/#how-to-measure-cls
https://search.google.com/search-console/about
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
全ての 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/
0