こんにちは！株式会社エイチームライフデザイン でSEO・コンテンツマーケティングを担当しております、間 まりなと申します。

2024年3月より導入予定とされている、Core Web Vitalsの新指標「INP」。
いつものようにGoogle Search Consoleを触っていたら、こんな表示が出ていて驚いた‥というSEO担当者もいるのではないでしょうか。

Core Web Vitalsとは、ページの読み込みパフォーマンスなどのUXを測定する指標のことですが、これらの改善はユーザー体験を向上させるだけではなく、検索順位にもポジティブな影響を与えると言われています。
（参考：Core Web Vitals と Google 検索の検索結果について）

INPの導入まであと3ヶ月を切りました。そこで今回は、INPの概要や改善方法についてご紹介します！

Core Web Vitalsの新指標、INPって？

INPとは

INPとは「Interaction to Next Paint」の略称で、ページで行われた操作に対してページが迅速に応答しているかどうかを測定する指標です。

例えば、「ECサイトでカートに商品を追加する操作の後に、実際に追加去れたことが描画されるまでの応答時間」や「アコーディオンで表現されたコンテンツをクリックしたときに、アコーディオンが開くまでの応答時間」などを測定しています。

INPのしきい値

INPスコアのしきい値は、このように定められています。

• INP が 200 ミリ秒を下回っている場合は、ページの応答性が良好であることを意味します。

• INP が 200 ミリ秒超、または 500 ミリ秒未満の場合、ページの応答性は改善が必要です。

• INP が 500 ミリ秒を超えている場合は、ページの応答性が低いことを意味します。

Google Search Console上でも、このしきい値に沿って改善が必要なURL・不良URLの数がレポーティングされます。
Google Search Console上での確認方法はこちらです。

FIDとINPはどこが違う？

INPは、もともとCore Web Vitalsの指標としてあった「FID (First Input Delay)」に代わる指標として生まれました。
では、もともとあったFIDと今回新設されたINPはどこが違うのでしょうか。

web.devでは、このように解説されています。

もともとFIDは、ユーザーが最初に操作をしてから、ブラウザが処理を開始するまでにかかる最初の遅延時間を測定していました。
しかし、INPでは、ユーザーが操作をしてからブラウザが応答するまでの全ての時間を包括的に評価されることになったという違いがあります。

なぜINPという指標が新設されたのか

では、なぜFIDに代わりINPという指標が新設されたのでしょうか。
ここからは個人の見解ですが、INPという指標が新設された意図について、私説を述べます。

そもそもGoogleがCore Web VitalsというUX指標を作り、全世界に公開しているのには２つの意図があるのでは？と考えています。

① UXが優れている品質の高いページの生成がなされるよう、サイト運営者に促す
② 検索結果のランキングロジックに、UXを加味する

①については、全世界のサイト運営者に対して、UXの改善指標を示すことによって改善を促す意味合いがあると考えています。
また、UXの低いページ(ユーザーが操作中にストレスを感じてしまうようなページ)が検索結果で上位化されてしまうと、ユーザーの検索体験が損なわれてしまうので、②の意図もあるのではと考えられます。
このように考えると、今回のFIDからINPへの変更は、①②のどちらの意図にも効果的に働く可能性があります。

FIDからINPへの変更は、要するに「ページの応答性について、最初の入力遅延だけではなく、より包括的な評価をするように変更する」ということです。
最初の入力が迅速であっても、その後のページの応答性が低ければ、ユーザーはサイト内でストレスを感じる可能性があります。そのようなストレスは、これまでのFIDでは測りきれなかった部分です。
つまり、GoogleはFIDからINPに指標を変更することによって、これまで測りきれていなかったユーザーのストレスを測り、それをUX改善や検索順位に反映させたいのでは？と考えています。

INPの計測・改善方法は？

PageSpeed Insightsでスコアを確認する

では、実際にINPの計測や改善箇所の特定をしてみましょう。
まずは、それぞれのURLのコアウェブバイタルのスコアを確認するためにPageSpeed Insightsを活用します。
計測したいURLを入力し、「分析」ボタンをクリックすることで、INPを含むコアウェブバイタルの指標を確認することができます。

ここでの注意点は、「このURL」での評価になっているかどうかです。「オリジン」になっている場合は、分析するためのデータが不足しているためにそのドメイン全体の結果が表示されていることがあるので注意が必要です。

この時「オリジン」になってしまっても、次で紹介する拡張機能やLighthouseでの計測を使えば、URL別のINPのスコアや改善箇所を特定することができるので安心してくださいね。

拡張機能「Web-Vitals」で改善箇所を探す

改善が必要なURLがわかったら、次はページ内のどの箇所がINPの評価を下げているのかを確認する必要があります。
ここでは、chromeの拡張機能「Web-Vitals」を使って改善箇所を特定する方法を紹介します。拡張機能をダウンロードしたら、オプションを開いて下記の設定を行います。

設定ができたら、調査したいURLを開いて拡張機能を使用するだけでINPの指標を確認することができます。

後は、ページ内の応答が遅そうな箇所をクリックして挙動を確認してみてください。Console上にログが残るように設定したので、改善が必要な箇所が見つかった時は警告が出るようになっています。

DevTools「Lighthouse」で改善箇所を探す

拡張機能をダウンロードせずに、INPの改善箇所を探す方法もあります。DevTools「Lighthouse」を活用する方法です。

調査したいURLで、DevToolsの「Lighthouse」を開き、Time Span・Performanceを選択し「Start timespan」をクリックすることで分析が開始されます。

Time spanが開始されたら、ページ内の応答性の低そうな箇所をクリックして挙動を確認してください。Time spanを完了すると分析結果が表示されるので、INPのスコアが低かった箇所を確認しましょう。

またPerformanceタブでは、実際のページ内の動きをスクリーンショットとともに振り返ることができます。横軸で時間の経過を確認できるので、どの処理にどれだけの時間がかかっているのかを詳しくチェックすることができますよ。

ただし、DevToolsを使って改善箇所を探すのは、DevToolsを使い慣れていない人にとってはやや難易度の高い作業かもしれません。前述したChromeの拡張機能を使って改善箇所を探す方法はとてもシンプルなので、まずはそちらから挑戦してみていただくことをオススメします！

ページの応答性が低い箇所がわかったら、レンダリング処理の改善など、実際にネックになっている部分の改善を行います。
最適化の方法については、こちらの記事（インタラクションを最適化する）に解説があるので参考にしてみてくださいね。

補足：INPがビジネスに与える影響

INPの改善がページの検索順位に対してポジティブに働くことは先述しましたが、INPの改善が売上へプラス影響を与えている事例があるのでご紹介します。
INPは新しい指標なので、日本国内での改善事例はまだまだ少ないのですが、海外での事例はweb.devなどのサイトで紹介され始めています。

例えば、redBusというバスの予約や乗車券販売を手掛けるインドの企業では、 INPの改善によってユーザー行動が改善し、売上が7%増加したという事例が発表されています。（参考：https://web.dev/case-studies/redbus-inp）

その他の事例：Trendyol がINPを50%削減した結果、クリックスルー率が1%向上

まとめ

今回は、Core Web Vitalsの新指標であるINPについて紹介しました。これから改善を予定している方の参考になれば幸いです。

また、エイチームライフデザインのnoteでは、コンテンツマーケ・アドマーケ・ブランディングデザインなどのノウハウや社内事例を紹介しています。（一緒に働く仲間も募集中です🌼）
ぜひフォローやスキをいただけると嬉しいです！

本記事をご覧いただきまして、ありがとうございました！