レイアウトシフトは何が原因で、CLSをどう修正しますか？

修正

• 常に width/height（または aspect-ratio）を設定し、読み込み前にスペースを確保します:

• 広告/埋め込みのスペースを確保する。min-heightのプレースホルダーを使います。
• フォントを安定させる — font-display: optional または swap に加え、size-adjust/preload で、Webフォント到着時のリフローを最小化します。
• 読み込み後にファーストビュー上にコンテンツを挿入しない。オーバーレイする（position: absolute）か、下から押し上げます。
• transform/opacity でアニメーションする — これらは合成され、レイアウトを引き起こしません。

なぜ重要なのか

CLSはCore Web Vitalsの中で最も修正しやすいものです。たいていは、いくつかの欠けた寸法の問題です。面接官はこれを使って、あなたが描画パイプラインを理解しているかを試します。前もってスペースを確保すればブラウザは決してリフローする必要がなく、それが transform が top のアニメーションより優れている理由なのです。