ラボラジアン 目次
1. rel=”preload” について
HTML では、<link> タグの rel という属性に preload という値を指定することによって、href属性で指定したリソース（通常はファイル）を先読みさせることができます。
CSSファイルを先読みする場合だとこんなふうに書きます。
<link rel="preload" href="main.css" as="style">
※ as 属性にファイルの種類を指定することで、ブラウザがファイルに合った最適なタイミングを判断することができます。
読み込みは非同期に実行され、レンダリングをブロックしない
この記述はブラウザに対して「このリソースは早めに読み込んでください」と指示することになります。そしてブラウザはこのリソースをなるべく早いタイミングで読み込むのですが、この読み込み処理は 非同期 で行われ、レンダリングをブロックしません。これにより、レンダリングが速くなるというわけです。
通常の読み込み処理の記述が別に必要
但し、気を付けなければいけないのは、この先読みはあくまで「後で使うためにリソースを先に読んでおくだけで、実行（適用）はされない」ということです。実行（適用）を行うためには、そのリソースを通常通りに読み込む記述が別に必要になります。
CSSファイルの例でいうと、先読みした後で以下の記述を動的に追加する必要があります。
<link rel="stylesheet" href="main.css">
これを JavaScript で行うには、以下のコードで可能です。
let preloadedStyle = document.createElement("link");
preloadedStyle.href = "main.css";
preloadedStyle.rel = "stylesheet";
document.head.appendChild(preloadedStyle);
このコードを実行すると「main.css ファイルは既に取得済である」とブラウザが判断し、ダウンロードすることなく、このスタイルシートが適用されます。逆にいうと、リソースとなるファイルを適用するタイミングをWebページの製作者が決められるということです（このコードをどこに書くか？次第ですので）。
ちなみに、CSSファイルが先読みできたらすぐに適用させたい場合は、上の JavaScript コードを実行するのではなく、以下のように <link> タグを書くことで可能です。
<link rel="preload" href="main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
onload イベント（読み込み時）に、この <link> タグ自身の rel 属性値を “stylesheet” に書き換えるということをやっています。
2. デモページ
先程例として紹介した CSSファイルの読み込みを行うデモページを用意しました。
デモページ
※ もう一つ、おまけのテストページも作ってあります。「rel=”preload” のテストページ2」
3. その他の特徴
as 属性でファイルの種類を指定する
<link> タグの as 属性に指定できる値の種類は、「3.2 as attribute | Preload」に載っていますが、かなりたくさんの種類がサポートされています。具体的には、style, script, image, font, audio, video などです。
type 属性で MIMEタイプを指定する
ブラウザによってサポートしていない可能性のあるリソースを先読みする場合は、<link> タグの type 属性にその MIMEタイプを指定しておきましょう。ブラウザは、サポートしていない MIMEタイプである場合にはダウンロードを行いません。
media 属性で先読みする条件を指定できる
<link> タグの media 属性には メディアタイプ や メディアクエリ を指定することができます。この指定は、先読みを実行する条件となります。
参考：Including media | Preloading content with rel=”preload” | MDN
4. 使い所
スタイルシート内で参照されているフォントファイルの先読み
スタイルシートの中でフォントファイルが読み込まれている場合、ブラウザがそれを検知するのを待つのではなく、そのフォントファイルを rel=”preload” で先読みさせておくとよいでしょう。
参考：Preloading content with rel=”preload” – HTML: Hypertext Markup Language | MDN
Webページ上のメインコンテンツでない部分
Webページ上のコンテンツの中で、多少表示が遅れても構わない部分に関するリソースは、rel=”preload” で先読みさせるとよいです。こうすることで、メインのコンテンツ部分のレンダリングが速くなるはずです。
5. Polyfill
IE などのブラウザは rel=”preload” に未対応ですが、Polyfill を使えば対応させることができます。
例えば、以下の Polyfill が使えます。
使い方としては、まずどこのディレクトリ内で以下を実行します。
$ npm ini -y
$ npm install @digitalkaoz/preload-polyfill
すると、distディレクトリが生成され、その中に必要な JavaScript ファイルが入っていますので、これを Webサーバー上にコピーし、HTML の <head> 内で以下のように読み込ませるだけです。
<script type='text/javascript' src='/path/to/preload-polyfill.min.js'></script>
<script type='text/javascript' src='/path/to/preload-polyfill-invoke.min.js'></script>
<script type='text/javascript' src='/path/to/preload-polyfill-inline.min.js'></script>
6. 情報源
- 仕様：Preload
- ブラウザの実装状況：Resource Hints: preload | Can I use…
7. おわりに
使い所を判断するのが難しい機能だと思いますが、ウェブページを高速化したい場合には、試してみる価値があります。
こんにちは。
下記のブログのpreloadに関する内容がこちらのブログの内容にとても似ていたのでご連絡しようと思いました。
https://note.com/airis0/n/n03b01150e43f
以前↑の記事に「内容がかなり酷似していますが大丈夫でしょうか？」とコメントしたところ削除されていたので、もしかしたらパクリなのでは？と思いご連絡した次第です。
ご報告ありがとうございます。
これは……、ちょっと対応を考えます。