レイアウトシフト（CLS）を防ぐ！画像サイズの指定方法

ぽんきち

らいとはうす？のパフォーマンス向上のためにCLSを改善してほしいと言われたにゃ

わけが分からないにゃ

これは嫌がらせに違いないにゃ

勉強中
プログラマーさん

ページを読み込んだ時に、画像部分の読み込みが遅くて

カクってなることない？

それのことだよ。

ぽんきち

どうすればいいかまで教えてほしいのにゃぁ〜。。。

勉強中
プログラマーさん

説明していくね笑

ユーザビリティ向上のために重要なレイアウトシフトの防止方法（CLS対策）について解説したいと思います。

そもそもレイアウトシフト（CLS）ってなに？
画像サイズの3つの設定方法
まとめ

そもそもレイアウトシフト（CLS）ってなに？

ウェブページを表示したときに、コンテンツが動いてしまいテキスト位置が急にズレたり、押そうとしたボタンが移動してしまい全然違うところをクリックしてしまうことってありませんか？

この現象をレイアウトシフトと呼び、そのズレの指標をGoogle公式ではCLS（Cumulative Layout Shift）と呼んでいます。Chromeの開発者ツールでページのパフォーマンスを評価するときはCLSと表示されるので、ズレを防止する意味で「CLSを改善してほしい」と言われることもあるでしょう。

CLSが良い→ページ読み込み時にコンテンツがズレにくい
CLSが悪い→ページ読み込み時にコンテンツが大きくズレる

みたいな感覚。

この症状は画像の読み込みで特に起きやすいので、CLSを改善させるには画像の適切なサイズ指定が重要になってきます。
その方法を紹介したいと思います。

画像サイズの3つの設定方法

画像のサイズを適切に指定し、レイアウトシフトを防ぐための方法を3つ紹介します。

imgタグにwidthとheightを直接指定

例えばこんな感じ。

<img src="image.jpg" width="800" height="450" alt="image">

予め画像のサイズを指定しておくと、画像が読み込まれる前でも高さが確保されるのでレイアウトシフトの発生を防止することができます。

またレスポンシブ対応のためpictureタグを使う場合も下記のようにsourceタグにサイズを指定することでレイアウトシフトを防ぐことができます。

<picture>
  <source srcset="image-PC.jpg" media="(min-width: 800px)" width="1200" height="600">
  <source srcset="image-SP.jpg" media="(max-width: 799px)" width="600" height="600">
  <img src="image-default.jpg" width="800" height="400" alt="image">
</picture>

aspect-racioを使ったサイズ指定

“400”などの固定指定ではなくvwなど画面幅に応じて画像サイズが変わる時の対策です。
最近ではどのブラウザにも対応してきているのでこちらも有効に使える方法だと思います。

aspect-ratio | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

例：

img {
  width: 35vw;
  aspect-ratio: 16 / 9;
}

aspect-ratioで縦横比を指定することで領域を確保することができるので、コンテンツのズレを防止することができます。
画像毎個別に設定するのは面倒ですが、vwなどの可変サイズにも対応できるのでオススメです。

padding-topを使用した疑似アスペクト比指定

aspect-ratioが主流ではなかったときに使われていた方法で、
画像領域の髙さあたる部分をpadding-topで確保してしまおうという作戦です。

例：

.parent-container {
  width: 35vw;
}
.aspect-container {
  width: 100%; /* ブロック要素なら不要 */
  padding-top: 59.5%; /* アスペクト比の横/縦の値 */
  position: relative;
}
.aspect-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

この方法でも画像領域を確保でき、コンテンツのズレを防止することができます。
ただpadding-topを使用するために基準となる親の横幅が必要だったり、imgをabsoluteで浮かせたりと冗長な記述になりがちです。

imgタグへの直接指定だと足りない。aspect-ratioが使えないなどの理由が無ければ他の二つの方が良いかと思います。