CLSを改善してレイアウトシフトを防ぐ方法

読んでいる途中で文章が動いたり、ボタンの位置が突然変わったり、画像の読み込みでページ全体が下へ押し出されたりする場合、サイトの視覚的な安定性に問題があります。

この予期しない移動を測定する指標が Cumulative Layout Shift（CLS） です。GoogleのCore Web Vitalsの一つで、0.1以下が良好、0.25を超えると不十分とされます。

CLSとは？

CLSは、訪問中に表示された要素が予期せず移動した量を測定します。クリックしようとしたリンクの上に広告が表示されたり、大きな画像の読み込み完了で記事が下へ移動したりする例があります。

評価はモバイルとデスクトップを分け、訪問の75パーセンタイルで行います。単なるダウンロード速度ではなく、実際の訪問者が体験する安定性を表します。

主な原因

ブラウザが要素の最終サイズを事前に把握できないことが原因です。サイズ指定のない画像、領域を確保していない動画やiframe、広告、外部ウィジェット、フォントの入れ替え、後から追加されるバナー、プレースホルダーなしのJavaScriptコンテンツなどが代表例です。

画像・埋め込み・広告の領域を確保する

画像には width と height を指定し、読み込み前に比率を予約できるようにします。

<img src="example.jpg" alt="例" width="1200" height="800">

max-width: 100%; height: auto を使えばレスポンシブ表示も可能です。動画、地図、フォーム、SNSの埋め込みには aspect-ratio: 16 / 9 のコンテナを用意し、広告にも想定される高さをあらかじめ確保します。

動的コンテンツとフォント

Cookie通知、キャンペーン、検索結果、推薦、APIの応答は、表示済みのコンテンツを後から押し下げないようにします。先に領域を確保するか、スケルトンUIと予測可能な最小高さを使用します。

フォールバックフォントとWebフォントの幅が異なると、改行が変わってレイアウトが動きます。近いメトリクスのフォールバックを選び、size-adjust なども検討しながら読み込みを調整してください。

アニメーションと調査

top、left、width、height、margin のアニメーションはレイアウトを変更します。移動や拡大縮小には transform: translateX(20px) のようなCSS transformを使う方が安全です。

PageSpeed Insights、Lighthouse、Chrome DevToolsで原因を確認します。フィールドデータは実際の端末とネットワークを、ラボデータは実装の調査を示します。スクロール、メニュー、同意バナー、追加読み込み、ウィジェットも確認しましょう。

高速なホスティングだけではCLSは直りません。まず移動している要素を特定し、HTML、CSS、JavaScript、画像、外部サービスを改善します。

よくある質問

良いCLSスコアとは？

0.1以下が良好、0.1から0.25は改善が必要、0.25超は不十分です。

遅延読み込みはCLSを起こしますか？

遅延読み込み自体が原因ではありません。サイズや比率がなく、領域を予約できない場合に問題になります。

CLSの改善はSEOに効果がありますか？

Core Web VitalsはGoogleのランキングシステムで使われますが、CLSは多くのシグナルの一つに過ぎません。

安定したサイトを作る

大切なのは、要素が表示される前にブラウザが必要な領域を把握できるようにすることです。空間を確保し、実際の操作をテストし、フィールドデータとラボデータの両方で確認しましょう。