Web表示スピード研究会

【INP】ーInteraction to Next Page・開始前に、修正しましょう!対策方法

Largest contentful paint_measures_image1

INDEX


FIDが終わり、INPが始まる

2021年6月に開始されたコアウェブバイタルですが、今やWebマーケッターの方々にも浸透してきました。表示スピードがUXの一つとして注目されてきたわけです。そのコアウェブバイタルの1つの指標が変更修正されます。2024年3月には、FIDがINP(Interaction to Next Page)に置き換わるというのです。

FID(代替のTBT)のページ評価の重み付けは、最新のLighthouseのV10では、全体の30%となり、ほかの指標よりも重み付けが大きくななりました。 FIDの対策が不十分な場合、INPの点数も低いと考えられます。下記のチャートで、重み付けと、その変遷が分かります(下記図2点)。ただし、FIDとTBTは違うものです。FIDはRUMでの指標、TBTはシンセティックの指標です。これらは計測する環境が違うため、TBTの対策ができれいれば安心というわけではありません」(DNP・出版イノベーション事業部・近藤洋志さん)

Largest contentful paint_measures_image2

(Cap)最新のバージョンでは、TBT(FID)が最大値の30%で、LCPとCLSは25%となっている。今後は変更される可能性もあります。

FIDとINPの違いはなにか?

 FIDとの違いですが、FID(First Input Delay)は、Webサイトの初動の反応を評価するのに対して、INPでは、初動の遅れだけでなく、Webページ全体の応答性を評価します。つまりページ全体が使いやすく動作してるかどうかを測る評価となります。

INP では、インタラクション(応答)は次の3つです。

マウスクリックしたとき
タッチスクリーンのタップしたとき
キータッチしたとき

INP での評価は、下記です。200ms未満が「良好」となります。

Largest contentful paint_measures_image3

良好 200ms 未満
改善が必要 200 ms~ 500ms
・500 ミリ秒を超える

これらのしきい値は、すべて75 パーセンタイルの RUM データに基づきます。

FID(First Input Delay)では、最初の応答性(インタラクション)のみを考慮しますが、INP ではすべて過程のページ の応答性が考慮されます。FIDでは、最初の入力遅延のみが計測され、途中のイベント実行にかかる時間や次のフレームの表示の遅延は計測されません。これはFIDが読み込み応答性の指標のため、その盲点となりますが、読み込み時で、最初の入力遅延がまったくない場合、ページ評価は「良好」という結果になってしまいます。一方、INP は、最初の遅延だけを見るものではありません。ページ全体の応答性をサンプリングし、包括的に応答性を評価するため、INPは FIDよりもWebページ全体の応答性を判断することになります。

INP を計測する方法

INPを改善するには、シンセティックと呼ばれる合成テストではなく、RUM(リアル ユーザー モニタリング )ツールを利用するようにします。

Googleでも、PSIやサーチコンソールでも一部代替利用できるという表現がありますが、RUMからのフィールド データの場合、ページの INP 値だけでなく、どのような特定の応答(インタラクション)が INP 値自体の原因となったか、それがページ中、ページ後に発生したかを示すコンテキスト データも得られます。負荷、応答性のタイプ (クリック、キープッシュ、タップ)も貴重な情報です。

Largest contentful paint_measures_image4
(CAP) RUMツールをもったSpeedCurveのダッシュボードで見たINPの状況。

INPの改善方法

 INPの改善については、(1)ページの読み込み時と(2)読み込み後に分けて対策します。

(1)ページ読み込み時
 ページ読み込み時は、ユーザーが先に操作することもあるので、読み込みは速くすべきです。主な改善方法として以下があります。

・使用しないコードの削除
・読み込み時に不要なJavaScriptを遅延読み込み
・遅いサードパーティ製 JavaScript
・大きすぎるDOM、大きな画像のデコード、計算量の多いCSSアニメーションの改善

(2)ページ読み込み後
 INPは、ページの読み込み時から読み込み後までの全体で評価をするため、読み込み後の応答性にも注意をします。

・タスクの優先順位を適切に設定
・ブラウザがアイドル状態時に、必要でない作業を調整する
・ロングタスクを最適化
・サードパーティ製JavaScriptの影響調査
・不要タグの整理・削除

これらは読み込み後の反応を妨げないように、順序よくタスクを実行させるようにします。

EC事業者はいつまでに対策すべきか?

INP対策はいつまでにすべきでしょうか? 

来年3月のINPの実行までは、まだ猶予があります。前回の2021年6月のコアウェブバイタルの導入時はどうだったでしょうか? Yahoo!ニュースを始め、オリコン、時事通信などのメディア、ガリバーなどのクルマ販売、家電量販店のヨドバシ、ビックカメラ、また大日本印刷のhontoなどは、開始前の3ヶ月前時点ですでに対応を終えていました。

そのため、今回のINP対応でも、積極的な会社は「開始前の2~3ヶ月前にまでに対応」してくると、予想されます。

一方で、「すでにFID対策をしっかりしているサイトなら、それほど心配する必要はないでしょう。ただ、まだ不十分なところは、この機会にINP回りをみていきましょう」(同DNP・近藤さん)

「INPは、UXをよくするというGoogleの改良型・高速化指標です。よりよいWebサイトのUX向上策としても、注力ください。」(Web表示スピード研究会主催・種村和豊さん)

2024年3月に、FIDはINP(Interaction to Next Page)に置き換わります。
ただいま準備していますので、少々お待ちください。



関連リンク

PSI、表示スピード、コアウエブバイタル INPの各対策については