Help us understand the problem. What is going on with this article?

rel="preload" でリソースを事前にダウンロードする

More than 1 year has passed since last update.

概要

link 要素rel 属性preload を指定することで、ナビゲーションが行われた後に指定したリソースをダウンロードします。

サブリソースから参照される画像やフォントなどのリソースは、参照元のロードのタイミングに依存します。

rel="preload" を使用して、必要なリソースを事前読み込みをすることでパフォーマンスの向上に寄与する可能性があります。

本稿ではサブリソースから参照されるファイルの取得タイミングについて、紹介したいと思います。

サブリソースに書かれたリソースの読み込みタイミング

例として CSS から画像を参照するコードを rel="preload" を使った場合と使わない場合について見てみることにします。

rel="preload" を使わない場合

下記のような HTML があるとします。

<html>
<head>
    <meta charset="UTF-8">
    <link href="/style.css"  rel="stylesheet">
</head>
<body>
    <div class="image"></div>
</body>
</html>

参照されている CSS は下記です。

.image {
  width: 640px;
  height: 426px;
  background: url(./dog.jpeg);
}

このような場合ブラウザが dog.jpeg をダウンロードするタイミングは

  1. CSSのダウンロードする
  2. ダウンロードした CSS をパースする
  3. .image のセレクタにマッチしている要素を見つける

というプロセスが完了したあとになります。

Google Chrome の Network タブで確かめてみましょう
スクリーンショット 2018-10-25 17.18.21.png

style.css を読み込んだ後、 dog.jpeg をダウンロードしているのがわかります。

それでは rel="preload" を使って事前読込した場合はどうでしょうか。

rel="preload" を使った場合

下記のようにコードを修正します。

<html>
<head>
    <meta charset="UTF-8">
    <link href="./dog.jpeg" as="image" rel="preload">
    <link href="/style.css"  rel="stylesheet">
</head>
<body>
    <div class="image"></div>
</body>
</html>

html の head 要素 内に <link href="./dog.jpeg" as="image" rel="preload">
を追加しました。CSS に変更はありません。

Google Chrome の Network タブで確かめてみましょう。
スクリーンショット 2018-10-25 17.14.20.png

dog.jpeg が style.css の前に読み込まれているのがわかります。

まとめ

rel="preload" を使った画像の事前ダウンロードについて説明しました。
今回は画像を例にしましたが、rel="preload" では、フォントファイルや動画なども指定できます。

参考

rel="preload" によるコンテンツの先読み - HTML: HyperText Markup Language | MDN
Preload を用いたリソースプリローディングの最適化 | blog.jxck.io
超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away