「入力の推定待ち時間」とは?今のPageSpeed Insightsでの扱いと表示速度の改善方法

Webページの表示速度を無料で診断できるGoogleの「PageSpeed Insights」。診断結果のレポートを見ていると、聞き慣れない専門用語に戸惑うことも少なくありません。この記事では、かつてPageSpeed Insightsの指標の一つだった「入力の推定待ち時間(Estimated Input Latency)」について、その意味と現在のレポートでの扱いを解説します。あわせて、ページの応答性を改善するための具体的な方法も紹介します。

「入力の推定待ち時間」とは?

「入力の推定待ち時間(Estimated Input Latency)」とは、ユーザーがページ上で何らかの操作(タップ・クリック・キー入力など)を行ってから、ブラウザがその操作に応答するまでにかかると推定される時間のことです。以前のPageSpeed Insights(Lighthouseバージョン5まで)では、ページの読み込み時間を評価する6つの指標の一つとしてこの項目が表示されており、数値が大きいほど「操作に対する反応が遅いページ」と判断されていました。

なぜ今のレポートには表示されないのか

現在のPageSpeed Insightsで「入力の推定待ち時間」という項目を見かけることは、ほぼありません。これは、診断エンジンであるLighthouseがバージョン6(2020年)にアップデートされた際、この指標がTotal Blocking Time(TBT)Max Potential First Input Delayという、より精度の高い指標に置き換えられたためです。

さらに、実際のユーザー体験をもとにしたCore Web Vitalsの指標としては長らくFirst Input Delay(FID)が使われてきましたが、2024年3月にはInteraction to Next Paint(INP)に置き換えられています。

🔍 つまり「入力の推定待ち時間」は、現在のPageSpeed Insightsを使ううえでは意識する必要のない過去の指標です。レポートに表示されていなくても、何も問題はありません。

今、注目すべき指標:TBTとINP

Total Blocking Time(TBT)とは

TBTは、First Contentful Paint(FCP)からTime to Interactive(TTI)までの間に、メインスレッドが50ミリ秒以上ブロックされた時間の合計を示す「ラボデータ」上の指標です。値が小さいほど、ページがユーザーの操作に素早く反応できることを意味します。TBTについてはこちらの記事でも詳しく解説しています。

Interaction to Next Paint(INP)とは

INPは、ページ滞在中に行われたクリック・タップ・キー入力といった操作への応答時間を実際のユーザーから計測し、その代表値を算出する「フィールドデータ」上の指標です。Core Web Vitalsの一つとして、Googleの検索結果における評価にも影響するとされています。

ページの応答性を改善する方法

レンダリングを妨げるリソースを減らす

ページを表示する際、ブラウザはHTMLとあわせてCSSファイルを読み込み、解析します。このとき表示に直接関係のないCSSまで一度に読み込んでしまうと、画面の描画が後回しになり、結果としてページの応答性も低下します。これを「レンダリングブロック」と呼びます。改善のポイントは、読み込むCSSファイルの数や量を必要最小限に抑え、優先度の低いものは後から読み込むようにすることです。具体的な手順はこちらの記事で詳しく紹介しています。

クリティカルCSSをHTMLに直接記述する

画面を開いた直後に表示される範囲(ファーストビュー)の表示に必要なCSSは「クリティカルCSS」と呼ばれます。このクリティカルCSSをHTMLのheadタグ内に直接埋め込み(インライン化)、それ以外のCSSは非同期で読み込むようにすると、最初の描画が早まり、体感速度の向上につながります。

JavaScriptの実行時間を見直す

TBTやINPの数値が大きい場合、原因の多くはJavaScriptの実行に時間がかかっていることにあります。使われていないスクリプトを削除したり、表示直後には不要なスクリプトの読み込みを遅らせる「遅延読み込み」を取り入れたりすることで、メインスレッドの負荷を軽減できます。詳しい手順はこちらの記事で紹介しています。

まとめ

「入力の推定待ち時間」は、現在のPageSpeed Insightsには表示されない過去の指標です。しかし、その背景にある「ページの応答性を高める」という考え方自体は、今もTotal Blocking TimeやInteraction to Next Paintという形で受け継がれています。表示速度の改善に取り組む際は、最新の指標に注目しながら、レンダリングブロックの解消やJavaScriptの最適化といった基本的な対策を一つずつ進めていきましょう。

このテーマの関連記事はこちら