rel=”preload”を使ってみる

リソースの先読み(プリロード)の指定ができる、link要素のrel=”preload”を試してみます。

設定方法

まずは設定前のサンプルです。
以下のようなHTMLを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デモページ</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="mv"></div>
<img src="img.jpg">
</body>
</html>

.mvに背景画像を設定します。

.mv {
  width: 100%;
  height: 800px;
  background: url(mv.jpg) center center no-repeat;
  background-size: cover;
}

設定前のデモページ
このデモをchromeのDevToolsのNetworkタブで確認すると、CSS内で背景画像として指定しているmv.jpgは、CSSファイルの読み込み後に読み込みが開始されていることが確認できます。

次にpreloadでmv.jpgを設定してみます。
href属性にリソースのパス、as属性にリソースの種類を指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デモページ</title>
<link rel="preload" href="mv.jpg" as="image">
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="mv"></div>
<img src="img.jpg">
</body>
</html>

先ほどと同様にNetworkタブで確認すると、mv.jpgの読み込みタイミングが変更されたのを確認できました。
設定後のデモページ

as属性で使用できる値の一例は以下の通りです。

audio 音声ファイル。
document HTML文書。
font フォントファイル。crossorigin属性を合わせて設定する必要がある。
image 画像ファイル。
script JavaScriptファイル。
style CSSファイル。
video 動画ファイル。

link要素にmedia属性を使って、メディアクエリの指定をすることもできます。
先ほどのサンプルで、.mvの背景画像をSPとPCで出し分けるようにしてみます。

まずはpreload設定前です。
HTMLは最初のサンプルと同じなので省略します。

.mv {
  width: 100%;
  height: 800px;
  background: url(mv_sp.jpg) center center no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px), print {
  .mv {
    background-image: url(mv_pc.jpg);
  }
}

画面幅768px以上で画像を出し分けました。
media属性設定前のデモページ

次にpreloadの設定ですが、767px以下の時と768px以上の時の2つの設定を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デモページ</title>
<link rel="preload" href="mv_sp.jpg" as="image" media="(max-width: 767px)">
<link rel="preload" href="mv_pc.jpg" as="image" media="(min-width: 768px)">
<link rel="stylesheet" href="sample.css">
</head>
<body>
<div class="mv"></div>
<img src="img.jpg">
</body>
</html>

これで画面幅に応じて先読みする画像を変更することができました。
media属性設定後のデモページ

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829