INP最適化対応、JavaScriptの見直しはどこまで必要か？

INP（Interaction to Next Paint）を改善する際、多くの現場で悩まされるのが「JavaScriptをどこまで修正すべきか？」という問題です。

この記事では、JavaScriptがINPに与える影響の構造を整理しつつ、無理なく改善できる範囲と、手をつけるべきでないリスクの高い領域を見極めるための考え方を解説します。

JavaScriptがINPに与える影響とは？

INPは、ユーザーの操作に対して画面が反応するまでの遅延時間を測る指標です。
JavaScriptがこの指標に悪影響を与えるのは、主に次のようなケースです。

「どこまで見直すか？」の判断基準

すべてのJavaScriptを見直す必要はありません。
INPへの影響が大きい部分だけを特定し、最小限の手直しで最大の効果を狙うのが鉄則です。

見直すべきJavaScript

• ユーザー操作に直接反応する処理（例：ボタン押下時）
• DOMを頻繁に変更する箇所（例：スライダー、ドロワー）
• 巨大な同期関数（例：1,000件のデータループ処理）

無理に手を入れるべきでないJavaScript

• コンバージョン計測など不可避なサードパーティタグ
• ページ読み込み時に1回だけ動く初期化処理（LCPの方に影響）
• 大規模JavaScriptフレームワークの根本設計（React/Vueなどの再構築）

改善のためにできる具体策

● 処理分割でINPを改善する
重い処理を一括で実行せず、時間差で分割します。

// 重いループ処理 → 分割実行
function processHeavyTasks(items) {
const chunkSize = 50;
let i = 0;
function processChunk() {
for (let j = 0; j < chunkSize && i < items.length; j++, i++) {
processItem(items[i]);
}
if (i < items.length) {
setTimeout(processChunk, 0); // 処理を分散
}
}
processChunk();
}


● requestIdleCallback で空き時間に処理する

requestIdleCallback(() => {
// INPに関係ない処理を後回し
initializeAnalytics();
});


● DOM操作は最小限にまとめる

// 悪い例：1つずつDOMを更新
items.forEach(item => {
const el = document.createElement('div');
el.textContent = item.name;
container.appendChild(el);
});

// 良い例：DocumentFragmentで一括追加
const fragment = document.createDocumentFragment();
items.forEach(item => {
const el = document.createElement('div');
el.textContent = item.name;
fragment.appendChild(el);
});
container.appendChild(fragment);


サードパーティタグはどう扱う？

多くのケースで、INP悪化の原因は自作コードではなく、読み込んでいる外部JavaScriptタグです。特に以下は要注意です。

フレームワーク使用時の注意点

React、Vue、Next.jsなどのSPAやCSR構成では、仮想DOMや状態管理がINPに悪影響を与える場合もあります。

以下のような対応で軽減可能です。

• コンポーネントの細分化（1つの再描画で全部更新しない）
• 不要な再レンダリングの抑制（React.memo, useMemo, watch など）
• 遅延レンダリングやスケルトン表示の活用

「全部直す」より「要所を押さえる」

INP対策においてJavaScriptの見直しは非常に有効ですが、全体を大改修する必要はありません。
ユーザー操作直後に実行される処理の中で、重くなっている部分に絞って修正することで、少ない労力でINPスコアを大きく改善することができます。

次回は、PageSpeed Insightsでは拾いきれないINPの発生要因を詳しく紹介します。