INP（Interaction to Next Paint）対策：クリックやスクロールの反応を軽くする実装方法

INPとは？なぜ重要なのか

INP（Interaction to Next Paint）は、ユーザーがインタラクション（クリック・タップ・キー入力など）を行った際に、その反応が画面に描画されるまでの時間を測定する指標です。LCPやCLSと同様、Core Web Vitalsの1つとして2024年に正式指標へ昇格しました。

主な測定対象

• click, tap, keydown などのイベント
• そのイベントに対応するDOMの更新処理
• 実際に画面が更新されるまでの時間

この時間が長いと「反応が悪い」と感じられ、UXが悪化します。

よくあるINPが悪化する原因

INPスコアが悪いサイトでは、次のような問題が発生しがちです。

• 巨大なJavaScript処理：イベント発火時に重い関数が実行される。
• メインスレッドのブロック：画像のlazyloadや大量DOM更新などが重なっている。
• DOMの再描画が多すぎる：イベントごとに不要なDOMの書き換えがある。
• 非同期処理の待ち時間：APIレスポンスを待ってからUI更新している。

対策① 軽量なイベント処理を心がける

イベントリスナーに書く処理は、可能な限り軽量にしましょう。以下は重い例と改善例です。

NG例：イベント内で直接DOM変更・API通信

button.addEventListener("click", async () => {
    const res = await fetch("/api/data");
    const data = await res.json();
    content.innerHTML = data.html;
});

OK例：イベント発火 → UI更新 → 非同期処理

button.addEventListener("click", () => {
    content.innerHTML = "読み込み中...";
    loadData();
});

async function loadData() {
    const res = await fetch("/api/data");
    const data = await res.json();
    content.innerHTML = data.html;
}

対策② requestIdleCallback / requestAnimationFrame を活用する

スクロール・クリック時に重い処理が入るとINPが悪化します。タイミングをズラすことで応答性を改善できます。

スクロール時に不要な処理を後回しにする例

window.addEventListener("scroll", () => {
    requestIdleCallback(() => {
        // 重い処理を待機状態で後回しに
        lazyLoadImages();
    });
});

UI更新タイミングを調整

button.addEventListener("click", () => {
    requestAnimationFrame(() => {
        modal.classList.add("open");
    });
});

対策③ メインスレッドの負荷を下げる

Web Workerで処理を分離

// main.js
const worker = new Worker("worker.js");
worker.postMessage("start");

// worker.js
onmessage = () => {
    let heavyResult = 0;
    for (let i = 0; i < 1e7; i++) {
        heavyResult += i;
    }
    postMessage(heavyResult);
};

IntersectionObserverでスクロール処理を効率化

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add("visible");
        }
    });
});
document.querySelectorAll(".js-scroll-trigger").forEach(el => observer.observe(el));

対策④ ユーザー操作の前にプリロード・プリフェッチ

クリック前にリソースを読み込んでおくことで、応答性を上げられます。

<link rel="prefetch" href="/next-page.html">

また、JavaScriptでは以下のように実装可能です。

document.querySelector("a.prefetch").addEventListener("mouseover", () => {
    fetch("/next-page.html");
});

まとめ：INP対策で操作ストレスを減らすために

INP（Interaction to Next Paint）は、ユーザーが「このサイト、重いな…」と感じる根本原因を可視化する重要な指標です。INPの改善には、以下のような対策が有効です。

• イベント処理はできるだけ軽量に書く
• UIの応答は即時に行い、重い処理は後回し
• Web Workerなどでメインスレッドの負荷を軽減
• スクロールやクリック時の処理を分割・遅延
• ユーザー操作を予測してプリフェッチ・プリロード

わずかな遅延がUXに大きな影響を与える今、INPの最適化は必須です。この記事を参考に、快適なインタラクションを実現していきましょう。