こんにちは！Webブラウザの奥深い世界へようこそ。
フロントエンドの現場を長年歩んできた私ですが、ブラウザという小さな宇宙の中で日々繰り広げられているドラマは、いつ見ても本当にエキサイティングです。
今回は、近年のWebパフォーマンス界隈で最も熱い注目を集めている「INP（Interaction to Next Paint）」についてお話しします。
「なんだか難しそうな英語の頭文字が出てきたぞ……」と身構えてしまいましたか？ 大丈夫ですよ、深呼吸してください。今日ここで、身近な例えを交えながら、ふんわりと、でも本質がしっかりわかるように紐解いていきますね。
—
1. INPって一体なに？ 身近な「お買い物」で例えてみよう
Webサイトを触っていて、「ボタンを押したのに、画面がフリーズしたみたいに全然反応しない……これ、壊れてる？」とイライラした経験、ありませんか？ あの「クリックしてから実際に画面が変わるまでのモタつき」を数値化して、厳しく評価しようじゃないか、という新しい指標が INP です。
これ、分かりやすく例えるなら「人気テーマパークのファストフード店での注文」そっくりなんですよ。
1. ユーザーの操作（タップやクリック）
- あなたがレジに行って、「ハンバーガー一つ！」と注文する瞬間です。
2. ブラウザの裏側の処理（JavaScriptの実行など）
- 店員さんが注文票を受け取り、厨房の奥でパティを焼き、包み紙を用意する作業時間です。
3. 次の描画（Next Paint）
- 出来上がったアツアツのハンバーガーが、あなたのトレイに「ドンッ！」と置かれる瞬間です。
この「注文してから、トレイにハンバーガーが乗る（画面が目に見えて変わる）までの全トータルの時間」こそが、まさに INP が測ろうとしているものなんです。
どれだけ店員さん（ブラウザ）がテキパキしていても、厨房の裏で別の面倒な仕込み（重たいJavaScriptの処理）をしていたら、あなたのハンバーガーの調理は後回しになってしまいますよね。これが、Webサイトが「重い」と感じる正体です。
—
2. なぜ今、INPがこんなに大事なの？
昔は「ページの読み込みが速いこと（最初に表示されるまで）」が正義でした。しかし、今のWebサイトはすっかり「アプリ」のように動きますよね。ボタンを押してモーダルが開いたり、タブを切り替えたり、ショッピングカートに商品を追加したり。
つまり、「開くのが速い」だけじゃなく、「開いたあとに触ったときのレスポンスが気持ちいいか」が、私たちのサイトの評価（そしてユーザーの離脱率）を大きく左右する時代になったのです。
Googleも「ユーザーがストレスなく操作できるサイトを上位に評価するよ」と公言しています。だからこそ、フロントエンドに関わる私たちにとって、INPの改善は避けて通れない大切なミッションというわけです。
—
3. INPの裏側でブラウザは何をしているのか？
ここで少しだけ、Webブラウザの頭の中を覗いてみましょう。ブラウザは、私たちが書いたHTMLやJavaScriptを解釈して画面を描画していますが、実は「シングルスレッド」という、いわば「職人肌の職人が一人でコツコツ作業している状態」で動いています。
職人さんが一つの大きな仕事（重たいプログラムの計算）をしている最中に、あなたが「ねえ、これ変えて！」とボタンを押しても、職人さんは今の仕事の手を止めることができません。「ちょっと待ってね！」と心の中で思いながら、今の作業が終わるまであなたのリクエストを順番待ちの列（タスクキュー）の最後尾に並ばせます。
これが積もり積もって、画面の反応が遅れる原因になるのです。
—
4. 今日からできる！ INPを良くするための実践アプローチ
「じゃあ、どうやってこのモタつきを解消すればいいの？」という声が聞こえてきますね。
基本の心構えはシンプルです。「職人さんの仕事を細かく分割して、お客さん（ユーザー）の注文をいつでも受け付けられる状態にしてあげること」です。
ここでは、実務でよく使われるテクニックを、そのままエディタに貼って試せるサンプルコードと一緒に見ていきましょう。
改善のコツ：重たい処理を「分割」する
例えば、ボタンを押されたときに、何やらものすごく重たいループ処理（配列の大量データ処理など）を走らせたとします。これを一気にやろうとするとブラウザがフリーズします。
そこで、JavaScriptの `setTimeout` や、よりモダンな `requestAnimationFrame` などをうまく使って、処理を細切れにする（非同期でタスクを譲る）テクニックを使います。
実践的なサンプルコード
ステータス: 待機中…
このコードのポイントは、ボタンを押した瞬間にまず `statusText.textContent` を書き換えて「すぐに画面を変化させている」点です。ユーザーは「あ、ちゃんとクリックに反応してくれた！」と安心できます。そのあとで裏側で重たい計算（ループ処理）を走らせることで、体感の待ち時間をグッと減らすことができるのです。
---
5. 最後に：完璧を目指さなくて大丈夫
ブラウザの仕組みやINPの概念、少しずつ見えてきたでしょうか？
パフォーマンスの改善というと、なんだかすごく難解で、完璧な数字を出さなきゃいけないプレッシャーを感じてしまうかもしれません。でも、安心してください。現場のプロたちも、日々「どうすればもう少しだけユーザーを待たせずに済むか」を泥臭く試行錯誤しているだけなんです。
まずはご自身の作っているWebサイトでボタンをポチポチ押してみて、「あれ、ここちょっと引っかかるな？」と感じる場所を見つけるところから始めてみましょう。その気づきこそが、最高のWeb体験を作る第一歩ですからね。
それでは、また次のWebブラウザの旅でお会いしましょう！
コメント