こんにちは。Webの世界へようこそ。
ブラウザの深淵を覗く旅へようこそ。今日は、多くのWeb開発者が「なぜかサイトが重く感じる」と頭を抱える原因の一つ、「INP（Interaction to Next Paint）」について、少しだけお話しさせてください。
難しい専門用語が並ぶと嫌になりますよね。でも大丈夫。ブラウザの仕組みを知れば、このINPは「魔法」ではなく「ただの行列整理」の問題だと気づくはずです。
—
1. INPってなに？：ブラウザの「反応速度」の通信簿
皆さんが、人気の行列ができるパン屋さんに並んでいると想像してください。
あなたがショーケースの「メロンパン」を指差した（これが操作）。店員さんがそれを受け取って、袋に入れて手渡す（これが描画）。
この「指差してから、手元にパンが届くまでの時間」、これがまさにINPです。
Webサイトも同じです。ボタンを押したのに画面が何も変わらないと、「壊れてる？」って不安になりますよね。INPは、ブラウザがどれだけ素早く、ユーザーの「やりたいこと」に応えて画面を書き直せているかを測る、いわば「おもてなしのスピード」を測る指標なのです。
2. なぜ「反応」が遅れるのか？：ブラウザの中の渋滞
ブラウザが「次の描画（Next Paint）」をするまでには、実は3つのステップがあります。
1. 入力の遅延（Input Delay）：
店員さんが他の注文の対応で忙しくて、あなたの指差しに気づかない時間。
2. 処理時間（Processing Duration）：
店員さんがパンを袋に詰める時間。
3. 描画の遅延（Presentation Delay）：
袋に入ったパンを、カウンター越しにあなたに渡すまでの時間。
この3つの合計が長すぎると、ユーザーは「このサイト、重いな」と感じます。特に多いのが、「JavaScriptという名の新人店員が、店内で一人で走り回ってパニックになっている」パターンです。
3. 現場でできる「軽量化」のコツ
「じゃあ、どうすればいいの？」と不安になる必要はありません。現場の知恵を少しだけ教えますね。
① 「長い処理」を細切れにする
重い計算を一度にやらせず、`setTimeout` を使って「一旦休憩」を挟むのです。これだけで、ブラウザは他の操作（クリックやスクロール）を受け入れる余裕が生まれます。
// 悪い例：重い処理を一気にやってしまう
function heavyTask() {
const bigData = new Array(1000000).fill(‘重い処理’);
// ここでブラウザが固まる！
console.log(‘完了’);
}
// 良い例：処理を小分けにして、ブラウザに「息継ぎ」をさせる
async function lightTask() {
const tasks = [/ 膨大なデータ /];
for (const task of tasks) {
// 1つ処理するごとにブラウザに休憩をあげる
await new Promise(resolve => setTimeout(resolve, 0));
console.log(‘一つ処理完了、ブラウザはまだ反応できるよ’);
}
}
② 余計な計算を減らす
ブラウザは非常に賢いですが、DOM（画面の構成要素）をいじりすぎると、すぐに「お化粧直し（再描画）」で疲れてしまいます。
「一度にたくさん変更せず、最小限の変更だけにする」。これだけで、ブラウザの負担は激減します。
—
4. 最後に：完璧を目指さなくていい
Webブラウザは、非常に複雑なエンジンが動いている機械です。時には、あなたのコードが悪いのではなく、ユーザーの端末（スマホの性能など）が頑張りすぎていることもあります。
INPを改善するコツは、「ユーザーを待たせないように、ちょっとずつ小出しにする」こと。まるで、大切なお客様にお茶を出すような心遣いですね。
もし計測したいなら、まずはChromeの「デベロッパーツール」の「Lighthouse」パネルを叩いてみてください。今のサイトの「おもてなし度」を教えてくれますよ。
難しく考えすぎないでください。一つずつ、コードを軽くしていく過程は、まるで部屋を片付けていくようで、とても楽しいものです。
あなたの作るWebサイトが、ユーザーにとって「心地よい場所」になりますように。応援しています！
コメント