目次
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 を指定していますが、以下のドキュメントを読んでも正確な意味が分かっていませんでした。
実際にレイアウト・シフトが検出されると、こんな感じに出力されます。
- 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();
};
LayoutShiftAttribution interface
[Exposed=Window]
interface LayoutShiftAttribution {
readonly attribute Node? node;
readonly attribute DOMRectReadOnly previousRect;
readonly attribute DOMRectReadOnly currentRect;
};
4. デモページ
5. 参考
仕様
- Performance Timeline Level 2 (W3C Editor’s Draft 15 September 2020)
- Performance Timeline Level 2 (W3C Working Draft 24 October 2019)
- Timing Entry Names Registry (W3C Editor’s Draft 17 August 2020)
- Layout Instability API (Draft Community Group Report, 26 November 2020)
MDN
対応方法
- Debugging layout shifts (2021-03-11)