優れたソフトウェアと実用的なチュートリアル
CLS とは何ですか?
CLS ページのライフサイクル中に発生するすべてのことを測定する事故レイアウトオフセットの最大シーケンスレイアウトシフトスコア。
表示される要素の位置がレンダリングされたフレーム間で変更されるたびに発生します。レイアウトオフセット 。
一連のレイアウトシフトとも呼ばれるセッションウィンドウは、1 秒未満の間隔で連続して発生する 1 つ以上の単一レイアウト シフトを指し、各シフトはウィンドウ全体で最大 5 秒間続きます。
最大チェーンとは、ウィンドウ内のすべてのレイアウト シフトの累積スコアが最大となるセッション ウィンドウを指します。
以前は、CLS はページのライフサイクル全体で発生したイベントを測定していました。すべての単一レイアウトシフトスコアどのツールが元の形式でも測定機能を提供しているかを確認するには、Web ツールセットにおける累積レイアウト オフセットの進化 。
良い CLS スコアとは何ですか?
優れたユーザーエクスペリエンスを提供するために、ウェブサイトはCLSスコアを0.1 ほとんどのユーザーに対して推奨目標を達成できるようにするには、適切な測定しきい値は次のとおりです。75パーセンタイルこのしきい値はモバイルデバイスとデスクトップデバイスの両方に適用されます
これらの推奨値の背後にある研究と方法論の詳細については、以下を参照してください。コアウェブメトリックのメトリックしきい値を定義する
レイアウトシフトの詳細
レイアウトオフセットは以下によって決定されます。レイアウト不安定性API要素の開始位置が視覚領域に表示される限り定義されます（たとえば、要素がデフォルトのライティングモードAPIは、 レイアウトシフト エントリ。このような要素は不安定な要素。
レイアウトシフトとしてカウントされるのは、既存要素の開始位置の変更のみであることに注意してください。DOMに新しい要素が追加された場合や、既存要素のサイズが変更された場合、その変更によって他の表示要素の開始位置が変更されない限り、レイアウトシフトとしてカウントされません。
レイアウトシフトスコア
ブラウザは計算中レイアウトシフトスコア、表示領域のサイズと、レンダリングされた 2 つのフレーム間の表示領域を確認します。不安定な要素レイアウト シフト スコアは、このシフトの 2 つの測定値の積です。インパクトスコアそして距離スコア(両方とも以下で定義されています)。
レイアウトシフトスコア = 影響スコア * 距離スコア
インパクトスコア
インパクトスコア測定不安定な要素フレーム間の表示領域への効果。
前のフレームそして現在のフレームすべて不安定な要素設定された可視領域（全体の可視領域の一部）は現在のフレームですインパクトスコア。
上の図では、あるフレームで要素が可視領域の半分を占めています。そして次のフレームでは、要素は可視領域の高さの25%だけ下に移動します。赤い点線の四角形は、2つのフレームにおける要素の可視領域セットを表しています。この例では、セットは総可視領域の75%を占めているため、インパクトスコア0.75です。
距離スコア
レイアウト シフト スコアの計算のもう 1 つの部分では、不安定な要素がビューポートに対してどの程度シフトしたかを測定します。距離スコアあらゆる不安定な要素1 フレーム内で移動した最大距離 (水平または垂直) をビューポートの最大寸法 (幅または高さのいずれか大きい方) で割った値。
上記の例では、ビューポートの最大寸法は高さであり、不安定な要素はビューポートの高さの25%だけずれているため、距離スコア0.25です。
この例では、インパクトスコア0.75です。距離スコア0.25なのでレイアウトシフトスコア0.75 * 0.25 = 0.1875 です。
当初、レイアウトシフトスコアはインパクトスコア計算を実行します。距離スコアこれは、小さな変位に対して大きな要素が過度にペナルティを受けるのを避けるためです。
次の例は、既存の要素にコンテンツを追加するとレイアウト シフト スコアにどのような影響が及ぶかを示しています。
「Click Me!」ボタンは、黒いテキストが書かれた灰色のボックスの下部に取り付けられており、白いテキストが書かれた緑のボックスを押し下げています (部分的に表示領域の外側になっています)。
この例では、灰色のボックスのサイズは変化しますが、開始位置は変化しません。そのため、灰色のボックスは不安定な要素。
「Click me!」ボタンは最初は DOM 内になかったため、開始位置は変更されませんでした。
しかし、緑のボックスの開始位置は変化しますが、緑のボックスの一部はすでに可視領域外にあるため、インパクトスコア不可視領域は考慮されません。2つのフレーム内の緑色のボックスの可視領域（赤い破線の四角で示されています）の集合は、最初のフレームの緑色のボックスの領域と同じで、可視領域の50%です。インパクトスコア0.5です。
距離スコア紫色の矢印で示されています。緑色のボックスが下方向に移動する距離は、可視領域の約14%なので、距離スコア0.14です。
レイアウトシフト率は 0.5 x 0.14 = 0.07 です。
最後の例は複数の不安定な要素状況：
上記の最初のフレームには、動物の名前を検索するAPIリクエストから得られた4つの結果がアルファベット順に表示されています。2番目のフレームでは、ソートされたリストにさらに多くの結果が追加されています。
リストの最初の項目（「Cat」）の開始位置は2つのフレーム間で変化していないため、安定しています。同様に、リストに追加された新しい項目は以前はDOMに存在しなかったため、これらの項目の開始位置は変化していません。ただし、「Dog」、「Horse」、「Zebra」の各項目の開始位置はすべて変化しているため、安定しています。不安定な要素。
同様に、赤い点線の四角形はこれら3つを表しています不安定な要素この例では、前のフレームと次のフレームの領域は、可視領域の約38%を占めます（インパクトスコアは0.38です。
矢印は不安定な要素開始位置からの相対的な変位距離。青い矢印で示される「Zebra」要素の変位距離は最大で、表示領域の高さの約30%です。距離スコア0.3です。
レイアウトシフトスコアは0.38 x 0.3 = 0.1172です。
予想されるレイアウトシフトと予想外のレイアウトシフト
レイアウトシフトは必ずしも悪いことではありません。実際、多くの動的Webアプリケーションでは、ページ要素の開始位置が頻繁に変更されます。
ユーザーが開始するレイアウトシフト
レイアウトシフトは、ユーザーがそれを予期していない場合にのみ問題となります。言い換えれば、ユーザーインタラクション（リンクのクリック、ボタンのタップ、検索ボックスへの入力など）に反応して発生するレイアウトシフトは、ユーザーがそのインタラクションと十分に近いタイミングで発生し、その前後関係を明確に把握できるのであれば、一般的には問題ありません。
例えば、ユーザーインタラクションによってネットワークリクエストが発生し、その完了に時間がかかる可能性がある場合、リクエストの完了中にレイアウトがずれるのを防ぐため、すぐにスペースを確保して読み込み中インジケーターを表示するのが効果的です。ユーザーが読み込み中に気づかなかったり、リソースがいつ準備完了するか分からなかったりすると、待っている間に他のコンテンツをクリックしようとする可能性があります。
ユーザー入力から500ミリ秒以内に発生するレイアウトシフトは、最近の入力があったこれらのオフセットを計算から除外するためのフラグ。
注: hadRecentInputフラグは、タッチ、クリック、キー押下などの離散的な入力イベントにのみ適用されます。スクロール、ドラッグ、ピンチズームなどの連続的な操作は「最近の入力」としてカウントされません。詳細については、以下をご覧ください。レイアウト不安定性仕様。
アニメーションとトランジション
アニメーションやトランジションは、適切に使用すれば、ユーザーを驚かせることなくページコンテンツを更新できる優れた方法です。ページコンテンツが突然、予期せぬ形で切り替わると、ほとんどの場合、ユーザーエクスペリエンスが低下します。しかし、コンテンツが徐々に、そして自然に、ある位置から次の位置へと移動すれば、ユーザーは現在の状況をよりよく理解し、状態間の変化をスムーズに理解できるようになります。
CSS 変身このプロパティを使用すると、レイアウトシフトをトリガーせずに要素をアニメーション化できます。
- 代わりに transform: scale() を使用して、高さと幅のプロパティを調整します。
- 要素を移動する必要がある場合は、代わりに transform: translate() を使用して、上、右、下、または左のプロパティを調整できます。
CLSの測定方法
CLSは研究室測定または実際の以下のツールで測定および使用できます。
注: Labsツールは通常、人工的な環境でページを読み込むため、ページの読み込み中に発生するレイアウトシフトのみを測定できます。そのため、Labsツールが特定のページについて報告するCLS値は、実際のユーザーが実際に体験する値よりも低くなる可能性があります。
測定ツール
- Chrome ユーザー エクスペリエンス レポート
- PageSpeed Insights ウェブページ速度測定ツール
- Search Console（コアウェブ指標レポート）
- web-vitals JavaScript ライブラリ
実験器具
JavaScript で CLS を測定する
JavaScriptでCLSを測定するには、レイアウト不安定性API次の例は、パフォーマンスオブザーバー予期しないレイアウトシフトエントリを監視し、エントリをセッションごとにグループ化し、最大セッション値を記録し、最大セッション値が変更されたときにレコードを更新します。
clsValue を 0 とします。
clsEntries = [] とします。
sessionValue を 0 とします。
sessionEntries = [] とします。
新しいパフォーマンスオブザーバー((エントリリスト) => {
for (entryList.getEntries() の定数エントリ) {
// 最新のユーザー入力フラグのないレイアウト オフセットのみをカウントします。
エントリに最近の入力があった場合
const firstSessionEntry = sessionEntries[0];
const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
// エントリと前のエントリ間の時間が1秒未満で、
// 最初のエントリとセッションの間の時間間隔が5秒未満の場合、エントリは
// 現在のセッションに含めます。それ以外の場合は、新しいセッションを開始します。
if (セッション値 &&
エントリ.開始時間 - 最後のセッションエントリ.開始時間 < 1000 &&
エントリ.開始時間 - firstSessionEntry.開始時間 < 5000) {
セッション値 += エントリ値;
sessionEntries.push(エントリ);
} それ以外 {
セッション値 = エントリ値;
sessionEntries = [エントリ];
}
// 現在のセッション値が現在のCLS値より大きい場合、
// 次に、CLS と関連エントリを更新します。
if (セッション値 > cls値) {
clsValue = セッション値;
clsEntries = セッションエントリ;
// 更新された値 (およびそのエントリ) をコンソールに記録します。
console.log('CLS:', clsValue, clsEntries)
}
}
}
}).observe({type: 'layout-shift', buffered: true});
警告：上記のコードはCLSの計算と記録の基本的な方法を示しています。ただし、CLSを正確に測定し、Chrome ユーザー エクスペリエンス レポート 測定値が(CrUX)の値と一致する場合、測定はより複雑になります。詳細は以下をご覧ください。
ほとんどの場合、ページがアンロードされたときの現在の CLS 値がそのページの最終的な CLS 値になりますが、いくつか重要な例外があります。
次のセクションでは、API がレポートする内容とメトリックの計算方法の違いについて説明します。
指標とAPIの違い
- ページがバックグラウンドで読み込まれる場合、またはブラウザが何かを描画する前にページがバックグラウンドに移動される場合、ページは CLS 値を報告しません。
- ページが通過した場合ラウンドトリップキャッシュページが復元された場合、ユーザーにとっては異なるページ訪問エクスペリエンスとなるため、そのページの CLS 値はゼロにリセットされる必要があります。
- APIはiframe内のオフセットに基づいてレイアウトシフトエントリを報告しませんが、CLSを正しく測定するにはこれらのオフセットを考慮する必要があります。子フレームはAPIを使用して、これらのオフセットレイアウトシフトエントリを親フレームに報告することができます。重合。
CLS はページのライフサイクル全体を測定するため、上記の例外に加えて、このメトリックにはいくつかの追加の複雑さがあります。
- ユーザーはとてもタブを長期間（数日、数週間、数か月）開いたままにしておく。実際には、ユーザーがタブを一度も閉じない場合もあります。
- モバイル OS では、ブラウザは通常、バックグラウンド タブのページ アンロード コールバックを実行しません。これは、「最終」値を報告するのが困難になるためです。
このような状況に対処するには、ページがアンロードされているときでも、ページがバックグラウンドにあるときは常に CLS を報告する必要があります (可視性変更イベントデータを受信する分析システムは、バックエンドで最終的な CLS 値を計算する必要があります。
開発者は、これらのケースをすべて覚えて自分で対処する代わりに、web-vitals JavaScript ライブラリCLS を測定するために、ライブラリは上記のすべてのケースを独自に処理します。
'web-vitals' から {getCLS} をインポートします。
// CLSを報告する必要があるすべてのケース
// 測定して記録します。
コンソールログを取得します。
JavaScript で CLS を測定する方法の完全な例については、(getCLS) のソース コードを参照してください。
場合によっては（クロスドメインのiframeなど）、JavaScriptではLCPを測定できません。詳細については、web-vitalsライブラリをご覧ください。制限一部。
CLSを改善する方法
ほとんどのサイトでは、次のガイドラインに従うことで、予期しないレイアウトの変化をすべて回避できます。
- 画像や動画の要素には必ずサイズ属性を含めてください。CSS アスペクト比コンテナこの方法により、ブラウザは画像の読み込み中にドキュメント内に適切な量のスペースを確保します。また、サイズなしメディア機能ポリシーこの動作は、機能ポリシーをサポートするブラウザで強制されます。
- ユーザーインタラクションへの応答でない限り、既存のコンテンツの上にコンテンツを挿入しないでください。これにより、レイアウトの変化が予測どおりに行われるようになります。
- レイアウトシフトを引き起こすプロパティアニメーションよりも、トランジションアニメーションを優先してください。アニメーショントランジションの目的は、状態間のコンテキストの連続性を確保することです。
CLSの改善方法の詳細については、以下を参照してください。CLSの最適化そしてレイアウトシフトのデバッグ。
