Web

rel=”preload” によってリソースを先読みさせる

投稿日:2019年4月5日 更新日:

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. 情報源

7. おわりに

使い所を判断するのが難しい機能だと思いますが、ウェブページを高速化したい場合には、試してみる価値があります。

参考

📂-Web

執筆者:labo


  1. 太郎 より:

    こんにちは。
    下記のブログのpreloadに関する内容がこちらのブログの内容にとても似ていたのでご連絡しようと思いました。
    https://note.com/airis0/n/n03b01150e43f
    以前↑の記事に「内容がかなり酷似していますが大丈夫でしょうか?」とコメントしたところ削除されていたので、もしかしたらパクリなのでは?と思いご連絡した次第です。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Google App Engine

Google App Engine にデプロイしてあるファイルをダウンロードする

Google App Engine にデプロイしてあるファイルをダウンロードする方法について説明します。

Web

Icons8 の Free Icons を使う手順

Icons8 の Free Icons Icons8 というサイトでは、いろいろな種類の無料素材が提供されています。 今回、そのうちの1つである「アイコン(Free Icons)」を使う手順についての …

CSS

CSS の基礎

目次1. CSS とは?2. CSS のバージョン(分類)Cascading Style Sheets, level 1Cascading Style Sheets, level 2 (CSS2)Ca …

Web

ウェブ上の「名前を付けて画像を保存」ができない画像をダウンロードする方法

目次1. 「名前を付けて画像を保存」ができない画像2. この手の画像を保存する方法3. おわりに 1. 「名前を付けて画像を保存」ができない画像 ウェブページに載っている画像をダウンロードしたい場合、 …

Chrome

Chrome の「ピクチャー イン ピクチャー」機能を使って、YouTube の動画を最前面で再生する

目次1. Chrome の「ピクチャー イン ピクチャー」機能2. ピクチャー イン ピクチャーを行う方法3. プレイヤーの操作など3. おわりに 1. Chrome の「ピクチャー イン ピクチャー …