CLS (Cumulative Layout Shift) の改善

最終更新日:2021年04月13日公開日:2020年11月12日 2020年11月

PageSpeed Insights 対策の一環．他の対策は以下を見てください．

1 CLSとは(累積レイアウト変更とは)
2 CLS の確認の仕方
3 Cumulative Layout Shift の改善
- 3.1 img タグの縦横幅の指定
- 3.2 CSS トランジションを諦める

CLSとは(累積レイアウト変更とは)

PageSpeed Insights に出てくる Cumulative Layout Shift

originsummary

解説ページである Web Vitals を見てみると

Cumulative Layout Shift は同じページの下に日本語訳が表示されているが，「累積レイアウト変更」のこと．

簡単に説明すると，ページを表示している間に文字などのレイアウトが動くのはよくないと言っているわけである．

Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

CLS とは読み込みフェーズにおけるページレイアウトの移動量を示しますが，要は「ページで CLS を0.1未満に維持する必要があります．」ということ．

CLS の確認の仕方

Chrome の開発者ツールでの確認の仕方を掲載して説明しているページもあるように，

performance タブを開き，
Screenshots にチェックを入れて，
更新ボタンを押して
表示された下の部分で
スクリーンショットの部分の上でマウスを横に移動していくとスクリーンショットが変化していくのが分かる．

LCP を説明したページで行っていたことと同様のことである．
(※上記ページでは Screenshots にチェックは入っていない．)

「累積レイアウト変更（CLS）に問題を解決！原因は画像遅延読み込み！？」のページは動画付きで分かりやすいです．

開発者ツールで見ると分かりやすいとはいえ，どこに問題があるかが明確になるのは，PageSpeed Insights なので直に確認することをお勧めする．

CLS に問題がある場合，「診断」の中に「レイアウトが大きく変わらないようにする」という指摘が出てくる．

これで場所がはっきりする．

Cumulative Layout Shift の改善

img タグの縦横幅の指定

様々なサイトに書いてあるのは img タグに width と height を指定すること．
これはまず必要なこと．実際の大きさと違ってもアスペクト比(縦横比)が正しければよい．
実際の長さは css で規定している場合はあまり気にしなくてよい．
レスポンシブ対応のため，width, height は css で決めていることが多いと思う．

先ほどの警告に関しても上の二つは近くにあった img タグに width属性と height属性がなかったことが原因だった．

CSS トランジションを諦める

滑らかな表示がしたい場合に transition を使っていることもあると思う．

CSSトランジションに関しては，「CSS トランジションの使用」が詳しいので参照してもらうとして，これを使っていると後から遅れてレイアウトが変更されるのでひっかかってしまう．

具体的にはこのような表記をしているスタイルシートだが，

transition: all .4s;

これを使っている部分で「レイアウトが大きく変わらないようにする」という指摘を受けた場合，使わないようにすると警告は消える．