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

1. このページの目的

Layout Instability API を試す。

2. Demo

a. 本ページで実行するソースコード(抜粋)

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry);
  }
});

observer.observe({type: 'layout-shift', buffered: true});

b. 2秒後に画像を挿入することにより、レイアウトシフトを起こす。

DevTools の Console パネルにレイアウトシフトの情報が表示される。

⬅ DOMContentLoadedイベントで読み込んだ画像

⬅ loadイベントから2秒後に読み込んだ画像

3. 結果

4. 参考情報

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();
};

LayoutShiftAttribution interface

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

5. 参考