モダンCSSによるレイアウトシフトの防止

予期しないコンテンツのジャンプはユーザーをイライラさせ、Core Web Vitalsのスコアを悪化させます。Cumulative Layout Shift(CLS)は、初期読み込み時だけでなく、ページセッション全体を通じて発生するこれらの不快な動きを測定します。クリックしようとしたボタンが突然移動する。フォントが切り替わるとテキストがリフローする。スクロール中に埋め込みコンテンツがコンテンツを下に押し下げる。

モダンCSSは、レイアウトシフトが発生する前に防止するための精密なツールを提供します。この記事では、今日の本番環境で機能するCSS優先のテクニックを取り上げ、固有サイズ設定、フォントの安定性、CLSスコアを0.1の閾値以下に保つアニメーションパターンに焦点を当てます。

CLSがページ読み込みを超えて拡張される理由

CLSはページライフサイクル全体にわたって累積されます。Lighthouseのようなラボツールは読み込み時のシフトをキャプチャしますが、実ユーザーモニタリング(RUM)ではより高いスコアが明らかになることがよくあります。その違いは何でしょうか?遅延コンテンツ、遅れて挿入される広告、またはユーザーインタラクション後の500ミリ秒の猶予期間を超えるトランジションからの読み込み後のシフトです。

適格なユーザー入力から500ミリ秒以内に発生するシフトはCLSにカウントされません—それらは予期されるものです。それ以外はすべてカウントされます。つまり、スクロールトリガーの遅延読み込み、要素のサイズを変更するホバー状態、クライアントサイドのルート遷移は、予期しない動きを引き起こす場合、すべて寄与します。

固有サイズ設定によるスペース確保

レイアウトシフトを防ぐ基本は、コンテンツが到着する前に寸法を宣言することです。モダンCSSはこれを簡単にします。

画像とメディア

aspect-ratioプロパティを使用すると、ブラウザは固定ピクセル値なしで、比率のみを使用してスペースを確保できます。<img>要素のwidthおよびheight属性と組み合わせることで、ブラウザはHTML解析中に即座に予約スペースを計算します。

レスポンシブ画像の場合、<picture>内の<source>要素に寸法を設定して、シフトなしでアートディレクションを処理します。ブラウザは、画像データがダウンロードされる前にこれらの値を使用してアスペクト比を確立します。

埋め込みと動的コンテンツ

サードパーティの埋め込み—動画、地図、ソーシャル投稿—は、最終的な寸法を伝えることはほとんどありません。コンテナ要素にmin-heightまたはaspect-ratioを使用して、予想されるスペースを確保します。正確な寸法が不明な場合は、分析に基づいて最も一般的なサイズのスペースを確保し、外れ値に対する軽微なシフトを受け入れます。

JavaScriptを介して挿入されるコンテンツについても、同じ原則が適用されます:スクリプトが実行される前に、コンテナにCSSで固有のサイズを宣言する必要があります。

リフローのないフォント読み込み

Webフォントは、フォールバックフォントと最終フォントのメトリックが異なる場合にシフトを引き起こします。font-displayプロパティだけではこれを解決できません—swapでもメトリックが異なる場合はリフローが発生します。

メトリック調整されたフォールバック

モダンCSSは、@font-face宣言内でsize-adjust、ascent-override、descent-override、line-gap-overrideを提供します。これらのプロパティは、フォールバックフォントのメトリックをWebフォントに合わせて調整し、スワップが発生しても目に見えるリフローを排除します。

最も厳格なCLS防止には、これをfont-display: optionalと組み合わせます—Webフォントは初期レイアウト中に利用可能な場合にのみレンダリングされます。より積極的でないアプローチの場合、font-display: swapとメトリックオーバーライドを組み合わせることで、シフトの大きさを最小限に抑えながら、すぐに読みやすいテキストを提供します。

<link rel="preload">で重要なフォントをプリロードすると、ファーストペイントで利用できる可能性が高まり、フォールバックが表示されるウィンドウが減少します。

アニメーションとUIの拡張

width、height、top、left、またはmarginをアニメーション化すると、レイアウトの再計算がトリガーされ、CLSに寄与します。transformとopacityのアニメーション化はそうではありません—これらのプロパティは、ドキュメントフローに影響を与えずにコンポジター上で実行されます。

安全なアニメーションパターン

寸法を変更するのではなく、transform: scale()を使用して要素をスケーリングします。位置プロパティの代わりにtransform: translate()で要素を移動します。これらのアプローチは、周囲のコンテンツをシフトさせることなく視覚的な動きを作成します。

UI拡張—アコーディオン、ドロップダウン、ツールチップ—の場合、500ミリ秒以内にユーザーインタラクションに続く場合、シフトは許容されます。拡張が自動的に、または遅延後に発生する場合は、最大拡張スペースを事前に確保するか、position: absoluteまたはオーバーレイパターンを使用してドキュメントフローの外に拡張要素を配置します。

ルート変更時のトランジション

シングルページアプリケーションは、クライアントサイドナビゲーション中にCLSをトリガーすることがよくあります。トランジションアニメーションが500ミリ秒を超える場合、またはナビゲーション後にコンテンツが非同期に読み込まれる場合、シフトはスコアにカウントされます。トランジションを短く保ち、スケルトンプレースホルダーまたは固定コンテナ寸法を介して、着信コンテンツに予約スペースがあることを確認します。

アプローチの検証

Chrome DevToolsのPerformanceパネルは、個々のレイアウトシフトをスコアと影響を受ける要素とともに表示します。Layout Shiftsトラックはシフトクラスターを視覚化し、パターンの特定に役立ちます。

本番環境のモニタリングには、web-vitalsライブラリを使用するRUMソリューションが、要素の帰属を伴う実ユーザーのCLSをキャプチャします。フィールドデータをラボ測定と比較します—不一致は、合成テストが見逃している読み込み後のシフトを示しています。

結論

レイアウトシフトの防止は、1つの原則に帰着します:レンダリング前にすべてに固有のサイズを宣言すること。メディアにはaspect-ratioを、フォントにはメトリックオーバーライドを、アニメーションにはtransformを使用します。遅延読み込みコンテンツ用のスペースを確保し、ラボツールとフィールドデータの両方で検証します。

CLS防止のためのモダンCSSは、トリックではありません—最初から正しくスペースを割り当てるために、ブラウザが必要とする情報を提供することです。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..