Layout Instability API を使ってレイアウト・シフトを検出する

1. Layout Instability API について
2. サンプルコード
3. インターフェイス情報
4. デモページ
5. 参考

1. Layout Instability API について

Layout Instability API を使うと、レイアウト・シフトを検出することができます。

このAPIを使ったサンプルコードを紹介します。

※ この API を実装していないメジャーなブラウザもあるため、Chrome か Edge の利用をお勧めします（参考：LayoutShift API | Can I use…）。

2. サンプルコード

index.html 内の <script> タグに以下を記述します。

JavaScript

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

画面上でレイアウト・シフトが発生したら、LayoutShift オブジェクトが console.log() で出力されます（ブラウザの開発者ツールの Console パネルを開いておいて下さい）。
new PerformanceObserver() には、コールバック関数を渡します。今回、レイアウト・シフトが検出されるとこのコールバック関数が実行されます。この第一引数は PerformanceObserverEntryList オブジェクトであり、このオブジェクトの getEntries() メソッドを実行すると、LayoutShift オブジェクトの配列が返ってきます。LayoutShift オブジェクトには、検出されたレイアウト・シフトの情報が入っています。
observe() メソッドでは、type として ‘layout-shift’ を指定します。buffered には true を指定していますが、以下のドキュメントを読んでも正確な意味が分かっていませんでした。
- 5.1 observe() method | Performance Timeline Level 2
- Parameters | PerformanceObserver.observe() – Web APIs | MDN

実際にレイアウト・シフトが検出されると、こんな感じに出力されます。

LayoutShift オブジェクトの sources プロパティに、レイアウト・シフトによって動きのあった要素の情報 (LayoutShiftAttribution) が配列になって格納されています。どの要素なのか？は、LayoutShiftAttribution オブジェクトの node プロパティにセットされており、スクリーンショットにあるように、node のところに表示された h3, div, h2 といったHTMLタグの名前のところにカーソルを持っていくと、その上のページ画面上の対応する位置を色で教えてくれます。

任意のページで実行するには (Chromeの場合)

任意のページで上記のコードを実行したい場合は、Chrome DevTools を使って既存のJavaScriptコード（最初に実行されるコードがよいです）にブレークポイントを設定しておき、実際にブレークしたら Console タブで上記のコードを実行します。あとはJavaScriptコードの実行を再開するだけです。

3. インターフェイス情報

PerformanceObserver interface

callback PerformanceObserverCallback = undefined (PerformanceObserverEntryList entries,
                                             PerformanceObserver observer,
                                             optional boolean hasDroppedEntry = false);
[Exposed=(Window,Worker)]
interface PerformanceObserver {
  constructor(PerformanceObserverCallback callback);
  undefined observe (optional PerformanceObserverInit options = {});
  undefined disconnect ();
  PerformanceEntryList takeRecords();
  [SameObject] static readonly attribute FrozenArray supportedEntryTypes;
};

引用元：Performance Timeline Level 2

LayoutShift interface

[Exposed=Window]
interface LayoutShift : PerformanceEntry {
  readonly attribute double value;
  readonly attribute boolean hadRecentInput;
  readonly attribute DOMHighResTimeStamp lastInputTime;
  readonly attribute FrozenArray sources;
  [Default] object toJSON();
};

引用元：Layout Instability API

LayoutShiftAttribution interface

[Exposed=Window]
interface LayoutShiftAttribution {
  readonly attribute Node? node;
  readonly attribute DOMRectReadOnly previousRect;
  readonly attribute DOMRectReadOnly currentRect;
};

引用元：Layout Instability API