「入力の推定待ち時間」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「入力の推定待ち時間」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

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

インターネットブラウザを使う目的の一つに、様々な情報を検索することがあります。情報を検索する時には、検索フォームと言われる場所に、指定された文字を入力してサーバー側に情報を伝え、その結果が表示されるまで一定時間待つことになります。ユーザーが必要な情報を入力してから必要な情報が表示されるまでの時間のことを、「入力の推定待ち時間」という表現で表しています。グーグル社がディベロッパー向けに提供しているツール「ページスピードインサイト」では、ページの読み込み時間における、ユーザーの入力に対するアプリの応答時間として定義されています。

「入力の推定待ち時間」の改善方法

ページ読み込みで最も混雑が予想される時間は、おおよそ5秒とされています。「ページスピードインサイト（PageSpeed Insights）」ではユーザーの入力完了後、どのくらいの時間でアプリが正確に応答するのかを、ミリ秒で表示されます。この待ち時間が50ミリ秒を超えると、アプリ側に問題があるとみなされるため、改善を行う必要があります。主な改善項目としては、ページ表示に必要な要素の一つ、レンダリングブロックの解消を行うことがメインとなります。この部分を工夫することで、検索結果の表示が改善する可能性があります。

レンダリングを妨げるレンダリングブロックとは

ページを適切に表示するためには、ブラウザ上にあるピクセルを描画する必要があり、それにはCSSファイルが使われます。ブラウザはその表示を適切に行うため、CSSの解析を試みますが、これをレンダリングブロックといいます。「ページスピードインサイト」では、スクロールせずに見えている、コンテンツ以外のCSSも読み込んでいるために、余計にレンダリングが遅くなっていると解釈されます。一度に読み込むCSSファイルの数を制限し、段階的に読み込むといった改善案がベストの選択肢となります。

CSSファイルの優先順位とクリティカルCSS

一番先に読み込むCSSファイルは、「スクロールしていないときに表示される領域」の部分です。これに該当するCSSファイルは、「クリティカルCSS」と呼ばれており、ブラウザにおける最初のレンダリング処理を担当します。このファイルを抽出し、インラインでHTMLのheadタグに記述する処理と、クリティカルCSSの先読み処理を並行して行います。HTMLのheadタグ内での記述方法としては、タグの前に