累積レイアウトシフト（CLS）とは？
累積レイアウトシフト（CLS）は、ウェブページの視覚的安定性を測定するためにGoogleが開発したコアウェブバイタルの指標です。ページの全ライフスパンの間に発生した予期せぬレイアウトシフトの合計を数値化します。レイアウトシフトは、あるレンダリングフレームから次のレンダリングフレームへ、目に見える要素の位置が変わるときに発生します。
CLSの測定方法
CLSのスコアは、シフトがないことを示す0から、さまざまな程度の不安定さを示す0以上の値まであります。この計算式は、各シフトの影響分率と距離分率を考慮し、要素がどれだけ移動し、ビューポートのどれだけをカバーするかを計算します。
CLSスコアの解釈
- 良好：0 - 0.1
- 改善が必要：0.1 - 0.25
- 不良：0.25以上
なぜCLSが重要なのか？
予期せぬレイアウトの変化はユーザーのフラストレーションにつながるため、CLSはユーザーエクスペリエンスにとって非常に重要です。例えば、ユーザーがボタンをクリックしようとしているときにレイアウトがずれてしまい、意図せず他のものをクリックしてしまった場合、ユーザーエクスペリエンスが低下し、コンバージョンが失われる可能性があります。
CLS不良の一般的な原因
-
寸法のない画像：
- 幅と高さを指定せずに画像をHTMLに含めると、ブラウザが最初に割り当てるスペースを把握できないため、レイアウトがずれることがあります。
-
ディメンションの ない広告、埋め込み、Iframe：
- これらの要素は、あらかじめ寸法が指定されていない場合、動的にロードされ、レイアウトのずれを引き起こす可能性があります。
-
動的に注入されるコンテンツ：
- DOM内の既存のコンテンツの上にコンテンツを追加すると、要素が押し下げられ、ずれが生じることがある。
-
FOIT/FOUTを引き起こすウェブフォント：
- Flash of Invisible Text（FOIT）とFlash of Unstyled Text（FOUT）は、ブラウザがウェブフォントを読み込む際にレイアウトがずれることがあります。
CLSを最小限に抑えるベストプラクティス
-
画像と動画にサイズ属性を含める：
- 画像や動画が読み込まれる前にレイアウトのスペースを確保するため、HTMLで画像や動画の幅と高さを必ず定義してください。
-
広告と埋め込み用のスペースを予約する：
- CSSを使って広告枠、iframe、埋め込み枠の寸法を設定し、読み込み時にレイアウトがずれないようにします。
-
既存のコンテンツの上にコンテンツを動的に注入することは避ける：
- 折り目の下、またはすでに確保されたスペースがあるコンテナ内に新しいコンテンツを追加する。
-
フォント・ローディング戦略を使う：
- font-display CSSプロパティを利用して、ウェブフォントの表示方法を制御し、FOIT/FOUTによるずれを最小限に抑える。
-
アニメーションにCSS Transformを使用する：
- top、bottom、left、rightの代わりにtransformプロパティを使用すると、レイアウトのずれを引き起こすことなく要素をアニメーション化できます。
結論
累積レイアウトシフト（CLS）は、安定した視覚的に魅力的なユーザーエクスペリエンスを確保するために不可欠な指標です。レイアウトシフトの要因を理解し、それを最小限に抑えるベストプラクティスを実施することで、ウェブページのCLSスコアを向上させ、全体的なユーザー満足度を高めることができます。
CLSやその他のコアウェブバイタルの改善に関する詳細については、Googleのウェブバイタルに関するドキュメントを参照してください。
