Facebook Twitter RSS
ホーム ホームページ制作会社WEB企画 ウェブ企画ラボ HTML・CSS サイト高速化に必須の link rel=preload とは?(使い方とサンプルHTML・CSS)

サイト高速化に必須の link rel=preload とは?(使い方とサンプルHTML・CSS)

この記事のタイトルとURLをコピーする
サイト高速化に必須の link rel=preload とは?(使い方とサンプルHTML・CSS)
https://webkikaku.co.jp/blog/htmlcss/preload/
facebook twitter hatena Pocket

preload

サイト高速化にあたり Google の PageSpeed Insights と睨めっこをしている際、「キー リクエストのプリロード」という項目が出現しました。

キー リクエストのプリロード

<link rel="preload"> を使用して、現在ページ読み込みの後のほうでリクエストしているリソースを優先的に取得することをご検討ください。

↓こんな感じのです
キー リクエストのプリロード

この改善がサイト高速化に効く使える技術であることがわかったのですが、なかなか理解しにくかったので、今回は <link rel="preload"> についてわかりやすく説明していきます。

これまでスルーしてしまっていた方は、これを機会に覚え、使いこなせるようにしてみましょう。

link rel=preload とは

preload=プリロードと読むそうです。

その名の通り、プリ=先行、ロード=読み込み、で先行読み込みをブラウザに指示する機能になります。

link 要素なので、基本的にヘッダーに記述し利用します。

具体的に果たす役割

例えば以下のようなファイルで構成されるWebページがあったとします。

index.html
|--style.css
   |--main-image.jpg

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>sample</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="main-image">キャッチコピー</div>
	</body>
</html>

CSS

.main-image {
	background-image: url("main-image.jpg");
}

style.css の中で、「キャッチコピー」の background-image として main-image.jpg が呼び出されているイメージです。

これをブラウザで読み込んで、 Chrome のディベロッパーツールで確認してみると、下図のような順番で読み込まれていることがわかります。

通常の読み込み順番

まず ① index.html が読み込まれ、次に ② style.css が読み込まれ、最後に style.css に記述されている ③ main-image.jpg が読み込まれていますよね。

では次に preload を記述してみましょう。

CSSはそのままで、HTMLに追記します。

HTML(preload 追記)

<!DOCTYPE html>
<html>
	<head>
		<title>sample</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link rel="preload" href="main-image.jpg" as="image">
	</head>
	<body>
		<div class="main-image">キャッチコピー</div>
	</body>
</html>

すると以下のように読み込まれます。

preload記述後の読み込み順番

style.css と同時に preload で指定した main-image.jpg も読み込まれていることがわかると思います。

このように preload を利用すると、ブラウザに先読みの指示を出すことができます。

preload で先読みできる要素の一覧

先程のサンプルHTMLでは as=”image” と記述されていたように preload は as 属性で要素を指定する必要があります。

下記が指定可能な要素の一例です。(よく使いそうなやつ)

as=”” 備考
image <img>や<picture>などを利用する際に
embed <embed>を利用する際に
object <object>を利用する際に
document <iframe>や<frame>を利用する際に
script <script>を利用する際に
audio <audio>を利用する際に
font CSSで@font-faceを利用する際に(ウェブフォントなど)

画像やウェブフォントなど、サイトが重くなる要因で、レンダリングをブロックしがちな要素を指定することができますね。素敵ですね。

ちなみにウェブフォントを利用する際は、

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

現状は上記のように crossorigin も記載する必要があるようです。

as について詳しい解説は W3C のサイトをご参照ください。(英語)

こちらも詳しい解説として参考になります。(mozilla が推奨していた as についての完全な解説のリンク)

どのようなシーンで活躍するのか

レンダリングをブロックするような要素を、全て preload で先読みしてしまうと、同時に読み込まれるファイルサイズが大きくなりすぎてしまうことがあります。その場合、逆に遅くなるという可能性もあります。

大きい画像もフェブフォントもビデオファイルも、全て先読みしてしまいたいのは山々ですが、現実的な使い方としては、

「ファーストビューで読み込まれる要素を先読みする」

という使い方が今のところベストだと思います。

その他の preload の特徴について

preload にはその他にも特徴があるので、さらに勉強したい方のためにご紹介しておきます。

ブラウザの対応状況

残念ながら IE 、 Firefox では未対応です。モバイルで多く利用されている Safari で利用できるのはありがたいですね。

Can I use で確認する
https://caniuse.com/#search=preload

メディアクエリも指定できる

これすごいですよね。「デバイスサイズがスマホサイズなら preload する」なんて指示も出せちゃいます。

メディアクエリを指定する場合は、下記のように記載します。

<link rel="preload" href=“sp.jpg” as="image" media="(max-width: 600px)">
<link rel="preload" href=“pc.jpg” as="image" media="(min-width: 601px)">

おわりに

対応当時は概念を理解するのに時間を要したのですが、最近Googleさんが用意してくれているヘルプがとてもわかりやすかったです。

もっと早くこのヘルプページを公開してくれてれば、自分の知識に preload できたのになぁ、なんてちょっと上手いこと思ったりも。

そのヘルプページは英語オンリーですがこちらから

Preload key requests | Tools for Web Developers | Google Developers
https://developers.google.com/web/tools/lighthouse/audits/preload

また、他にもできるマニアックなこと(type や crossorigin の指定など)もありますので、全て知りたいという方は、日本語不完全の翻訳ですが、下記リンクが一番参考になりました。

rel="preload" によるコンテンツの先読み – HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content
この記事のタイトルとURLをコピーする
サイト高速化に必須の link rel=preload とは?(使い方とサンプルHTML・CSS)
https://webkikaku.co.jp/blog/htmlcss/preload/
facebook twitter hatena Pocket

東京・名古屋を中心に、中小企業に特化したホームページ制作会社。マーケットやビジネスモデルに合わせ一社一社に合わせたウェブ制作・リニューアルのご提案しています。
1000サイト以上のウェブマーケティング支援で獲得したノウハウで、リニューアル後に過去最高の成果を生み出したお取引先は多数。勘ではなくロジックに基づいたホームページ制作と柔軟な対応力で多数のお客様にご評価頂いております。

どのようなお悩みでも構いません。ホームページを有効的に活用できていないと考えているご担当者の方、まずは一度弊社にご相談くださいませ。

ご提案依頼・ご相談はこちら
公式facebook、twitterから情報を受けとる
いいね!する フォローする
前のページ
次のページ
ページトップ