#35「新たなパフォーマンス指標 Interaction To Next Paintとは」
Googleによって新たに定義されたパフォーマンス指標である「Interaction to Next Paint（INP）」の概要や計測・改善の方法について話しました。表示パフォーマンスだけでなくページ操作中のパフォーマンスを改善するためには必須の指標となりそうなINP、ぜひこの機会にチェックしてみてください！
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
- 加藤
- こんにちは！
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアするためのポッドキャストです。
今回はGoogleが5月に発表した新しいパフォーマンスの指標である「Interaction to Next Paint」、略してINPについて、いったいどんなものなのか、どうやって計測していくのかなどについて、お話ししたいと思います。今回のお相手はテックラジオ初登場の佐竹さんです！佐竹さん、よろしくお願いします！ - 佐竹
- はい、よろしくお願いします！
- 加藤
- えーまずは、佐竹さんは今回初登場なので、簡単に自己紹介をお願いします！
- 佐竹
- 新しくスピーカーに加わることになりました佐竹です。これからみなさんと一緒にWeb技術について楽しくわかりやすくお話していけたらと思っていますので、どうぞよろしくお願いします！
- 加藤
- はい、ありがとうございます！よろしくお願いいたします！
えー今日は先日フロントエンドBlogにINPの記事を佐竹さんが書かれていたので、INPについての概要とか、Blogに書けなかったことなどあればお聞きできたらなと思います。では、まずINPとは何かというところから伺ってもよいでしょうか。 - 佐竹
- はい。INPはページの読み込みを開始してからユーザーがページを離れるまでの間に発生する、ユーザー入力への応答性、いわゆるインタラクションを評価する測定基準を指しています。
- 加藤
- その応答性っていうのは、たとえばページにダイアログを開くボタンがあったとして、そのボタンをユーザーがクリックしたあとにどれだけ速くダイアログが開くか、とかそういうことですかね？
- 佐竹
- ざっくり言うとそんな感じですね。INPは入力遅延時間、処理時間、表示遅延時間の3つのフェーズで構成された遅延時間の合計値を計測するので、遅延時間を短くすれば、ユーザーはストレスを感じることなくページを閲覧できるようになりますよね。
- 加藤
- なるほど。その入力遅延時間と処理時間と表示遅延時間っていうのは、それぞれどこからどこまでの時間を指しているのかっていうのは定義されているものですか？
- 佐竹
- そうですね。えー入力遅延時間は、ユーザーがページを操作してからイベントハンドラーが実行される前までの時間で、2つ目の処理時間は、イベントハンドラーの実行にかかる時間ですね。そして3つ目の表示遅延時間は、イベントハンドラーの実行が終了してから、ブラウザが次のフレームを表示するまでの時間です。
- 加藤
- クリックとかキー入力などのユーザー操作を「イベント」と呼んでいて、そのイベントをどう処理するのかを表すのが「イベントハンドラー」と呼ぶと思うんですけど、これ実際のWebページの操作に置き換えて説明できたりしますか？
- 佐竹
- そうですね。んー、では、結構いろんなページで実装されることがあるトグルを例にINPを説明してみますね。まずページを表示したらページ内にトグルがあります。そのトグルは今、閉じている状態です。トグルの中を見たいので、トグルボタンをマウスでクリックします。トグルが開いて中を見ることができました。そしたらページを離れます。
- この例えで考えた場合、ページを表示して、ページを離れるまでが計測の範囲になります。そして実は、ページ表示中には色々な処理が動いていたりしますね。その状況の中でトグルボタンがクリックされているんです。処理というのは割り込みができないので、トグルボタンがクリックされたからといって、すぐにその処理が行われるわけではありません。ここで処理の順番待ちをしないといけないんですけど、この順番待ちの時間というのが入力遅延時間となります。
- そして順番が回ってきたのでクリックというイベントに紐づく、トグルを開くという処理が実行されます。この処理にかかる時間が処理時間です。そして最後に開いた状態のトグルをブラウザに表示するという処理が走ります。この表示までにかかる時間が表示遅延時間です。
- 加藤
- なるほど。それでいうとINPってちょっとFirst Input Delay（FID）と似ている感じですよね。
- 佐竹
- そうですね、似てますよね！実際、FIDもINPも応答性を示す指標なんですけど、計測対象となる範囲と時間で異なる部分があって、計測範囲だと、FIDは最初のインタラクションのみが対象で、INPはページの読み込みを開始してからユーザーがページを離れるまでの全てのインタラクションが計測の対象になるんですね。
計測される時間だと、FIDは入力遅延時間のみで、INPは入力遅延時間、処理時間、表示遅延時間の合計なんですね。なので、計測範囲でも計測される時間でもINPはFIDを包括しているといえるし、このあたりからINPとFIDの違いにも気づいていただけるのではないでしょうかね。 - 加藤
- なるほど。ありがとうございます。
えーでは、INPとは何かが分かったところで、ここからはINPをどうやって計測するのかというところを聞ければと思うんですけども、INPを計測する方法はすでにあるんですよね？ - 佐竹
- はい。他の指標と同じように、ラボデータを得るためのツール、フィールドデータを得るためのツールの両方があります。
- 加藤
- ラボデータとフィールドデータについてご存知ない方は、以前に公開した「Lighthouse v8.0のアップデートとCore Web Vitals」というエピソードで簡単に説明していますので、よければそちらも聞いてみてください。
えーではまずはラボデータの計測方法から教えてもらってもいいですか？ - 佐竹
- はい。ラボデータの計測ツールにはChrome DevToolsのLighthouseパネルにある「Timespansモード」を利用する方法や「Lighthouse npm module」を利用する方法、Chrome拡張機能の「Web Vitals」を利用する方法があります。
- 加藤
- あーこれは他の指標を測る際に普段使っているツールでそのままINPも測れちゃう感じですね。ではそれぞれのツールの特徴を教えてもらってもいいですか？
- 佐竹
- まずはDevToolsに搭載されているLighthouseの「Timespanモード」ですが、これはブラウザでページを表示して、想定するユーザーのページ操作に基づいて計測を行ったり、作成した機能だけをピンポイントで操作して計測したりする時に使用することができます。
- 加藤
- もうLighthouseはもはやWeb制作に必須と言ってもいいくらいのツールですよね。npmモジュールとしてのLighthouseはどういう時に使いますか？
- 佐竹
- えー「Lighthouse npm module」は、大量のページを一気に計測する時とか、htmlファイルやjsonファイルで計測値を出力してレポートファイルとして取っておきたい時に便利ですね。定期的に計測するのであれば、もうCIとかに組み込んでしまうのも手かと思います。
- 加藤
- あとはLighthouseを使ったツールだったりとか、拡張機能を自前で用意したい場合とかにも使えそうですよね。ちなみにINPってインタラクションの指標だと思うんですけど、そういう機械的な計測処理にインタラクションって含められるものなんですかね？
- 佐竹
- そうですね。Puppeteerみたいな、ブラウザをプログラムから操作するツールと組み合わせると計測できますね。
- 加藤
- あぁ、なるほど。クリックなどのインタラクションはPuppeteerのようなテストツール側で実装して、計測はLighthouseでやるっていう切り分けをする感じですね。
では最後は拡張機能の「Web Vitals」ですかね。これはもともとあった拡張機能がINPにあわせてバージョンアップした感じですよね。 - 佐竹
- そうですね。拡張機能の「Web Vitals」はツールバーにアイコンを表示しておくと色で改善が必要かどうかがすぐにわかります。信号と同じで青、黄、赤の色があって、青だったら良好、黄色だったら改善が必要、赤だったら不良を表しています。
INPの場合はページの操作をもとに計測を行っているので、操作中の色の変化も気をつけて見ていきたいですね。 - 加藤
- 拡張機能だとやっぱりページを開いて操作しながらリアルタイムに状況を把握できるので便利ですよね。
では続いてフィールドデータの計測方法について教えていただけますか。 - 佐竹
- はい。フィールドデータの計測ツールにはGoogleの「PageSpeed Insights」を利用する方法や「Chrome User Experience Report」を利用する方法、「web-vitals JavaScript library」を利用する方法があります。
- 加藤
- こちらもフィールドデータを計測する際の定番ツールって感じですね。
- 佐竹
- そうですね。「PageSpeed Insights」は Googleの「PageSpeed Insights」のページにアクセスして、計測するページのURLをいれて分析ボタンを押すだけで計測してくれるので、とりあえず直近の数値をチェックしたいっていう時に向いてますね。ただ、一定の期間を通してINPがどう変化しているのかまでは分からないので、そういう時は月ごとの計測値が見られる「Chrome User Experience Report」を使うといいですね。
- 加藤
- んーなるほど。JavaScriptのライブラリはどういう時に使いますか？
- 佐竹
- 「web-vitals JavaScript library」はページに計測用のコードを実装して、ユーザーが操作した時の計測値をリアルタイムに出すんですけど、その出した値をGoogle アナリティクスに送信すると、ページのアクセス解析データと一緒にWeb Vitalsレポートもまとめることができるんですね。他のツールはページ全体のスコアしか分からないですけど、web-vitals JavaScript libraryを使えばどの要素に対するインタラクションなのか、というところまで計測できるんですね。
- 加藤
- ん－なるほど。本番用のソースコードにWeb Vitals計測用の処理を含めておくという感じですね。
- 加藤
- はい。ここまでINPの概要と計測方法について話してきました。佐竹さん的にはINPの印象はどんな感じですか？
- 佐竹
- はい。INPはまだ出てきて日が浅いので、これから変更が入るかもしれないですけど、今回色々と計測方法を紹介させていただいたので、その中でそれぞれのサイトに合った計測方法がもしあったなら嬉しいなと思います。
- 加藤
- はい。ありがとうございます！えーでは次回はINPをどう改善していくかというところに触れていきたいと思います！
最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Google Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。 「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどお待ちしております。それでは今日はこの辺で！ありがとうございましたー！ - 佐竹
- ありがとうございました！