新しいパフォーマンス指標のINPをChrome UXレポートで見れるように設定する

先月Googleが新たに発表したパフォーマンスの指標である、Interaction to Next Paint (INP)をChrome UXレポートのダッシュボードに追加する方法について説明します。

https://web.dev/inp/

Chrome UXレポートやパフォーマンスを継続的に計測する方法などについてはこちらの記事で説明していますので、ご覧ください。

https://qiita.com/kyntk/items/2086ece17387dccea61c

## Interaction to Next Paint (INP) とは

INPとは、Experimentalとして発表された指標で、サイトの応答性を表します。

> Interaction to Next Paint (INP) is an experimental field metric that assesses responsiveness.

応答性に関する指標としてFIDが存在しますが、FIDは最初の入力に対する応答性を計測するのに対して、INPはすべての応答性を計測します。
詳しい違いはこちらにあります。

https://web.dev/inp/#how-is-inp-different-from-first-input-delay-(fid)

https://web.dev/inp-in-frameworks/

また、Google I/Oにて動画で説明もされています。

https://www.youtube.com/watch?v=Mizzbsvv8Os

まだExperimentalなので、今後についての詳細は発表されていなかったり、水準は変更される可能性はあるようです。

https://twitter.com/anniesullie/status/1524765814402031616?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1524765983151468545%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.seroundtable.com%2Fgoogle-core-web-vitals-fid-with-inp-33429.html

### INPの計測方法

INPはすでに色々なツールで計測できるようになっています。
今回はもともと使っていた、Chrome UXレポートのダッシュボードに追加してみます。

https://developer.chrome.com/en/blog/inp-tools-2022/

https://twitter.com/philwalton/status/1524782416832868355

## Chrome UX Reportへの追加

:::note warn
現時点ではまだExperimentalなので、変更される可能性があります
:::

INPのデータは自動で取得されており、データソースへ追加して、ダッシュボードに追加することで見れるようになります。
最初にデータソースを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/e7107efb-8f3e-af88-65c3-2129e15cfc5d.png)

表示するだけだと存在しないので、左下のフィールドを更新を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/a6181886-648f-6b9f-addc-854f03c38f00.png)

すると、これらのフィールドが追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/7d51d89e-ee0b-df02-5418-0c1b71dc9581.png)

追加されたフィールドと、それぞれの説明はこちらです。

| フィールド | 説明 |
|:-|:-|
| Normalized Good INP | The percent of Interaction to Next Paint experiences < 200 milliseconds. Normalized per device.  |
| Normalized NI INP  | The percent of Interaction to Next Paint experiences >= 200 milliseconds and < 500 milliseconds. Normalized per device.  |
| Normalized Poor INP | The percent of Interaction to Next Paint experiences >= 500 milliseconds. Normalized per device.  |
| Good INP  |  The percent of Interaction to Next Paint experiences < 200 milliseconds. |
| NI INP  | The percent of Interaction to Next Paint experiences >= 200 milliseconds and < 500 milliseconds. |
| Poor INP | The percent of Interaction to Next Paint experiences >= 500 milliseconds.  |
| P75 INP  |  The 75th percentile of Interaction to Next Paint experiences. |
| P75 INP (All Devices)  |  The 75th percentile of Interaction to Next Paint experiences for all devices. |

これで、データポータルのレポートに追加することができます。

他のレポートをベースにして編集することで、このようにレポートを作成することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143317/a23aa95f-9e2c-5378-5850-8e8d8cbfe1a3.png)

## 参考

- [Interaction to Next Paint (INP)](https://web.dev/inp/)
- [How do modern frameworks perform on the new INP metric](https://web.dev/inp-in-frameworks/)
- [Interaction to Next Paint (INP) tool support - Chrome Developers](https://developer.chrome.com/en/blog/inp-tools-2022/)
- [The state of responsiveness on the web - YouTube](https://www.youtube.com/watch?v=Mizzbsvv8Os)