CLS

CLS（Cumulative Layout Shift）はウェブページ上の視覚的なコンテンツがどれだけ予期せずに動く（シフトする）かを測定するメトリクスです。要するに、ページの要素が突然動いたり、位置が変わったりすることによって、ユーザー体験がどれだけ悪化しているかを示す指標となります。

なぜCLSは重要なのか？

コンテンツが読み込まれた後に突然シフトすると、ユーザーは予期しないクリックをしてしまうリスクがあります。例えば、購入ボタンをクリックしようとした瞬間、ページの要素が移動して別のリンクをクリックしてしまう可能性があります。このような体験は、ユーザーにとって非常にフラストレーションを感じさせるものです。

CLSの理想的な値

• 良好: 0.1以下
• 必要な改善: 0.1から0.25の間
• 悪い: 0.25以上

CLSを引き起こす主な要因

• 画像や広告、埋め込みコンテンツなどのサイズが指定されていない場合
• フォントの動的読み込みによるテキストのシフト
• ウェブページ上での動的な要素の追加、例えば、非同期的に読み込まれる広告やモーダルウィンドウなど

CLSの最適化のヒント

• 要素のサイズの指定: 画像や動画などのメディア要素のサイズを明示的に指定することで、ページ読み込み時のシフトを防ぐことができます。
• 非同期コードの最適化: 非同期に読み込むコンテンツは、ページの下部やユーザーのアクションに基づいて表示するように設計すると良いでしょう。
• フォントの最適化: Webフォントを利用する場合、font-display: optionalのようなプロパティを使用して、フォントの読み込み時のテキストのシフトを最小限に抑えます。

CLSは、ウェブページの視覚的な安定性を評価するための重要な指標です。良好なユーザーエクスペリエンスを提供するためには、CLSの値をできるだけ低く保つことが必要です。