Cumulative Layout Shift (CLS) とは何か、そしてその修正方法

Cumulative Layout Shift (CLS) とは何か？

Cumulative Layout Shift (CLS) は、Core Web Vitals の「視覚的な安定性」の部分を表します。Cumulative Layout Shift (CLS) は、コンテンツがレンダリングされる際、または新しいコンテンツがページに表示される際のページの動きを測定します。ページのどれだけの部分が予期せず移動しているか、およびそれがどれだけ遠くに移動しているかに基づいてスコアを計算します。これらのコンテンツのズレは非常に厄介であり、読み始めた記事の場所を見失わせたり、さらに悪いことに、間違ったボタンをクリックさせたりする原因となります！

良好な Cumulative Layout Shift (CLS) スコアとは？

良好な CLS スコアは0から0.1の間です。CLS スコアが0.1から0.25の間であれば、改善が必要です。0.25を超える CLS スコアは不良と見なされます。Cumulative Layout Shift の Core Web Vitals に合格するには、訪問者の少なくとも75%が「良好」な CLS スコアである必要があります。

Webパフォーマンスと UX における CLS の重要性

Cumulative Layout Shift (CLS) は、読み込み中のWebページがどれほど安定しており予測可能に感じられるかに直接影響を与えるため、Webパフォーマンスと UX の両方に関連しています。それが重要である理由は以下の通りです：

• UX、エンゲージメント、およびブランド認知： 予期しないレイアウトのズレはユーザーのフローを妨げ、情報を見つけたり、ボタンをクリックしたり、意図した通りにページと操作したりすることを困難にします。このフラストレーションは、ユーザーがWebサイトを完全に離脱してしまうような貧弱な UX につながる可能性があります。Webサイトの UX は、その背後にあるブランドを反映します。頻繁なレイアウトのズレは、設計や保守が不十分なWebサイトであるという印象を与え、ユーザーエンゲージメントを妨げ、インタラクションの減少や潜在的により高い直帰率につながる可能性があります。
• アクセシビリティ： レイアウトのズレは、支援技術やスクリーンリーダーに依存する障害を持つユーザーにとって特に破壊的となる可能性があります。安定したレイアウトにより、誰もが効果的にWebサイトをナビゲートし、操作できるようになります。
• SEO と検索ランキング： Core Web Vitals は、Google における小規模ですが重要なランキング要因です。Google は他の検索エンジンと同様に、優れた UX を提供するWebサイトを優先します。CLS は、Google がWebサイトをランク付けする際に考慮する Core Web Vitals 指標の1つです。CLS を最適化することで、検索結果でWebサイトに競争上の優位性をもたらすことができます。

CLS はどのように測定されるか？

ページの CLS は Layout Instability API で測定できます。以下は、この API のシンプルな使用例です：

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

CLS の計算

CLS は、シンプルかつエレガントな計算式を使用して計算されます：

CLS = sum(impact-fraction * distance-fraction)

影響割合（impact fraction）は、ページの表示されているコンテンツがどれだけズレたかを測定します。距離割合（distance fraction）は、コンテンツがどれだけ遠くにズレたかを測定します。たとえば、ページの50%（どれだけ）がページのビューポートの25%（どれだけ遠くに）ズレた場合、CLS スコア = 0.50 * 0.25 = 0.125 となります。

予期されるレイアウトのズレ vs 予期しないレイアウトのズレ

すべてのレイアウトのズレが悪いわけではなく、予期しないものだけが悪影響を及ぼします。たとえば、「さらにアイテムを読み込む」リンクをクリックした場合、ページにさらに多くのアイテムが表示され、ページのコンテンツがズレることを予期するでしょう。

そのため、予期しないレイアウトのズレのみが CLS への寄与を引き起こします。たとえば、ユーザーがボタンをクリックし、それに応じて新しいコンテンツがページに追加される場合（たとえば、メニューのドロップダウン）、そのレイアウトのズレは CLS から除外されます。正確には、ユーザー入力から500ミリ秒以内に発生するレイアウトのズレは計算から除外されます。

レイアウトシフトセッション

CLS が最初に導入された際、一部のサイトは不当に悪い CLS スコアでペナルティを受けていました。たとえば、無限スクロールを実装しているページでは、新しいスクロールのたびに追加された新しいコンテンツの影響が合計 CLS スコアに加算されていました。そのため、現在 CLS はセッション単位で計算されています。各セッションの最大期間は5秒で、レイアウトのズレの間に1秒のギャップがあります。最大の CLS スコアを持つセッションが最終的な CLS スコアになります。

たとえば、最初のセッション中の CLS スコアが0.095で、次のセッションで CLS が0.15になり、最後のセッションで CLS スコアが0になった場合、最終的な CLS スコアは3つの中で最も高い0.15になります。

CLS と Core Web Vitals

Cumulative Layout Shift (CLS) は、視覚的な安定性を測定するための重要かつユーザー中心の指標です。Cumulative Layout Shift (CLS) は、Largest Contentful Paint (LCP) および Interaction to Next Paint (INP) とともに Core Web Vitals の一部です。これら3つの指標を合わせて、読み込みパフォーマンス、インタラクティビティ、および視覚的な安定性を測定します。

一般的な CLS の原因

すべてのレイアウトのズレの根本原因は基本的に同じです。ある時点で、別の要素の上に配置されていた要素が以前よりも多くの、または少ないスペースを占有したためです。これは通常、以下の1つ以上の原因によるものです：

寸法の指定がない画像、動画、および iframe

サイズ指定のないメディアは、Web上における CLS の最大の原因です。2025 Web Almanac によると、モバイルページの62%には、明示的な寸法の指定がない画像が少なくとも1つ含まれています。サイズ指定のない画像、動画、iframe、width: auto の CSS の罠、アートディレクション、レスポンシブ画像の不一致、遅延読み込み、およびプレースホルダー画像をカバーする完全なガイドについては、画像とメディアがレイアウトのズレを引き起こす仕組みを参照してください。

Webフォントの入れ替え

Webフォントはインターネットからダウンロードされますが、その間ページは fallback フォントでレンダリングされます。Webフォントが到着した際、fallback フォントと最終的なフォントのサイズの違いによりレイアウトのズレが発生します。Webフォントをプリロードしているページはわずか11%であり、つまりWebの大部分がフォントの入れ替えによる CLS に対して脆弱であることを意味します。

この修正には2つのテクニックが含まれます：@font-face のメトリクス上書き（size-adjust、ascent-override）を使用して fallback フォントをWebフォントに一致させること、そしてセルフホスティングと重要なフォントのプリロードによってフォントの配信を高速化することです。コード例については、修正と特定に関するガイドを参照してください。

CSS アニメーションとトランジション

top、left、width、および height のようなレイアウトをトリガーするプロパティを使用する CSS アニメーションは、ブラウザに各フレームでのレイアウトの再計算を発生させ、CLS を引き起こします。Web Almanac によると、モバイルページの39%には、CLS の要因となる非コンポジットアニメーションが含まれています。修正方法は、代わりに transform と opacity を使用することです。これらは GPU コンポジタ上で実行され、レイアウトをトリガーすることはありません。詳細なチュートリアルについては、CSS トランジションによって引き起こされるレイアウトのズレを参照してください。

広告、埋め込み、および動的に挿入されたコンテンツ

広告は遅れて読み込まれ、コンテンツを押し下げます。Cookie同意バナーが表示され、ページをズラします。AJAX リクエストはスペースを確保せずに新しいコンテンツを挿入します。これらはすべて同じ問題です：レンダリング時にブラウザが認識していなかった何かがページに表示されることです。解決策は常に、min-height でスペースを確保し、contain: layout style でコンテナを分離することです。YouTube や Google Maps のようなサードパーティの埋め込みの場合、ファサードパターンによって CLS を完全に排除できます。

スクロールでトリガーされるレイアウトのズレ

これは Lighthouse では決して捕捉できない CLS の原因です。スクロール時に隠れるヘッダー、パララックス効果、そして縮小するナビゲーションバーは、しばしば top や height をアニメーションさせますが、スクロールは Layout Instability の仕様において除外される入力ではありません。スクロールによってトリガーされるすべてのレイアウトのズレは CLS スコアに加算されます。修正方法：スクロールでトリガーされるすべてのアニメーションに transform: translateY() を使用します。詳細なチュートリアルについては、スクロールでトリガーされるアニメーションがどのように CLS を引き起こすかを参照してください。

CLS の問題の発見と修正

CLS の診断は、他の Core Web Vitals と同じフィールドデータ優先の方法論に従います。Google Search Console または CoreDash のような RUM ツールから始め、どのページが影響を受けており、どの要素がズレているかを確認します。その後、Chrome DevTools または Core Web Vitals Visualizer 拡張機能を使用して、ローカルで問題を再現し、根本原因を特定します。

完全なステップバイステップの診断プロセス、ツールのチュートリアル、すべての原因に対するコードによる修正、およびクイック修正チェックリストについては、専用ガイド Cumulative Layout Shift (CLS) の問題の発見と修正を参照してください。

ケーススタディ：Rakuten 24 と CLS のビジネスへの影響

Rakuten 24, 日本の大手 Eコマースプラットフォームである Rakuten 24 は、Cumulative Layout Shift がビジネス指標に与える影響について詳細な調査を実施しました。商品ページやカテゴリページ全体で CLS を削減することで、Rakuten 24 は目覚ましい成果を達成しました：

• 低い CLS を経験したユーザーは、高い CLS を経験したユーザーと比較して訪問者あたりの収益が53.37%増加。
• 同じ改善された CLS コホートにおいてコンバージョン率が33.13%増加。
• 安定したページ体験を得た訪問者の間で直帰率が15.20%低下。

これらの数字は、CLS が単なる技術的な指標ではないことを実証しています。視覚的な不安定性は、閲覧や購入の過程でユーザーにフラストレーションを与え、ビジネスの収益に直接的な損害をもたらします。要素が予期せずズレると、ユーザーは信頼を失い、誤クリックをし、セッションを離脱してしまいます。Rakuten 24 の調査は、CLS 最適化への投資が、特にすべてのインタラクションが重要となる Eコマースサイトにおいて測定可能な投資対効果をもたらすことを確認しています。

現実世界の CLS データが示すもの

CoreDash のデータによると、CLS は最もパフォーマンスの高い Core Web Vitals であり、corewebvitals.io のページ読み込みの92.8%が「良好」なスコアを達成しており、モバイルとデスクトップの間に実質的にデバイス間のギャップはありません。デスクトップ（92.8%が良好）とモバイル（92.7%が良好）の両方がほぼ完璧な CLS スコアを達成しており、両方のデバイスタイプで p75 は 0 です。

これは、モバイルのパフォーマンスがデスクトップよりも著しく劣る LCP や INP などの指標とは対照的です。より広範なWeb全体において、CLS はデスクトップよりもモバイルの方が優れているというユニークな特徴があり、これは他のすべての Core Web Vitals とは逆の傾向です。

グローバルに見ると、2025 Web Almanac によれば、状況はそれほど楽観的ではありません：

• 全体として72%のWebサイトが良好な CLS スコアを達成していますが、11%は不良な CLS となっています。
• 62%のモバイルページには、サイズ指定のない画像が少なくとも1つ含まれています（2024年の66%から減少しましたが、依然として CLS の主要な要因です）。
• 39%のモバイルページには、CLS の要因となる非コンポジットアニメーションが含まれています。
• Webフォントをプリロードしているページはわずか11%であり、大多数のサイトがフォントの入れ替えによるレイアウトのズレに対して脆弱であることを意味します。

CLS はグローバルにおいて前年比で着実な改善を示していますが、データは依然としてサイズ指定のない画像と非コンポジットアニメーションが最も一般的な2つの原因であることを明らかにしています。これら2つの問題に対処するだけで、Webの大部分におけるレイアウトのズレを排除できるでしょう。

関連ガイド

このハブページでは、Cumulative Layout Shift について高いレベルで解説しています。CLS の問題の発見と修正に関する詳細で実践的なガイダンスについては、以下の専用ガイドをご覧ください：

• CLS の問題の発見と修正：ツールのチュートリアル、すべての原因に対するコードによる修正、およびクイック修正チェックリストを含む、完全なステップバイステップの診断ガイド。
• 画像とメディアがレイアウトのズレを引き起こす仕組み：サイズ指定のない画像、動画、iframe、アートディレクション、レスポンシブ画像、遅延読み込み、およびプレースホルダーによる CLS に関する決定版ガイド。
• 自動サイズ調整画像によるレイアウトのズレの修正：画像やレスポンシブなコンテナに適切な寸法を追加するための完全なチュートリアル。
• CSS トランジションによるレイアウトのズレの修正：レイアウトをトリガーする CSS アニメーションを特定し、コンポジットされた代替手段に置き換えます。
• スクロールでトリガーされるアニメーションと CLS：Lighthouse が捕捉できない CLS の原因と、その修正方法。
• Google Fonts のセルフホスティング：適切な font-display とプリロード戦略を備えたフォントをセルフホスティングすることで、フォントの読み込みによる CLS を削減します。
• Webフォントの読み込み中にテキストが確実に表示されるようにする：font-display およびフォントメトリクスの上書きを構成して、フォントの入れ替えによるレイアウトのズレを排除します。
• 完璧な Core Web Vitals を備えたチャットウィジェットの構築：CLS、INP、または LCP の悪化を招くことなくサードパーティのウィジェットを実装するためのケーススタディ。

すべての Core Web Vitals 指標と最適化戦略の完全な概要については、Core Web Vitals 概要にアクセスするか、究極の Core Web Vitals チェックリストを使用してサイトを監査してください。