プログラミング

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

投稿日:2020年12月24日 更新日:

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 オブジェクトの 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

4. デモページ

5. 参考

仕様

MDN

対応方法

ブラウザの対応状況

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

目次1. Resource Timing API について2. サンプルコード3. PerformanceResourceTiming インターフェイス4. デモページ5. 参考仕様MDNブラウザの対 …

web development

Web Development for Beginners を読む:レッスン3

目次1. はじめに2. Lesson 3: Creating Accessible WebpagesTools to useScreen readersContrast checkersLightho …

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

WordPress

WordPress で処理を追加したい場合、どこにコードを書けばよいのか?

自分で導入した WordPress でブログを運営していたとします。ある日、WordPress の動作を変更したくなって 調べてみると、ほんの少し PHPのコードを書けば済むことが分かりました(アクシ …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …