CLSレイアウトシフトの原因と修正 — Cumulative Layout Shiftガイド

Cumulative Layout Shift (CLS) の修正

CLSは、ページのライフサイクル中のすべての予期しないレイアウトシフトスコアの合計を測定します。レイアウトシフトは、表示されている要素が2つのレンダリングフレーム間で位置を変えたときに発生します。Googleは0.1以下のCLSを良好と見なします。

CLSの計算方法

各レイアウトシフトは以下でスコア化されます：

レイアウトシフトスコア = インパクトフラクション × ディスタンスフラクション

• インパクトフラクション：シフトの影響を受けたビューポートの総面積
• ディスタンスフラクション：要素が移動した最大距離をビューポートの寸法で割ったもの

重要：すべてのシフトがカウントされるわけではない

ユーザー入力から500ms以内に発生するシフトは除外されます。つまり、展開/折りたたみトグル、アコーディオン、その他のインタラクション起因のレイアウト変更はCLSに影響しません。

主な原因と修正

1. サイズ指定のない画像と動画

<!-- 悪い例：サイズなし、画像読み込み時にシフトが発生 -->
<img src="photo.jpg" alt="Product">

<!-- 良い例：画像読み込み前にスペースを確保 -->
<img src="photo.jpg" alt="Product" width="800" height="600">

2. Webフォントの読み込み（FOUT/FOIT）

/* フォールバックのメトリクスを一致させるためにsize-adjustを使用 */
@font-face {
  font-family: "Custom Font";
  src: url("/fonts/custom.woff2") format("woff2");
  font-display: swap;
  size-adjust: 105%;
}

3. 動的に挿入されるコンテンツ 広告、Cookieバナー、通知バー、遅延読み込みの埋め込みがコンテンツを押し下げます。動的コンテンツを受け取るコンテナには常にmin-heightでスペースを確保します。

4. レイアウトプロパティを使用したアニメーション top、left、width、heightのアニメーションはレイアウトシフトをトリガーします。代わりにtransformを使用してください — transformはコンポジットされ、レイアウトを引き起こしません。