岡山県岡山市のホームページ制作会社 株式会社イケル

Column

コラム

2023.10.25

INPってなに?コアウェブバイタルの新指標INPについて解説

少し前にはなりますが、2022年5月にGoogleから「2024年3月以降、コアウェブバイタルの指標の1つであるFIDをINPに置き換える」という発表がありました。
「2024年3月以降」と言いつつ、現段階でもINPは試験的に導入されているみたいです。
今回は、INPとはどういった指標なのか、どのように対策していくべきなのかをご紹介します。

コアウェブバイタルとは?

INPの説明に入る前に、まずコアウェブバイタル(Core Web Vitals)について簡単にご説明します。

コアウェブバイタルとは、ユーザーにとって使い勝手の良いサイト作りを目指すべく、UX(ユーザー体験)を向上させるために設定された3つの指標を総称したものです。

現在コアウェブバイタルには、以下の指標があります。 今回の発表は、上記3つの指標の内、FIDをINPに置き換えようといった内容でした。
FIDって何?
今回置き換えの対象となっているFIDとは、First Input Delayの略称です。
日本語にすると、『初回入力遅延』という意味で、ユーザーがページ内で最初に行った操作の反応速度を測定して、どのくらい反応に時間がかかったかを指標とします。
ここの値が小さいほど反応が早く、UXが良いとみなされます。

INPとは?

さて、今回の本題であるINPについてですが、INPはInteraction to Next Paintの略称です。

INPは、ユーザーがページ内で起こした操作に対するインタラクション(反応)の速度を計測して、どのくらい読み込みに時間がかかったか(遅延)を計測しています。

簡単に説明すると、ホームページを利用している際に、ボタンを押す度に反応が遅かったら、ストレスを感じますよね。そこで「サクサク動くホームページを作ってアクションに対する反応速度を上げましょう!」というのが今回の指標だそうです。

INPとFIDとの違いとは?

ここまでINPとFIDについて解説しましたが、INPとFIDって両方とも“ユーザーの行動に対しての反応する時間を指標としている”という点では、少し似ていますよね。

今回、Googleからの発表では、『FIDがINPに置き換わる』ということですが、具体的にどういった点がINPとFIDでは違うのでしょうか?

それは、『指標の測定方法』です。
FIDでは初回のみ測定を行っているのに対し、INPでは初回だけでなくユーザーが起こした全てのアクションに対し測定を行っています。

また、FIDでは『入力に対する反応の遅れ』のみを測定しているのに対し、 INPでは3つのプロセスを測定しています。

1. 入力の遅延:ユーザーがHP内で起こした行動が実行されるまでの時間
2. 処理の遅延:記述しているコードの処理にかかる時間
3. 表示の遅延:処理の実行が完了し、ブラウザに反映し表示にかかる時間

以上のことから、FIDよりも正確なデータを評価できるINPに重きを置いたのだと考えられます。

INPに置き換わった後の施策について

現在は試験運用という形で導入されているINPですが、2024年3月以降は指標が置き換わってしまいます。
置き換わった後、どのようにコアウェブバイタルの対策をしていく必要があるのでしょうか?

まずは、ホームページのINPスコアを計測してみましょう。
INPを計測することができるツールとして『PageSpeed Insights』や『Web vitals(Google chromeの拡張機能)』があります。 そして、計測した結果をもとにホームページの改善を行っていきましょう。
改善方法のポイントとしては、ページ読み込み時とページを読み込んだ後にあります。

ページ読み込み時

ページを読み込んだ後

こういった処理にかかる遅延を改善し、INPスコアの高いホームページを作りましょう。

まとめ

今回は、コアウェブバイタルに新しく追加されるINPという指標について解説しました。
INPでは、FIDで評価していた部分よりも評価の範囲が広がったことから、UX(ユーザー体験)の重要性を改めて認識させられました。

INPに置き換えられるのは2024年3月ですが、試験的に導入されているということもあり、早い段階から準備や対策に取り組み、INPについて理解を深めてホームページを改善していきましょう!
株式会社イケル Webディレクター
ホームページ制作や保守・運用支援を担当しています。まだまだ知らないことが沢山ある未熟者ですが、日々の業務を通して少しずつ成長しています。学んだことを活かし、より良いホームページが作れるように頑張ります!
コラムの一覧へ戻る
Recent Posts
Category
  • お知らせ
  • コラム
  • 山下の一社懸命
  • 新人ブログ