「キー リクエストのプリロード」とは?改善方法も解説【PageSpeed Insights】

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

スポンサードリンク
スポンサードリンク

「キー リクエストのプリロード」とは?

Googleによって提供されているツール、「page speed insights」ではwebサイト表示速度をチェックできます。「キーリクエストのプリロード」とは、ここでチェックされる表示速度を高速化・改善する対応策の一つです。現代の一般的なwebページは、HTML・JavaScript・CSS等各種のファイルによって構成されています。ユーザーのブラウザでコンテンツを描画・表示するまでにはこういったリソースが読み込まれていますが、その読み込み順序について適切な優先度を指定することによって、高速な表示が可能となります。「キーリクエストのプリロード」では、link時にpreload属性を使用することでこの指定を行います。

スポンサードリンク

「キー リクエストのプリロード」の改善方法

webブラウザで画面が表示されるまで

webブラウザは、HTMLをはじめとするリソースをサーバにリクエストし、ダウンロードされたそれらの構造を解析し、描画を行います。具体的なケースを使って、考えてみましょう。ここでは、たとえば index.htmlから呼ばれるmain.js(JavaScript)、そのmain.jsから呼ばれるchild.jsとchild.cssといったリソースがある場合を想定して説明します。

このケースでは、ユーザーの手元のwebブラウザでページの描画が終了するまでの順序は、何も指定をしない場合にはindex.htmlからまずmain.jsが呼ばれ、それがブラウザに読み込まれた後に、child.jsやchild.cssが呼ばれ…という流れになります。つまり親→子→孫…というような順番でリソースが処理されることになります。page speed insightsでも計測される、表示完了となるまでの時間は、「孫にあたるchild.jsやchild.cssまで処理が行われたときまで」です。キーリクエストのプリロードを行うことで、これらの処理に必要になる時間を改善することが可能です。

プリロードの指定方法

キーリクエストのプリロードでは、上記のような構成のページにおける親の位置にあたるHTMLの 要素にて、孫の位置(※「孫」であることがポイントです)にあたるリソースへの 要素のrel 属性に「preload」を指定しておきます。こうすることによって、何も指定しなかった場合には、子の位置にあたるリソースから段階的に読み込まれて処理されていたリソースが、先読み的に事前に読まれ、処理されるようになります。

上述のファイル名の例でいうと、index.html(親)のにて、 「<link rel=””preload”” href=child.js(孫)””…」「<link rel=””preload”” href=child.css(孫)””…」といった記述をしておくことで、main.js(子)と同じタイミングでchild.jsやchild.cssもリクエストされて読み込まれ、処理されていきます。webブラウザの開発者ツールなどを使用することで、実際にそのようなリソース読み込み順序の変化が起こり、処理完了までにかかる時間が高速になることが確認できます。なお、今回挙げたjsやcssファイル以外にも、preloadの指定ができるファイル形式はありますので、必要に応じてご確認ください。

スポンサードリンク
スポンサードリンク

関連コンテンツ(一部広告含む)

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。