このページは Cloud Translation API によって翻訳されました。

レイアウトシフトをデバッグする

レイアウトシフトを特定して修正する方法を学習します。

Katie Hempenius

この記事の前半では、レイアウトシフトをデバッグするためのツール、 2 部では、分析を行うときに使う思考プロセスをレイアウトシフトの原因の特定に役立ちます。

ツール

Layout Instability API

Layout Instability API はレイアウトシフトを測定してレポートするためのブラウザメカニズムです。以下のためのすべてのツールレイアウトシフトのデバッグ（DevTools を含む）は、 Layout Instability APIただし、Layout Instability API を直接使用すると、優れたデバッグツールであり、その柔軟性に優れています。

用途

同じコードスニペットを Cumulative Layout Shift（CLS）のレイアウトシフトのデバッグに使用できます。以下のスニペットは、レイアウトに関する情報を記録します。コンソールに移動できますこのログを調べると、レイアウトシフトがいつ、どこで、どのように発生したかという問題です。

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

このスクリプトを実行するときは、次の点に注意してください。

buffered: true オプションは、 PerformanceObserver ブラウザーのパフォーマンスエントリバッファオブザーバーのスコープより前に作成されたパフォーマンスエントリの初期化します。その結果、PerformanceObserver はレイアウトをレポートします。初期化前と初期化後に発生したシフトがすべて記録されます。保持するコンソールログを調べることをおすすめします。初期のレイアウトシフトでは、報告のバックログを反映しているので、調整できます。
パフォーマンスへの影響を避けるため、PerformanceObserver はメインスレッドがレイアウトシフトについて報告するためにアイドル状態です。その結果メインスレッドがビジー状態にある場合、ログに記録されます。
このスクリプトは、ユーザー入力から 500 ミリ秒以内に発生したレイアウトシフトを無視します。 CLS にカウントされません

レイアウトシフトに関する情報は、次の 2 つの API を組み合わせて報告します。 LayoutShift、 LayoutShiftAttribution インターフェースです。これらの各インターフェースについては、以降のセクションで説明します

LayoutShift

各レイアウトシフトは、LayoutShift インターフェースを使用して報告されます。内容エントリは次のようになります。

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

上記のエントリはレイアウトシフトを示しており、レイアウトシフトの間に 3 つの DOM 要素が変化しています。なります。この特定のレイアウトシフトのレイアウトシフトのスコアは 0.175 でした。

これらは、最も関連性の高い LayoutShift インスタンスのプロパティです。レイアウトシフトのデバッグ:

プロパティ	説明
`sources`	`sources` プロパティは、レイアウトシフト中に移動した DOM 要素をリストします。この配列には最大 5 つのソースを含めることができます。レイアウトシフトの影響を受ける要素が 5 つ以上ある場合は、レイアウトシフトの影響が大きい上位 5 つ（レイアウトの安定性への影響で測定）が報告されます。この情報は、LayoutShiftAttribution インターフェースを使用して報告されます（詳しくは後述）。
`value`	`value` プロパティは、特定のレイアウトシフトのレイアウトシフトのスコアをレポートします。
`hadRecentInput`	`hadRecentInput` プロパティは、ユーザー入力から 500 ミリ秒以内にレイアウトシフトが発生したかどうかを示します。
`startTime`	`startTime` プロパティは、レイアウトシフトが発生したタイミングを示します。`startTime` はミリ秒単位で示され、ページの読み込みが開始された時間を基準に測定されます。
`duration`	`duration` プロパティは常に `0` に設定されます。このプロパティは `PerformanceEntry` インターフェースから継承されます（`LayoutShift` インターフェースは `PerformanceEntry` インターフェースを拡張します）。ただし、期間の概念はレイアウトシフトイベントには適用されないため、`0` に設定されます。`PerformanceEntry` インターフェースの詳細については、仕様をご覧ください。

LayoutShiftAttribution

LayoutShiftAttribution インターフェースは 1 つの DOM の 1 回のシフトを記述する要素です。レイアウトシフト中に複数の要素がシフトした場合、sources プロパティに複数のエントリが含まれています。

たとえば、以下の JSON は、1 つのソース（ <div id='banner'> DOM 要素の y: 76 から下へのシフト y:246。

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

node プロパティは、シフトした HTML 要素を示します。カーソルを合わせるとプロパティが表示され、対応するページ要素がハイライト表示されます。

previousRect プロパティと currentRect プロパティは、画像のサイズと位置を報告します。作成されます。

x 座標と y 座標は、x 座標と y 座標をレポートします。各要素の左上隅に表示されます。
width プロパティと height プロパティは、それぞれ幅と高さを報告します。渡します。
top、right、bottom、left プロパティは x または y をレポートする要素のエッジに対応する座標値。その他の単語の場合、top の値は y と等しくなります。bottom の値は次と等しい y+height。

previousRect のすべてのプロパティが 0 に設定されている場合は、要素にビューにシフトしましたcurrentRect のすべてのプロパティが 0 に設定されている場合は、次のようになります。要素がビュー外にシフトしたことです

注意: 現在のところ、Layout Instability API は、移動した要素の前に別の要素が配置されたために表示されなかった要素を無視しません。一部の要素をユーザーに表示する前にレイアウトを実行する必要がある場合、レイアウトシフトを回避するには、display: none、visibility: hidden、または opacity: 0 を使用します。

これらの出力を解釈する際に理解しておくべき最も重要なことの一つは、 ソースとしてリストされている要素が、レイアウトシフトです。ただし、これらの要素は間接的に問題の「根本原因」に関連する軽減できます。いくつか例を挙げましょう。

例 1

このレイアウトシフトは、1 つのソース（要素 B）とともにレポートされます。ただし、このレイアウトシフトの根本原因は、要素 A のサイズ変更です。

要素の寸法の変化によるレイアウトシフトの例

例 2

この例のレイアウトシフトは、2 つのソース（要素 A）によって報告されます。要素 B を指定しますこのレイアウトシフトの根本的な原因は、要素 A から抽出されます。

要素の位置の変化によるレイアウトシフトの例

例 3

この例のレイアウトシフトは、1 つのソース（要素 B）でレポートされます。要素 B の位置を変更した結果、このレイアウトシフトが発生しています。

要素の位置の変化によるレイアウトシフトの例

例 4

要素 B のサイズは変化しますが、レイアウトシフトはありません。

要素のサイズが変化するがレイアウトシフトを発生させない例

Layout Instability API が DOM の変更を報告する仕組みのデモをご覧ください。

DevTools

パフォーマンスパネル

DevTools の [Performance] パネルの [Experience] ペインには、特定のパフォーマンストレース中に発生するレイアウトシフト（発生した場合も含む） 500 ミリ秒以内に応答するため、CLS にはカウントされません。 [リニューアル版] パネルのハイライト表示で、特定のレイアウトシフトにカーソルを合わせます。該当する DOM 要素。

DevTools の [Network] パネルに表示されたレイアウトシフトのスクリーンショット

レイアウトシフトの詳細を表示するには、[レイアウトシフト] をクリックして [Summary] ドロワーを開きます。要素のディメンションに加えられた変更のリスト [width, height] の形式を使用します。要素の位置の変更がリストされます。 [x,y] の形式を使用します。[Had 最近の入力] プロパティは、レイアウトシフトが、ユーザー操作から 500 ミリ秒以内に発生した。

DevTools の [Summary] のスクリーンショットLayout Shift のタブ

レイアウトシフトの期間に関する情報は、[イベントログ] タブで確認できます。レイアウトシフトの所要時間は、赤色のレイアウトシフトの長方形の長さの [Experience] ペイン。

DevTools の「イベントログ」のスクリーンショットLayout Shift のタブ

パフォーマンスパネルの使用の詳細については、パフォーマンス分析リファレンスをご覧ください。

レイアウトシフト領域をハイライト表示する

レイアウトシフトの領域をハイライト表示すると、レイアウトシフトの場所とタイミングを一目ですばやく把握できる表示されます。

DevTools で Layout Shift Regions を有効にするには、[Settings] >その他のツール > レンダリング >Layout Shift Regions を開いてから、デバッグするページを更新します。レイアウトシフトの領域は紫色で一時的にハイライト表示されます。

レイアウトシフトの原因を特定するための思考プロセス

以下の手順でレイアウトシフトの原因を特定できますレイアウトシフトがいつ、どのように発生するかは問いません。このステップはただし、Lighthouse を使用すると、最初のページ読み込み中に発生したレイアウトシフトのみを特定できます。インまた、Lighthouse ではレイアウトの一部の原因に対する提案のみ提供できます。シフト（たとえば、明示的な幅と高さがない画像要素）が含まれます。

レイアウトシフトの原因を特定する

レイアウトシフトは、次のような場合に発生することがあります。

DOM 要素の位置の変更
DOM 要素のサイズの変更
DOM 要素の挿入または削除
レイアウトをトリガーするアニメーション

特に、シフトした要素の直前の DOM 要素は「原因」に関与している可能性が最も高いレイアウトシフトです。したがってレイアウトシフトが発生した理由を調べるには、以下を検討します。

前の要素の位置や寸法は変化しましたか？
シフトした要素の前に DOM 要素が挿入または削除されたか。
シフトした要素の位置は明示的に変更されましたか？

前の要素によってレイアウトシフトが起こらなかった場合は、次で検索を続けます。近接する他の要素も考慮する必要があります。

また、レイアウトシフトの方向と距離からもヒントになります。特定します。たとえば、大幅に下降したということは、 DOM 要素の挿入ではない場合、レイアウトシフトが 1 ピクセルや 2 ピクセルであれば、競合する CSS スタイルの適用、または競合する CSS スタイルを使用します。

フォントの入れ替えによるレイアウトシフトを示す図 — </ph> この例では、フォントの入れ替えにより、ページ要素が 5 ピクセル上方向にシフトしています。

レイアウトシフトを引き起こす要因として最も頻繁に発生する動作には、次のようなものがあります。 events:

要素の位置の変更（他の要素の移動によるものではない）

この種の変化は、多くの場合、次のような結果によって発生します。

遅れて読み込まれるスタイルシート、または以前に宣言されたスタイルを上書きするスタイルシート。
アニメーションと切り替え効果。

要素の寸法の変更

この種の変化は、多くの場合、次のような結果によって発生します。

遅れて読み込まれるスタイルシート、または以前に宣言されたスタイルを上書きするスタイルシート。
width 属性と height 属性のない画像と iframe 「スロット」表示されます。
width 属性または height 属性のないテキストブロックは、表示されます。

DOM 要素の挿入または削除

多くの場合、次のような原因が考えられます。

広告やその他のサードパーティ埋め込みの挿入。
バナー、アラート、モーダルの挿入。
無限スクロールや、上部に追加コンテンツを読み込むその他の UX パターンできます。

レイアウトをトリガーするアニメーション

トリガーされるアニメーション効果には、あります。共通例として、DOM 要素が「アニメーション化」されている場合プロパティをインクリメントして CSS を使用せず、top や left など transform プロパティです。高パフォーマンスの CSS アニメーションを作成する方法をご覧ください。

レイアウトシフトを再現する

再現できないレイアウトシフトは修正できません。シンプルでありながらサイトのレイアウトを把握するのに最も効果的な方法目標に到達するまでに 5 ～ 10 分かかります。レイアウトシフトをトリガーできます。その際はコンソールを開いたままにして、レイアウトシフトに関するレポートを作成するための Layout Instability API

レイアウトシフトを見つけにくい場合は、この演習を接続速度に応じて異なります特に、低速の接続速度を測定すると、レイアウトシフトを簡単に特定できます。また debugger ステートメントを使用すると、レイアウトを簡単にステップ実行できるようになります。できます。

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

最後に、開発中に再現できないレイアウトの問題については、 Layout Instability API とフロントエンドロギングツールを組み合わせて使用する場合問題に関するより詳細な情報を収集できます。チェックアウトページ上で移動された最大要素をトラッキングするコードのサンプルをご覧ください。