Cumulative Layout Shift(CLS)は、ユーザーが予期しないレイアウトシフトを経験する頻度を定量化するのに役立つため、視覚的な安定性を測定するための重要なユーザー中心の指標です。CLSが低いと、ページが 快適になります。 ページ上で突然何かが変わったときにオンラインで記事を...
Cumulative Layout Shift(CLS)は、ユーザーが予期しないレイアウトシフトを経験する頻度を定量化するのに役立つため、視覚的な安定性を測定するための重要なユーザー中心の指標です。CLSが低いと、ページが 快適になります。
ページ上で突然何かが変わったときにオンラインで記事を読んだことがありますか?警告なしに、テキストが移動し、場所を失いました。さらに悪いことに、リンクまたはボタンをタップしようとしていますが、指が着地する直前に(BOOM)、リンクが移動し、別の何かをクリックすることになります。
ほとんどの場合、これらの種類の経験は単に迷惑ですが、場合によっては、実際の損害を引き起こす可能性があります。
通常、ページコンテンツの予期しない移動は、リソースが非同期で読み込まれるか、DOM要素が既存のコンテンツの上のページに動的に追加されるために発生します。原因としては、サイズが不明な画像や動画、フォールバックよりも大きくまたは小さくレンダリングされるフォント、動的にサイズ変更されるサードパーティの広告やウィジェットなどが考えられます。
この問題をさらに問題にしているのは、開発におけるサイトの機能が、ユーザーのエクスペリエンスとはかなり異なる場合が多いことです。パーソナライズされたコンテンツやサードパーティのコンテンツは、多くの場合、開発時と本番環境で同じように動作しません。テストイメージは、開発者のブラウザキャッシュにすでに存在していることが多く、ローカルで実行されるAPI呼び出しは非常に高速であるため、遅延は目立ちません。
Cumulative Layout Shift(CLS)メトリックは、実際のユーザーで発生する頻度を測定することにより、この問題に対処するのに役立ちます。
CLSとは何ですか?
CLSは、ページの存続期間全体で発生するすべての予期しないレイアウトシフトについて 、すべての個々のレイアウトシフトスコアの合計を測定します。
レイアウトシフトは可視要素は、次の1つのレンダリングされたフレームから、その位置を変更いつでも起こります。
CLSスコアを良くするためには?
優れたユーザーエクスペリエンスを提供するために、サイトはCLSスコアが0.1未満になるように努力する必要があります。ほとんどのユーザーでこの目標を確実に達成するために、測定するのに適したしきい値は、モバイルデバイスとデスクトップデバイス間でセグメント化されたページ読み込みの75パーセントです。
レイアウトが詳細にシフト
レイアウトシフトは、レイアウト不安定性APIによって定義されます。このAPIlayout-shift は、ビューポート内に表示されている要素が2つのフレーム間で開始位置(たとえば、デフォルトの書き込みモードでの上下の位置)を変更するたびにエントリを報告します。このような要素は不安定な要素と見なされます。
レイアウトシフトは、既存の要素が開始位置を変更した場合にのみ発生することに注意してください。新しい要素がDOMに追加された場合、または既存の要素のサイズが変更された場合、その変更によって他の表示されている要素の開始位置が変更されない限り、レイアウトシフトとしてカウントされません。
レイアウトシフトスコア
レイアウトシフトスコアを計算するために、ブラウザはビューポートのサイズと、レンダリングされた2つのフレーム間のビューポート内の不安定な要素の動きを調べます。レイアウトシフトスコアは、その動きの2つの測定値、つまり衝撃の割合と距離の割合(両方とも以下に定義)の積です。
layout shift score = impact fraction * distance fraction
影響の割合
衝撃フラクション措置がどのように不安定な要素が2つのフレーム間のビューポートの領域に影響を与えます。
前のフレーム と現在のフレームのすべての不安定な要素の可視領域の和集合(ビューポートの総面積の一部として)は、現在のフレームの影響の割合です。
上の画像には、1つのフレームでビューポートの半分を占める要素があります。次に、次のフレームで、要素がビューポートの高さの25%下にシフトします。赤い点線の長方形は、両方のフレームでの要素の表示領域の結合を示します。この場合、ビューポート全体の75%であるため、その 影響の割合は0.75です。
距離分数
レイアウトシフトスコア方程式の他の部分は、ビューポートを基準にして不安定な要素が移動した距離を測定します。距離画分は 任意の最大距離であり、不安定な要素が(いずれか大きい方の幅または高さ)ビューポートの最大寸法で割ったフレーム(水平または垂直)に移動しました。
上記の例では、最大のビューポートの寸法は高さであり、不安定な要素はビューポートの高さの25%移動しているため、 距離の割合は0.25になります。
したがって、この例では、影響の割合はで0.75あり、距離の割合 は0.25であるため、レイアウトシフトスコアは0.75 * 0.25 = 0.1875です。
次の例は、既存の要素にコンテンツを追加することがレイアウトシフトスコアにどのように影響するかを示しています。
「Click Me!」ボタンは黒いテキストで灰色のボックスの下部に追加され、白いテキストで緑色のボックスを押し下げます(そして部分的にビューポートから外れます)。
この例では、灰色のボックスのサイズは変更されますが、開始位置は変更されないため、不安定な要素ではありません。
「Click Me!」ボタンは以前はDOMになかったため、開始位置も変更されません。
ただし、緑色のボックスの開始位置は変更されますが、ビューポートから部分的に移動されているため、影響の割合を計算するときに非表示領域は考慮されません。両方のフレームの緑色のボックスの表示領域(赤い点線の長方形で示されている)の結合は、最初のフレームの緑色のボックスの領域と同じで、ビューポートの50%です。インパクト画分があります0.5。
距離の割合は、紫色の矢印で示されています。緑のボックスがビューポートの約14%下に移動したため、距離の割合は0.14です。
レイアウトシフトスコアは0.5 x 0.14 = 0.07です。
上記の最初のフレームには、動物に対するAPIリクエストの4つの結果があり、アルファベット順に並べ替えられています。2番目のフレームでは、さらに結果がソート済みリストに追加されます。
リストの最初の項目(「猫」)はフレーム間で開始位置を変更しないため、安定しています。同様に、リストに追加された新しいアイテムは以前はDOMになかったため、開始位置も変更されません。ただし、「Dog」、「Horse」、「Zebra」のラベルが付いたアイテムはすべて開始位置をシフトするため、不安定な要素になります。
再び、赤色、点線の長方形は、これら3つの組合表す不安定要素を、この場合にはビューポートの面積(の約38%である、領域の前後’衝撃画分の0.38)。
矢印は、不安定な要素が開始位置から移動した距離を表します。青い矢印で表される「ゼブラ」要素は、ビューポートの高さの約30%だけ最も移動しました。これにより、この例では 距離の分数になり0.3ます。
レイアウトシフトスコアは0.38 x 0.3 = 0.1172です。
予期されるレイアウトと予期しないレイアウトのシフト
すべてのレイアウトシフトが悪いわけではありません。実際、多くの動的Webアプリケーションは、ページ上の要素の開始位置を頻繁に変更します。
ユーザーが開始するレイアウトシフト
レイアウトシフトは、ユーザーが予期していない場合にのみ問題になります。一方、ユーザーの操作(リンクのクリック、ボタンの押下、検索ボックスへの入力など)に応じて発生するレイアウトのシフトは、関係が相互作用の近くで発生する限り、通常は問題ありません。ユーザーに明確にします。
たとえば、ユーザーの操作によってネットワークリクエストがトリガーされ、完了するまでに時間がかかる場合は、すぐにスペースを作成し、読み込みインジケーターを表示して、リクエストの完了時に不快なレイアウトシフトを回避することをお勧めします。ユーザーが何かが読み込まれていることに気付いていない場合、またはリソースの準備ができる時期がわからない場合は、待機中に別の何かをクリックしようとする可能性があります。何かが下から移動する可能性があります。
ユーザー入力から500ミリ秒以内に発生するレイアウトシフトには hadRecentInput フラグが設定されるため、計算から除外できます。
アニメーションとトランジション
アニメーションとトランジションは、うまく行われると、ユーザーを驚かせることなくページのコンテンツを更新するための優れた方法です。ページ上で突然予期せずにシフトするコンテンツは、ほとんどの場合、ユーザーエクスペリエンスを低下させます。ただし、ある位置から次の位置に徐々に自然に移動するコンテンツは、ユーザーが何が起こっているのかをよりよく理解し、状態の変化の間をガイドするのに役立つことがよくあります。
CSStransform プロパティを使用すると、レイアウトシフトをトリガーせずに要素をアニメーション化できます。
heightおよびwidthプロパティを変更する代わりに、transform: scale()を使用します。
要素を移動するにはtop, right, bottomまたはleftプロパティを変更せず、 代わりにtransform: translate()します。

最新ニュース
はてなブックマーク - 新着エントリー - 総合 新着エントリー
- イオン、カカオ使わず代替チョコ 原料はひまわりの種 - 日本経済新聞on 2025年6月10日 at AM 7:53
イオンは10日、カカオ豆を使わずに作った代替チョコレートをプライベートブランド(PB)「トップバリュ」で発売したと発表した。カカオの代わりにひまわりの種を原料として使い、チョコの香りや味を再現した。カカオ不足や価格の高止まりが続くなか、安定調達できる代替品として販売する。全国の「イオン」「イオンスタ...
- JR東に“ブルートレイン”復活か 27年春に新型夜行特急on 2025年6月10日 at AM 7:21
JR東日本は6月10日、首都圏と北東北エリアを結ぶ新たな夜行特急列車を2027年春に導入すると発表した。車両全体を2つの青で塗装し、1号車側には「ブルートレインの記憶を受け継ぐ明るい青」を使用するとしている。 E657系の特急型車両10両1編成を全席グリーン車指定席の個室タイプに改造する。個室は定員1~4人のタイプが...
- JR東日本、新たな夜行特急列車を導入へ | 鉄道ニュース | 鉄道新聞 - 鉄道ニュース・子鉄イベント情報on 2025年6月10日 at AM 7:12
ニュース速報動画 新たな夜行特急列車イメージ(JR東日本ニュースリリースより) 日時など デビュー時期:2027年春予定 運行エリア:首都圏エリア~北東北エリアなどを予定 詳しくはこちら(公式リンク) JR東日本ニュースリリース ひとこと解説 車内イメージ(JR東日本ニュースリリースより) 東日本エリアで久しぶりに...
- macOS 26 Tahoeでは「Spotlight」の機能が大幅にアップデートされ、Raycastのようにアクションやクイックキー、クリップボード履歴の表示が利用可能に。on 2025年6月10日 at AM 6:55
macOS 26 Tahoeでは、Spotlightが大幅にアップデートされRaycastやAlfredのようにアクションやクイックキーをサポートするそうです。詳細は以下から。 Appleは日本時間2025年06月10日午前02時から世界開発者会議(WWDC25)の基調講演を行い、今年の秋にリリースを予定している「macOS 26 Tahoe」を発表しましたが、このTah...
- グレタさんらは「ハマスの虐殺動画見るのを拒否」とイスラエル国防相 | 毎日新聞on 2025年6月10日 at AM 6:40
イスラエルのカッツ国防相は10日、地中海で拘束したスウェーデン出身の環境活動家、グレタ・トゥーンベリさんらに対し、パレスチナ自治区ガザ地区のイスラム組織ハマスによる虐殺の動画を見せたと明らかにした。イスラエルメディアが報じた。グレタさんらは途中で見るのを拒否したとし、カッツ氏は「彼らは真実から目を...
- 国民民主終わったな感がすごいon 2025年6月10日 at AM 6:34
大阪でやってた国民民主党の街頭演説、ちょうど時間近くに用事もあったのでなんとなく見に行ってきた。 以前来た時も人凄かったし、支持率下がっている今玉木が来るってことで、どんなもんかと思って。 直前に自民党青年団も演説してたけど、そっちは聞いてる人は皆無。携帯いじりながら近くに立ってる人はいたけど。 大...
- 「急がない旅」のニーズにお応えして「東日本のんびり旅パス」を発売します。~新幹線・特急列車では見逃してしまう地域の魅力を発見する旅の提案~on 2025年6月10日 at AM 5:57
フリーエリア図 2 0 2 5 年 6 月 1 0 日 東日本旅客鉄道株式会社 「急がない旅」のニーズにお応えして「東日本のんびり旅パス」を発売します。 ~新幹線・特急列車では見逃してしまう地域の魅力を発見する旅の提案~ 「東日本のんびり旅パス」 フリーエリア内の普通・快速列車の普通車自由席及び BRT が土休日を含む連...
- 選択的夫婦別姓めぐり 衆議院法務委員会で参考人質疑 | NHKon 2025年6月10日 at AM 5:46
選択的夫婦別姓をめぐり、衆議院法務委員会で参考人質疑が行われ、制度導入に向けて早期の法整備を求める意見の一方、生活のうえでの不便は旧姓の通称使用の拡大で解消できるという主張が出されました。 選択的夫婦別姓をめぐっては、立憲民主党と国民民主党が、それぞれ制度の導入に向けた民法の改正案を、日本維新の会...