PageSpeed Insights 改善策 preload は安易に使わないこと

PageSpeed Insights の大きな評価項目の一つに、ページ表示の際にレイアウトの移動量が少ないことがあります。HTML は、基本的にソースコードの上から順に読み込みをはじめ、外部ファイルはその読み込みと並行処理されます。
つまり、外部ファイルのオブジェクト（画像や映像など）は、HTML でレイアウトが決まった後に読み込まれることになります。予め、読み込まれるオブジェクトのサイズが分かっていれば、HTML や CSS で width、 height 属性を利用してその領域を確保しておけばレイアウトの移動が起きないのですが、オブジェクトのサイズが可変である場合は、この方法はできません。もちろん、外部ファイルがオブジェクトではなく、レイアウトそのものを定義するようなものであった場合もこの方法は使えません。

この問題を解決する方法としてあるのが、preload です。ただし、注意しなければならないことがあります。

preload は、HTML5 で audio や video タグの属性としてと、link タグの rel 属性の値として利用することができます。で、今回の話は、rel 属性の値としての preload です。
具体的には以下の様な記述になります。

<link rel=”preload” href=”example.js” as=”script” />

ちなみに、as という見慣れない属性もありますが、これを宣言しておくことでブラウザがファイルに合った最適なタイミングを判断することを扶け、高速化に寄与します。
さて、この preload の意味ですが、example.js を HTML の記述順関係なく『先に読み込み始める』という指示になります。いいですか？あくまでも『先に読み込み始める』だけで、『先に表示したり実行したりする』のではありません。実行は、必要になった際、あるいは実行命令を出した際にされます。
要するに、ただ preload しただけだと、モノによっては遅くなることもあり、使いどころが結構重要です。使用を検討するケースとしては、ずばりざっくり言って以下です。

• ]HTMLのレンダリング（表示）完了後もまだ読み込みが続くような重い外部ファイル
• HTMLのレンダリングを止める、完全な非同期として読み込まれないファイル

前者は、例えば Web フォントで、後者は、例えば CSS ファイルです。ですが、具体的な読み込まれるファイルサイズや記述方法によって、必ずしも preload が高速化に繋がるとは言い切れません。
少なくとも、link タグに脊髄反射で preload を付けるのは絶対に駄目で、読み込み時のボトルネックを断定し、実測テストを踏まえての正式実装というプロセスを踏んで使う事をお勧めします。