Interaction to Next Paint（INP）とは？表示速度改善の新指標を徹底解説

6 min 1 views

目次

INPとは

INP（Interaction to Next Paint）とは、ユーザーがWebページ上で操作を行ってから、その操作に対する視覚的な反応が画面に現れるまでの時間を測定する指標です。

例えば、ユーザーがボタンをクリックした時に、そのクリックからメニューが開く、画像が拡大される、フォームにチェックマークが付くなど、画面に何らかの変化が表示されるまでの時間を計測します。

この指標は、Webサイトの「応答性」を測る重要な要素として、2024年3月からGoogleのCore Web Vitalsの新しい指標となりました。従来のFID（First Input Delay）に代わって採用されたもので、より実用的で包括的な評価が可能になっています。

INPの重要性

INPは単なる技術的な指標ではありません。実際のユーザー体験に直結する重要な要素です。

想像してみてください。あなたがオンラインショップで商品を購入しようとして、「カートに追加」ボタンをクリックしたとします。しかし、なかなか反応がないため、「あれ？クリックできてないのかな？」と思って何度もクリックしてしまう。その後、遅れて全てのクリックが処理されて、商品が複数個カートに入ってしまった…そんな経験はありませんか？

これが、INPが悪い状態の典型例です。INPが短ければ短いほど、ユーザーは快適にサイトを利用できるのです。

INPの仕組み

INPを理解するためには、まず「インタラクション」の概念を知る必要があります。

計測対象となるインタラクション

INPは、以下の3つの操作によって発生するインタラクションを計測対象とします：

  1. マウスクリック
    • ボタンやリンクのクリック
    • 画像やメニューのクリック
    • チェックボックスのクリック
  2. タッチスクリーンのタップ
    • スマートフォンやタブレットでのタップ操作
    • スワイプ操作
    • 長押し操作
  3. キーボードのキー押下
    • フォームへの文字入力
    • ショートカットキーの使用
    • タブキーでの移動

逆に、以下のような操作はINPの計測対象外です：

  • ページのスクロール
  • マウスのホバー（重ね合わせ）
  • ズーム操作

INPの計測方法

INPは、1つのインタラクションが完了するまでの時間を以下の3つのフェーズに分けて計測します：

1. 入力遅延（Input Delay）

ユーザーがクリックやタップを行ってから、ブラウザがその操作を受け取って処理を開始するまでの時間です。

この遅延が発生する主な原因は、ブラウザが他のタスク（JavaScriptの実行など）で忙しく、ユーザーの操作に対応できない状態にあることです。

2. 処理時間（Processing Time）

ブラウザがユーザーの操作を受け取ってから、その操作に対する処理（通常はJavaScriptの実行）が完了するまでの時間です。

例えば、ボタンがクリックされた時に実行される関数の処理時間がこれに該当します。

3. 表示遅延（Presentation Delay）

処理が完了してから、実際にユーザーが視覚的な変化を確認できるまでの時間です。

ブラウザが画面を再描画し、変更内容を表示するまでの時間が含まれます。

INPの評価基準

INPは以下の基準で評価されます：

  • 200ミリ秒以下: 良好（Good）
  • 200-500ミリ秒: 改善が必要（Needs Improvement）
  • 500ミリ秒以上: 不良（Poor）

この基準は、人間の感覚に基づいて設定されています。200ミリ秒以下であれば、ユーザーは操作に対する反応を「瞬時」と感じることができます。

INPとFIDの違い

INPの前身であるFID（First Input Delay）との主な違いを理解することで、なぜINPが採用されたのかがより明確になります。

計測対象の違い

FID：

  • ページ訪問後の最初のインタラクションのみを計測
  • 2回目以降の操作は評価対象外

INP：

  • ページ滞在中のすべてのインタラクションを計測
  • 最も時間のかかったインタラクションをページの代表値とする

計測時間の違い

FID：

  • 入力遅延のみを計測
  • 処理時間や表示時間は含まない

INP：

  • 入力遅延 + 処理時間 + 表示遅延をすべて計測
  • より包括的な評価が可能

この違いにより、INPはより実際のユーザー体験に近い指標として評価されています。

INPの計測方法

INPを改善するためには、まず現在の状況を正確に把握する必要があります。ここでは、代表的な計測ツールとその使用方法を紹介します。

1. PageSpeed Insights

最も一般的で使いやすいツールです。

使用方法：

  1. PageSpeed Insightsにアクセス
  2. 計測したいページのURLを入力
  3. 「分析」ボタンをクリック
  4. 結果の「実際のユーザー環境で評価する」セクションでINPを確認

PageSpeed Insightsでは、実際のユーザーデータに基づいた結果が表示されるため、最も信頼性の高い数値を得ることができます。

2. Google Search Console

ウェブサイト全体のINP状況を把握したい場合に最適です。

使用方法：

  1. Google Search Consoleにログイン
  2. 「ウェブに関する主な指標」を選択
  3. 「INPの問題」セクションで詳細を確認

3. Web Vitals Chrome拡張機能

リアルタイムでINPを計測できる便利なツールです。

使用方法：

  1. Web Vitals拡張機能をインストール
  2. 計測したいページで拡張機能を有効化
  3. ページ上で実際に操作を行い、INPを確認

この方法では、実際の操作に対するINPをリアルタイムで確認できるため、改善作業の効果を即座に確認できます。

INPの改善方法

INPの改善は、主に以下の3つのアプローチで行います。

1. JavaScriptの最適化

不要なJavaScriptの削除

多くのWebサイトでは、使用されていないJavaScriptコードが含まれています。これらは処理時間を無駄に延ばす原因となります。

具体的な対策：

  • 使用していないプラグインやライブラリの削除
  • 古いコードの整理
  • 必要最小限のJavaScriptのみを読み込む

長時間タスクの分割

JavaScriptの処理時間が長い場合、そのタスクを分割することで入力遅延を軽減できます。

実装例：

Copy// 改善前：長時間の処理でブラウザをブロック
function heavyTask() {
    for (let i = 0; i < 1000000; i++) {
        // 重い処理
    }
}

// 改善後：処理を分割
function optimizedTask() {
    let i = 0;
    function chunk() {
        for (let j = 0; j < 1000 && i < 1000000; j++, i++) {
            // 重い処理
        }
        if (i < 1000000) {
            setTimeout(chunk, 0);
        }
    }
    chunk();
}

React.js での最適化

React.jsを使用している場合、startTransitionを活用することで大幅な改善が期待できます。

実装例：

Copyimport { startTransition } from 'react';

function handleClick() {
    startTransition(() => {
        setState(newState);
    });
}

2. DOM構造の最適化

過大なDOMサイズの回避

DOMサイズが大きすぎると、レンダリング時間が長くなります。

推奨基準：

  • ページ内のDOM要素数：1,500個以下
  • DOMツリーの深さ：32階層以下
  • 1つの親要素に対する子要素：60個以下

効率的なDOM操作

DOM操作を最小限に抑えることで、表示遅延を軽減できます。

対策例：

  • 複数の要素変更を一度に実行
  • DocumentFragmentの使用
  • 仮想DOM の活用

3. 画像とメディアの最適化

画像フォーマットの最適化

最新の画像フォーマットを使用することで、読み込み時間を大幅に短縮できます。

推奨フォーマット：

  • WebP：JPEGより20-50%小さいファイルサイズ
  • AVIF：WebPよりもさらに小さいファイルサイズ

遅延読み込みの実装

画面に表示されない画像を後から読み込むことで、初期表示速度を向上させます。

実装例：

Copy<img src="image.jpg" loading="lazy" alt="説明">

4. CSS の最適化

不要なCSSの削除

使用されていないCSSルールを削除することで、レンダリング時間を短縮できます。

CSS の分割と最適化

重要なCSSを優先的に読み込み、非重要なCSSを後から読み込むことで、表示速度を改善できます。

5. サーバー環境の最適化

CDN の活用

CDN（Content Delivery Network）を使用することで、ユーザーに近いサーバーからコンテンツを配信し、読み込み時間を短縮できます。

特に、LandingHub（https://www.landinghub.net/）のような高速化サービスを活用すれば、技術的な知識がなくても簡単にパフォーマンス改善を実現できます。

HTTP/2 の利用

HTTP/2プロトコルを使用することで、複数のファイルを並行してダウンロードできるため、表示速度が向上します。

実践的な改善事例

事例1：ECサイトの商品ページ

問題：商品画像をクリックしても拡大表示されるまで500ms以上かかる

原因：

  • 高解像度画像の未最適化
  • 複雑なJavaScriptアニメーション

改善策：

  1. 画像をWebP形式に変換
  2. 遅延読み込みの実装
  3. アニメーションの簡素化

結果：INPが150msまで改善

事例2：ニュースサイトのメニュー

問題：ハンバーガーメニューのタップから表示まで300ms以上かかる

原因：

  • 不要なJavaScriptライブラリの読み込み
  • 複雑なDOM構造

改善策：

  1. 使用していないライブラリの削除
  2. DOM構造の簡素化
  3. CSSアニメーションの最適化

結果：INPが80msまで改善

よくある質問

Q: INPが悪いとSEOに影響しますか？

A: はい、INPはCore Web Vitalsの指標の一つとして、Googleの検索ランキングに影響を与えます。ただし、コンテンツの質や関連性の方が重要な要素であることも理解しておく必要があります。

Q: モバイルとデスクトップでINPの値は異なりますか？

A: はい、一般的にモバイルデバイスの方がINPの値は高くなる傾向があります。これは、モバイルデバイスの処理能力がデスクトップよりも低いためです。

Q: INPの改善にはどのくらい時間がかかりますか？

A: 改善内容によって異なりますが、基本的な最適化であれば数週間から数ヶ月で効果が現れます。ただし、根本的な改善には時間がかかる場合があります。

まとめ

INP（Interaction to Next Paint）は、現代のWebサイトにとって非常に重要な指標です。ユーザーの操作に対する応答性を測定し、実際のユーザー体験と直結する指標として、SEOの観点からも無視できない要素となっています。

改善には技術的な知識が必要ですが、適切な対策を講じることで大幅な改善が期待できます。JavaScript の最適化、DOM 構造の改善、画像の最適化など、段階的にアプローチすることが重要です。

また、技術的な対応が困難な場合は、LandingHub（https://www.landinghub.net/）のような専門的なサービスを活用することも一つの選択肢です。このようなサービスを利用することで、効率的かつ確実にWebサイトのパフォーマンスを改善できます。

INPの改善は、単なる技術的な指標の改善以上に、ユーザーに快適な体験を提供するための重要な取り組みです。ユーザーファーストの視点を持ちながら、継続的な改善を行っていくことが、長期的な成功につながるでしょう。

表示速度の改善は、現代のWebサイト運営において欠かせない要素となっています。INPの改善を通じて、ユーザーにとってより快適で使いやすいWebサイトを構築していきましょう。

<PREV
Total Blocking Time（TBT）とは？仕組みから改善方法まで徹底解説
NEXT>
Time to First Byte（TTFB）とは？仕組みから改善方法まで徹底解説
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です