CLS（Cumulative Layout Shift）

Cumulative Layout Shift（CLS）は、ページの視覚的安定性を測定するCore Web Vitals指標です。速度や応答性を測定するのではなく、読み込み中や読み込み後にページの表示コンテンツが予期せず移動するかどうかに焦点を当てています。ユーザーの操作なしに要素が移動するたびに、ブラウザはその移動の距離とサイズを記録します。これらの個別スコアはセッションウィンドウにグループ化され、最大のセッションウィンドウがそのページのCLSスコアとなります。スコア0.1以下は良好、0.1〜0.25は改善が必要、0.25以上は不良とされます。

予期しないレイアウトのずれはユーザー体験を直接損ないます。ボタンを押そうとしている読者が、コンテンツのジャンプにより誤って別の要素をタップしてしまうことがあります。ドキュメントをスクロールしている閲覧者は、読んでいた場所を完全に見失う可能性があります。こうしたフラストレーションは[直帰率](/glossary/bounce-rate)を増加させ、ページ滞在時間を短縮します。GoogleはCLSをランキングアルゴリズムの3つのCore Web Vitalsの1つとして使用しているため、視覚的安定性の低いページはエンゲージメントとSEOの両方でペナルティを受けます。フリップブックなどのインタラクティブコンテンツを埋め込むデジタルパブリッシャーにとって、CLSの制御は特に重要です。サードパーティの埋め込みはレイアウトのずれの最も一般的な原因の1つだからです。

FlipLinkのビューアは、ページコンテンツが完全に読み込まれる前にフリップブックコンテナの固定サイズを確保することで、CLSを最小限に抑えるよう設計されています。画像やインタラクティブ要素は事前に割り当てられたスペース内でレンダリングされるため、アセットの到着時にレイアウトがずれることはありません。Three.jsフリップブックレンダラーとPDF.jsドキュメントビューアはどちらも安定したフレームで初期化され、ページめくりアニメーションによるレイアウトジャンプを防ぎます。FlipLinkが生成する[レスポンシブ埋め込み](/features/sharing-and-distribution)コードはアスペクト比コンテナを使用し、ホストページ上で即座に正しいスペースを確保します。この設計は、ウェブサイトに埋め込まれたビューアとgo.fliplink.meでホストされるパブリケーションの両方に効果があります。

CLSは各シフトについて2つのコンポーネントで測定されます：**インパクトフラクション**（影響を受けるビューポートの割合）と**ディスタンスフラクション**（要素がビューポートに対してどれだけ移動したか）。単一フレームのレイアウトシフトスコアは、インパクトフラクションにディスタンスフラクションを乗じた値です。クリックやタップなどのユーザー入力から500ミリ秒以内に発生するシフトは、ユーザーがアクションに対する動きを期待しているため除外されます。Chrome DevTools、Lighthouse、PageSpeed Insights、Web Vitals JavaScriptライブラリのすべてがCLSをレポートします。Chrome User Experience Report（CrUX）のフィールドデータは、実際の訪問者から収集されたリアルワールドのCLSスコアを提供します。

CLSは最終スコアの計算に**セッションウィンドウ**アプローチを使用します。セッションウィンドウは、互いに1秒以内に発生するレイアウトシフトのグループで、最大ウィンドウ期間は5秒です。ページのCLSスコアは、すべてのシフトの合計ではなく、最大の単一セッションウィンドウです。この方法は2021年に更新され、コンテンツが段階的に読み込まれる長寿命ページやシングルページアプリケーションをより適切に反映するようになりました。CLSが高くなる一般的な原因には、幅と高さの属性がない画像、動的に挿入される広告やバナー、スタイルなしテキストのフラッシュ（FOUT）を引き起こすWebフォント、予約スペースなしで非同期に読み込まれるサードパーティの埋め込みがあります。

**「CLSは初期ページ読み込み時のみ重要。」** CLSは、遅延読み込みの画像、無限スクロールコンテンツ、動的に挿入される要素によって引き起こされるシフトを含め、ページのライフサイクル全体を通じてシフトを追跡します。ナビゲーション時にコンテンツを切り替えるシングルページアプリケーションは、トランジションが注意深く処理されない場合、CLSが蓄積される可能性があります。 **「CLSスコア0が目標。」** ゼロが理想的ですが、0.1以下のスコアは良好とみなされます。絶対ゼロを追求すると過剰な最適化につながる可能性があります。実用的な目標は、ユーザーにとってシフトを感知できないレベルに保つことです。 **「CLSはページの読み込み速度を測定する。」** CLSは速度とは無関係です。ページが1秒未満で読み込まれても、レンダリング中に要素がジャンプすれば、ひどいCLSスコアになる可能性があります。速度は[LCP](/glossary/lcp)やその他のタイミング指標で測定され、CLSでは測定されません。