「キー リクエストのプリロード」とは？改善方法も解説【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(親)に下記のような記述をしておくと、main.js(子)と同じタイミングで、孫に当たるchild.jsやchild.cssもリクエストされ、処理されます。
<link rel="preload" href="child.css" as="style">
<link rel="preload" href="child.js" as="script">リソース読み込み順序の変化によって処理完了までにかかる時間が高速になる様子は、 webブラウザの開発者ツールなどを使用することで 確認できます。なお、今回挙げたjsやcssファイル以外にも、preloadの指定ができるファイル形式はありますので、必要に応じてご確認ください。
