INPとは？PageSpeed Insightsに出ない理由と、FIDとの違い
「INPがどこにも見当たらない！」「設定を間違えた？」と戸惑っていませんか？
LCPやCLSと同じ画面に並んでいると思い込んでいると、設定の誤りを疑ってしまうのも無理はありません。
この記事では、INPが参考値に出ない理由、FIDとの違い、直す場所の見つけ方を解説します。
INPの警告を受けた方が、数値の見方と直す場所を自分で判断できるようになります。
INPとは、操作してから画面が変わるまでの時間
INPは「Interaction to Next Paint」の略です。利用者が操作してから、その反応が画面に現れるまでの時間を測ります。
ボタンを押したのに何も起きず、もう一度押してしまう体験を数値にしたものです。押した瞬間ではなく、見た目が変わるまでを1回分として数えます。Core Web Vitalsの3つの指標のひとつで、操作への反応の速さを表します。
対象はクリック、タップ、キー入力
INPの対象になる操作は、次の3種類だけです。スマホの画面に出るキーボードでの入力も含まれます。
- マウスでのクリック
- 画面のタップ
- キーボードの入力
1回の操作では、押した瞬間、離した瞬間、クリックとしての処理が順に動くのが普通です。INPはこれらを別々に数えず、まとめて1回の操作として扱います。1つずつは軽い処理でも、重なれば基準を超えることも珍しくありません。
スクロールとホバーは含まれない
指を滑らせるスクロールや、マウスを乗せただけのホバーは対象外です。拡大の操作も、INPでは測られません。
ただし、スペースキーでスクロールした場合、そのキー入力に結び付いた処理は測られます。測られないのは、スクロールそのものです。スクロールが引っかかると感じるなら、INPとは別の原因を探すことになります。
200ms以内が良好、500ms超は不良
基準は200ミリ秒以内が良好で、500ミリ秒を超えると不良です。その間は改善が必要の区分になります。
| INPの値 | 評価 |
|---|---|
| 200ms以内 | 良好 |
| 200msを超え500ms以内 | 改善が必要 |
| 500ms超 | 不良 |
判定には、実際の利用者の表示のうち75%が収まる値を使います。JavaScriptを多く読み込むサイトほど、基準を満たしにくい指標です。
INPがPageSpeed Insightsの参考値に出ないのは正常
PageSpeed Insightsを開いても、下の参考値の欄にINPは出てきません。これは設定の誤りでも、測定の失敗でもありません。
参考値は、機械がページを開いて読み込みの様子を測ったものです。誰もボタンを押さないので、INPは測りようがありません。仕組みを知っていれば、出ないこと自体を心配する必要はないと分かります。
実際の操作がないと測れない
LCPやCLSは、ページを開くだけで測れます。どちらも、読み込みの過程で起きることだからです。
一方のINPは、誰かがクリックしなければ発生しません。そのため、INPは実際の利用者から集めたデータにだけ現れます。PageSpeed Insightsでは、上部の実測値の欄を見てください。このデータは直近28日間の集計です。
参考値で代わりに見るのはTBT
参考値の欄には、代わりにTBTという指標が出ています。読み込みの最中に、ブラウザがほかの作業で手一杯だった時間の合計です。
手一杯の時間が長いほど、操作しても反応が返りにくくなります。INPと同じものではありませんが、傾向は似ています。実測値が出ていない段階では、TBTを目安にしてください。TBTが長いなら、INPも悪いと見て手を付ける価値があります。
実測値が出ないときは、自分で操作して測る
アクセスの少ないサイトでは、実測値そのものが表示されないことがあります。集計に必要な件数が集まらないためです。
その場合は、Chromeの開発者ツールで自分で測ります。パフォーマンスのタブで記録を始め、遅いと感じるボタンを押してから止めてください。操作を選ぶと、3つの区間の内訳が出ます。CPUの速度を落とす設定を使えば、性能の低いスマホに近い状態で測れます。
INPはFIDから何が変わったのか
INPは2024年3月に、FIDに代わってCore Web Vitalsに加わりました。変わったのは、測る回数と測る終点の2つです。
この2点の変更で、基準を満たす難しさが上がりました。FIDでは良好だったサイトが、INPでは基準を外れる例も珍しくありません。以前に問題なしと判断したサイトでも、見直す価値があります。
最初の1回から、すべての操作へ
FIDが見ていたのは、そのページで最初に行われた操作だけでした。2回目以降の操作は、対象外です。
これでは、読み込み直後さえ乗り切れば良い数値が出てしまいます。実際には、読み進めた先で押したボタンが重いという状況のほうが多いものです。INPは、ページを閉じるまでのすべての操作を対象にしています。読み込みが終わったあとの重さは、FIDでは見えなかったのです。
待ち時間だけから、画面が変わるまでへ
FIDが測っていたのは、操作してから処理が始まるまでの待ち時間だけでした。処理そのものにかかる時間は、見ていません。
反応が始まりさえすれば、良い数値が出る仕組みでした。しかし利用者にとって大事なのは、画面が実際に変わることです。INPは、画面に変化が現れるまでを測ります。処理が重いページほど、FIDとの差が大きく出ます。
50回ごとに、最も遅い1回が除かれる
INPは「最も遅い1回」と説明されることが多いのですが、少し補足が要ります。web.devによると、50回の操作ごとに最も遅い1回が除かれます。
操作の多いページで、たまたま起きた1回の引っかかりに数値が左右されないための仕組みです。ただ、ほとんどのページでは操作が50回に届きません。記事を読むだけのページでは、最も遅い1回がそのまま数値になると考えてください。
INPを3つの区間に分けて考える
INPも、LCPと同じように区間に分けて見られます。3つの区間のどこが長いかで、直す場所が変わります。LCPより区間が1つ少なく、見分けやすい指標です。
内訳を見ずに手を付けると、関係のない処理を削ることになりかねません。開発者ツールで内訳を確かめてから、最も長い区間に絞って対策してください。各区間の意味は、次のとおりです。
① 反応が始まるまでの待ち時間
操作した瞬間にブラウザが別の作業をしていると、その作業が終わるまで反応できません。この待ち時間が1つ目の区間です。
読み込み直後は、広告や解析のタグ、スライダーの起動などが重なり、ここが長くなりがちです。この区間が長いなら、原因は押したボタンではありません。裏で動いている別の処理を減らすか、後回しにしてください。
② 処理そのものにかかる時間
2つ目は、その操作に結び付いたJavaScriptが動いている時間です。ここが長いなら、処理そのものが重いということです。
一度に多くの要素を書き換えたり、複雑な計算をしたりしていると長くなります。対処は、処理を分けることです。押した直後に見た目だけ先に変え、重い処理はそのあとに回すと、反応が返ったと感じてもらえます。
③ 画面に反映されるまでの時間
3つ目は、処理が終わってから画面が描き直されるまでの時間です。変えた箇所が多いほど、ページの構造が複雑なほど長くなります。
処理は一瞬で終わっているのに反応が遅い場合は、ここを疑ってください。要素の数が極端に多いページでは、描き直しの負担も大きくなります。一度に変える範囲を小さくすると、この区間は縮みます。
WordPressでINPの原因になりやすい箇所
WordPressでは、プラグインが読み込むJavaScriptが主な原因です。テーマの演出が加わると、さらに重くなります。
どれが重いかは、開発者ツールのネットワークのタブで分かります。読み込まれたファイルの一覧から、プラグイン名を含むJavaScriptを探してください。記事ページなのにフォームや予約のファイルが並んでいれば、そこが削れる余地です。
プラグインが積み上げるJavaScript
プラグインは、それぞれが独立してJavaScriptを読み込みます。10個入れれば、10個分が積み上がる計算です。
問題は、必要のないページでも読み込まれることです。お問い合わせフォームのプラグインが、フォームのない記事でもファイルを読む例はよく見かけます。まずは使っていないプラグインを停止し、必要なページだけで読み込む設定ができないかを確かめてください。
スライダーとポップアップ
目に見える形で重くなりやすいのが、この2つです。スライダーは、画像を切り替え続けるあいだ処理が動き続けます。
ポップアップも、表示のタイミングを決めるために動きを見張り続ける作りです。どちらも、ないとページが成り立たないものでなければ、外す価値があります。スライダーで見せている情報は、並べて置いたほうが読まれることも多いものです。
プラグインを入れないという選択
当サイトは、プラグインを1つも使っていません。必要な機能は、テーマの中に書いています。
そのため、読み込むJavaScriptは自分で書いた1つのファイルだけです。INPが問題になる余地は、作りの上でほとんどありません。更新する人が多いサイトなら、プラグインのほうが現実的です。内容が安定した企業サイトなら、検討する価値があります。
INPの改善に関するよくある質問
INPを改善すると、検索順位は上がりますか
Googleは、Core Web Vitalsをランキングを決める際に考慮する要素の1つとしています。ただし、直しただけで大きく上がるとは限りません。
内容が検索の意図に合っていることが先で、INPは操作したときの不満を減らすために直すものです。押しても反応しないボタンは、問い合わせの取りこぼしにつながります。順位より、使う人のために直すと考えてください。
ページ単位の実測値が出ないときは、どうすればいいですか
そのURLのデータが足りないと、サイト全体のデータが代わりに出ることがあります。まずはそちらを見て、サイト全体の傾向をつかんでください。
サイト全体でも件数が足りなければ、実測値は出ません。その場合は、開発者ツールで自分で操作して測るのが確実です。よく押されるボタンやメニューから順に、反応の遅い箇所を探してください。
TBTが良好なら、INPも良好と考えていいですか
目安にはなりますが、同じとは限りません。TBTは読み込みの最中だけを見ていますが、INPはページを閉じるまでのすべての操作が対象です。
読み込みが終わったあとに重い処理が動くページでは、TBTが良くてもINPが悪くなります。スクロールに合わせた演出や、あとから開くメニューが当てはまります。実測値が出たら、そちらを優先して判断してください。
スマホだけINPが悪いのはなぜですか
スマホは、PCより処理の性能が低いことが多いためです。同じJavaScriptでも、スマホでは何倍も時間がかかることがあります。
操作の多くがタップで行われることも影響します。PCでは問題がなくても、スマホで基準を外れるのは珍しくありません。開発者ツールでCPUの速度を落とし、スマホに近い状態で測り直してください。
直してから、どれくらいで数値に反映されますか
実測値は直近28日間の集計なので、反映には数週間かかります。直した翌日に変わらなくても、失敗とは限りません。
その間は、開発者ツールで同じ操作を測り、区間の内訳が縮んだかを確かめてください。Search Consoleで修正の確認を始めると、28日間のモニタリングに入ります。手元で縮んでいれば、あとは集計が追いつくのを待つだけです。
まとめ
INPが参考値に出ないのは、仕組みのうえで正常です。この指標だけは、実際に誰かが操作しないと測れません。
実測値が出ていないうちは、TBTを目安にします。出ている場合は、3つの区間のどこが長いかを見てから手を付けます。WordPressでは、プラグインが読み込むJavaScriptが原因になりやすい箇所です。
まずは使っていないプラグインを停止し、スライダーとポップアップが本当に必要かを見直してください。