1. HOME
  2. すべての記事一覧
  3. SEO
  4. INPの改善方法を解説。3月12日からFIDに代わる新しい指標として正式採用!

INPの改善方法を解説。3月12日からFIDに代わる新しい指標として正式採用!

公開日:2024年02月15日

最終更新日:2024年06月03日

  • twitter
  • facebook
  • はてB!

INPの改善方法を解説。3月12日からFIDに代わる新しい指標として正式採用!
Googleは2024年3月12日より正式に「INP(Interaction to Next Paint)」を「FID(First Input Delay)」の代わりとして「Core Web Vitals(コアウェブバイタル)」の指標にすると発表しました。

本記事では、そもそもINPはどのような指標なのか、INPの計測方法、改善方法について解説します。

【無料DL】Core Web Vitalsの入門書をダウンロードしてもっと理解を深める
Core Web Vitals入門書(株式会社フルスピードのお役立ち資料)

INP(Interaction to Next Paint)とは?

INPとは「Interaction to Next Paint」の略で、2023年5月中旬にGoogleが試験運用としてCore Web Vitals(コアウェブバイタル)に含まれる指標の1つであるFIDに代わる新しい指標として導入されました。

INPはWebページ全体の応答性を評価する指標

INPはユーザーがWebページに滞在している間に発生する全てのクリック、タップ、キーボード入力に対するWebページ全体の応答性を評価する指標で、Webページに滞在している間で応答が最も遅かった時間を計測します。

つまり、どれだけサクサク操作・閲覧できるWebページなのかを示す指標ということです。
INP(Interaction to Next Paint)のイメージ図
INPの判定基準は、遅延時間が200ms(ミリ秒)未満だと「良好」、500ms以下であれば「改善が必要」、500msを超えた場合は「不良」とされています。
良好なINPと不良なINPのしきい値を示す図
引用:Interaction to Next Paint (INP)

Core Web Vitals はそのWebページをどれだけユーザーが快適に閲覧・操作できるかを指標にしたもの

そもそもCore Web Vitals(コアウェブバイタル)とはWeb上のユーザー体験(UX)をより優れたものにするためにGoogleが提唱しているWeb Vitalsという指標群の中で、特に重要なユーザー体験(UX)に関する指標群のことを指します。

2024年3月12日以降、Core Web Vitalsには下記3つの指標があります。

  • LCP(Largest Contetful Paint)
  • INP (Interaction to Next Paint)※3月12日以前はFIDでした
  • CLS(Cumulative Layout Shift)

LCP(Largest Contentful Paint)は「Webブラウザの『主要な部分』の読み込み時間」を示す指標で、読み込み速度がどのくらい早いかを表しています。また、CLS(Cumulative Layout Shift)は「ページコンテンツの視覚的な安定性」を示す指標です。皆さんは、Webページが読み込まれレイアウトが表示される際、予期せずレイアウトが変わり、クリックするつもりのなかったボタンを間違えてクリックした経験はないでしょうか。CLSはこのような予期しないレイアウトの変化がどの程度あったのかを表しています。

つまり、Core Web VitalsはユーザーがWebページを快適に閲覧・操作するため、Webページがどれだけ読み込み時間が短くかつレイアウトが予期せず変化せず、サクサク動くかを指標にしたものです。

INPとFIDの違いは

では、今回FIDからINPに指標が置き換えられましたが、INPとFIDはどのように違うのでしょうか。
FIDは「First Input Delay」の略で、「初回入力までの遅延時間」のことを指し、読み込み時の応答しないページにてユーザーが最初に行った操作から、その操作に応じてブラウザが実際にコード処理を開始するまでに発生した遅延時間を表しています。それに対してINPはWebページに滞在している間に発生した操作の中で最も応答時間(入力遅延、コード処理、表示処理の合計)が長かった時間を指しています。

そのため、INPとFIDはどちらも操作に対する遅延時間を示す指標ですが、大きく以下2点が異なります。

  • 計測範囲:INPはページ滞在期間中であるが、FIDはページ読み込みフェーズのみ
  • 計測対象:INPは操作に対して発生した入力遅延、コード処理、表示処理を合計した応答時間に対してFIDは入力遅延時間のみ

FIDは読み込みフェーズでの入力遅延のみに着目しているため、サイトの応答性に関するユーザーの第一印象に関わる重要な指標です。しかし、第一印象だけでなくより包括的にWebページの応答性を評価する必要がでてきた結果、Webページ滞在間の応答時間(入力遅延、コード処理、表示処理の合計)を計測するINPの方が「応答性」を示す指標として適しているとGoogleは考え、指標を置き換えました。

INPの計測方法

次にINPの測定方法について説明します。現在はまだ、サーチコンソールでINPの数値を計測することはできず、WebページのCLSの数値の確認、またそれぞれの指標の低下要因を知りたい場合は「Pagespeed insights」を使うことで確認できます。

まず、PageSpeed Insightsを開き、INPを測定したいページのURLを入力し、分析をクリックします。

下記の赤部分がINPの分析結果です。PageSpeed Insightsではフィールドデータ、ラボデータの2つの分析結果がありますが、現状INPはフィールドデータでのみ確認できます。PageSpeed Insightsの詳しい見方はPageSpeed Insights(ページスピードインサイト)の使い方にて解説しています。

INPの低下要因

過剰なメインスレッド処理により入力遅延が長くなり、処理時間も長くなる

そもそもメインスレッドとはWebページを新たに読み込んだ際に、一番最初に立ち上げられるスレッド(プログラムが起動してから処理を実行し終えるまでの一連の流れ)のことです。メインスレッドでは、画像や文字の画面表示処理を主に行います。そのため、メインスレッド処理が重くなると、表示処理が影響を受けてしまい結果的に、遷移やクリック・タップの反応が遅くなります。

DOMのサイズが過大になり、表示処理に時間がかかる

そもそもDOMとはHTMLをツリー構造で表現されたHTMLやXML要素の数や仕組みのことです。DOMのサイズが小さければ、表示処理は通常すぐに終了し、DOMのサイズが大きくなれば、表示処理時の作業工数が増え遅延時間が発生しやすくなる傾向にあります。

INPの改善方法

メインスレッド処理を最小化する

メインスレッド処理を最小化する方法は以下の方法があります。

  • JavaScript/CSSの余分な記述を削除する
  • HTML内のJavaScriptの記述位置を後ろにする
  • Web WorkersなどでJavaScriptをバックグラウンドで処理する

動く画像や写真のスライドショー、リアルタイムに時を刻む時計などのデザインを含むWebページは、ほぼJavaScriptで書かれており、JavaScriptはメインスレッド上で動くプログラムです。そのため、JavaScriptを最小化することは、メインスレッド処理の最小化に繋がります。

JavaScript/CSSの余分な記述を削除し、圧縮・最小化する

メインスレッド上で動くプログラムであるJavaScriptやCSSの余分な記述を削除し、圧縮することで、JavaScriptやCSSの処理負担が軽くなります。

JavaScriptやCSSには、スペース、インデント、コメントなどの文字が含まれています。しかし、これらは人がファイルの内容を理解するために記載しているもので、ブラウザにとっては不要なもので削除することができます。削除・圧縮自体はネット上で提供されているコードの削除・圧縮ツールを活用すれば簡単に行えます。

JavaScriptの記述位置をタグ直前のような後ろに持ってくる

JavaScriptの記述位置は、タグ内やタグ直前など記述できる箇所はいくつかります。タグ内に記入するとページの内容を読み込む前にJavaScriptを実行しなければいけないため、ページ表示が遅くなってしまいます。

そのため、JavaScriptの記述をタグ直前に記載することで、ページ表示後にJavaScriptの処理を行うことができます。

Web WorkersなどでJavaScriptをバックグラウンドで処理する

そもそもJavaScriptは通常、メインスレッドで処理されますが、Web Workersというスクリプトを使用することでバックグラウンド処理(マルチスレッド)が可能になります。

メインスレッドとは別にスレッドが生成されるため、JavaScriptが重い処理を実行したとしてもメインスレッドが処理するタスクは軽減されます。

DOMサイズを最小限に抑えて処理時間を短縮する

大きな DOM を大幅に減らす方法として以下が挙げられます。

  • ウィジェットを必要なもののみに絞る
  • 外部埋め込みファイルを多く埋め込まない
  • 不要な子要素を削除する/li>

ウィジェットとは、アプリやWebサイト上に追加できる機能のようなものです。(Wordpressのプラグインと異なり、バックグラウンドや管理画面に影響するものではないです。)ウィジェットや外部埋め込みファイルなどは簡単にWebサイト上に埋め込める反面、その分のDOMが増えます。ウィジェットや外部埋め込みファイルを利用する際は、必要なもののみを利用するようにしましょう。

SEO最新情報やSNS最新情報をまとめて確認してみましょう

SEO最新情報を画像クリックして確認する
GrowthSeedが提供する”今話題のSEO最新情報”をチェックする

株式会社フルスピードが運営するオウンドメディアGrowthSeedでは、SEOとSNSの最新情報を素早くキャッチして記事コンテンツとしてまとめています。これまでのSEO最新情報が上記バナーから確認できますので、SEO最新情報の収集目的でご活用ください。

株式会社フルスピードのSEOコンサルティングサービスのご紹介

株式会社フルスピードのSEOコンサルティングサービスのご紹介(資料DLページ)
株式会社フルスピードのSEOコンサルティングサービス(株式会社フルスピードはAhrefs社のオフィシャルパートナーです)

株式会社フルスピードはSEOコンサルティングサービスをご提供しています。株式会社フルスピードは2001年の創業から5,500社以上ものSEOコンサルティング実績を積み上げてまいりました。

株式会社フルスピードは世界で60万人が導入する最高水準のSEO分析ツールAhrefsのオフィシャルパートナーでもあり、これまで培ってきたSEOノウハウとAhrefsのサイト分析力を活かしたSEOコンサルティングサービスをご提供することが可能です。SEOコンサルティングサービスの詳細に関しましては上記バナーをクリックしてご確認くださいませ。お気軽にご相談ください。

【無料DL】Core Web Vitalsの入門書をダウンロードしてもっと理解を深める
Core Web Vitals入門書(株式会社フルスピードのお役立ち資料)

この記事を書いた人
伊藤 康貴

伊藤 康貴

マーケティング部

2018年Web広告会社に入社、比較メディアやSEOのコンサルティング営業に従事。3年間で200社以上の企業様の集客に携わる。 より集客の見識を深めるために2021年フルスピード入社。 オウンドメディア『GrowthSeed』の運営/ライティング、メルマガ運用、広告運用など自社のマーケティング業務を担当している。

記事の関連タグ
資料ダウンロード            
SEOの人気記事
           
SEOの新着記事
関連タグから記事を探す
       

Webマーケティングに関する
資料請求・ご依頼はこちら