01 · URL
重要な操作を含むURLを入力
ボタン、メニュー、入力欄があるアクセス可能なページを選んでください。結果を比較するときはテスト条件をそろえます。自動テストは、すべての訪問者の操作経路を再現するものではありません。
クリック後のINPをチェック
メニュー、フィルター、カートの反応が遅れていませんか。テストでINPを測定し、操作への反応を遅らせるスクリプトを見つけます。
INPとは何か
INPは操作と目に見えるページ応答の間の一時停止
この指標はページがどれだけ速く読み込まれたかではなく、クリック、タップ、入力後にどれだけ速く応答したかに関するものです。そのためINPはフォーム、フィルター、カート、メニュー、検索、アカウントエリアで特に重要です。
操作の例
1回のクリックがINPになるまで
ブラウザはイベントを受け取り、ハンドラーを実行し、インターフェースを再計算し、次のフレームを表示する必要があります。INPはこの経路全体を測定します。
イベント内訳
INPの例386ms
入力遅延58msイベントがメインスレッドを待っているJSハンドラー178msバリデーション、状態の再計算、同期ロジックレイアウト / レンダリング83msブラウザがDOMとスタイルを再計算する次のペイント67ms新しいフレームがようやく画面に表示される
使い方
MiltenがINPをチェックする方法
このINP検査はページを開き、利用可能な操作を自動でテストします。レポートでは、入力遅延、JavaScript処理、次の画面更新までの時間を分けて確認できます。
02 · シナリオ
インタラクティブなシナリオをチェックします
検出した要素を操作し、測定できた遅延を記録します。対象が利用できない場合や操作が測定されなかった場合、その結果で対象の性能を確認することはできません。
03 · プラン
原因と修正の順序を取得
例えばメニューの表示が遅い場合、入力遅延、JavaScript処理時間、描画までの遅延を比較します。重い処理を分割し、同じテストを繰り返して各部分の時間を比べてください。
FAQ
INPチェックに関するよくある質問
Interaction to Next Paint、Core Web Vitals、SEO、実践的なインターフェース最適化に関する短い回答。
INPとは何で、なぜ重要なのか？
INPはインターフェースの応答性に関するCore Web Vitals指標です。ユーザーの操作からページの次の視覚的な応答までの時間を示します。良好な値は75パーセンタイルで200ms以下です。
サイトの INP を確認するには？
ログインして INP を含むプランを選びます。ページの URL とデバイス設定を指定して開始してください。Milten がブラウザで操作をテストし、遅延と推奨事項を表示します。
INPはTBTとどう違うのですか？
TBTは読み込み中のメインスレッドのブロック、INPは操作の遅延を測定します。この診断テストは原因の特定に役立ちますが、一定の観測期間における実際の訪問者のフィールドINPと同じものではありません。URLによってはCrUXデータがない場合もあります。
INPが悪い場合、どうすればよいですか？
まず、最も寄与の大きい特定の操作（ボタン、フィルター、フォーム、メニュー、チェックアウト）を見つけます。次に、長いタスク、同期ハンドラー、不要なレンダリング処理、強制リフロー、サードパーティスクリプトを確認します。
INP分析にはどのくらい時間がかかりますか？
簡単なチェックは通常1分未満で完了しますが、正確な時間は選択したリージョン、ネットワークプロファイル、CPUスロットリング、インタラクティブなシナリオの数によって異なります。安定した結論を得るには、同じ条件で複数回実行して比較してください。