web-vitals.js を使いINPの情報を取得する

1. このページの目的

web-vitals を使い、INPの情報を観察する。

attribute というAPIも使い、細かい情報を取得する。

2. 使い方

1. ページ上を操作してから、別のタブに移動する。
2. タブを移動すると、INP が決定する。
3. 元のタブ（このページ）に戻り、DevTools の Console パネルを開いて、INPの情報を見る。

API（と取得できるオブジェクトの仕様について）

• Metric
• INP attribution

JavaScriptコードは、このページのソースに書いてある。

3. JavaScriptコード

import {onINP} from './web-vitals/web-vitals.attribution.js';

function sendConsolelog(metric) {
  console.log(metric);
}

onINP(sendConsolelog);

4. フィールドやボタンを用意する

5. メモ

• INPの対象となった要素、イベントの種類などまで分かる。
• alert()を表示すると、ポップアップが表示している間も INP の時間にカウントされてしまう。これはおかしいのでは？

6. 参考

• GitHub - GoogleChrome/web-vitals: Essential metrics for a healthy site.