画像を多く使ったサイトでは、画像の表示スピードはユーザビリティの観点から、非常に重要になります。
訪問者の満足度やコンバージョン率を高めるためには、表示スピードは重要な要素の一つです。
今回は、画像を事前に読み込むためのテクニックであるpreloadを使った方法についてまとめます。
preloadとは
preloadと言っていますが、正しくは＜link rel=”preload”＞です。
＜link rel=”preload”＞ は、ページで必要となるリソース（フォントや画像など）をあらかじめブラウザにロードさせることができます。
これにより、ユーザーがリソースを必要とした際に、遅延を最小限に抑えることができます。
具体的な実装方法
＜head>＞タグ内に下記のようなコードを入力するのみです。簡単ですよね。。
<!-- 画像をpreload -->
<link rel="preload" href="image.jpg" as="image">
<!-- cssやjsをpreload -->
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<!-- フォントをpreload -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">これで画像やファイルが前もってロードされます。
もう少し実務向きのコードで書くとしたら、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
<!-- 画像をpreload -->
<link rel="preload" href="image.jpg" as="image">
<!-- cssやjsをpreload -->
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<!-- フォントをpreload -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
</head>
<body>
<p>本文が入ります。</p>
</body>
</html>このような感じになります。
preloadのデメリット
非常に便利なpreloadですが、注意点がいくつかあります。
①使い過ぎを避ける
多くの画像をpreloadしようとすると、結局読み込みに時間がかかってしまいます。
キービジュアル等のpreloadが必要な画像のみに設定してください。
②一部のブラウザで対応していない
IEがサポートを終了しているため、滅多に対応していないブラウザはないかと思いますが、Can I useから対応ブラウザをご確認ください。
まとめ
＜link rel=”preload”＞ は、適切に活用することで、ページの表示速度を向上させ、訪問者の満足度やコンバージョン率を高めることができます。
