JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらHTMLの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。

二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。

preloadに対応する十二のファイル

audio：音楽

video：動画

track：字幕

script：JavaScript

stylesheet：CSS

font：フォント

image：画像

fetch crossorigin：XHR／fetch

worker：Worker／SharedWorker

embed：埋め込み（プラグインデータ）

object：埋め込み（リソース全般）

document：iframe／frame

使い方はサイトの表示速度を上げる「rel="preconnect"」などのHTMLのリソースヒントと同じようにHTMLのhead内にlinkタグで記載するけれども「rel="preload"」は少し違ってファイルの種類もas属性で指定しなくてはならない。汎用的なソースコードのサンプル<link href="ファイルのURL" rel="preload" as="ファイルの種類">ファイルの種類はpreloadに対応する十二のファイルから選択する。その他、type属性／MINE typeやcrossorigin属性／CORSやmedia属性／media queryをオプションで追加できる。オプションを追加したソースコードのサンプル<link href="https://example.com/img.jpeg" rel="preload" as="image" type="image/jpeg" crossorigin="anonymous" media="(max-width: 480px)">JavaScriptの画像などの読み込みが遅い場合にpreloadを使うならばbody内に記載する方法もあるからサイト作成によっては便利かも知れない。head内を操作できない、または個別ページで編集できないホームページやブログではlinkタグは使えないので、body内のソースコードが重宝する。JavaScriptによるソースコードのサンプル<script> var res = document.createElement("link"); res.rel = "preload"; res.as = "ファイルの種類"; res.href = "ファイルのURL"; document.head.appendChild(res); </script>サイトのhead内にlinkタグで記載したのと同様のプログラムになっているので、さらに「res.type」と「res.crossorigin」と「res.media」からオプションも個別に追加できるだろう。JavaScriptで複数の画像を切り替えるコンテンツなどにpreloadを使うとファイルの読み込みの高速化を実感する。一枚目はサイトの閲覧と同時に読み込まれるので、二枚目以降の初回の閲覧に大きな違いが出て来る。読み込んだ後はブラウザにキャッシュされるためにどちらの画像も直ぐに表示されるように変わる。preloadがコンテンツの表示速度を上げるのに効果的なのは飽くまでもファイルの初回の閲覧が対象だ。もちろん一枚目にも使えるし、画像を他のコンテンツよりも先に表示したい場合に役立つ。サイトの表示速度を全体的に上げるためには画像などの大きめのファイルを先読みする、すなわちファイルのダウンロードを優先的に指定すると却って遅くなり兼ねない。概してpreconnectの事前接続だけに止める方が良いと思うけど、ただし最初は非表示でも閲覧される可能性が高いコンテンツには開く際に待ち時間を減らせるのが有り難い。必要に応じてlinkタグやJavaScriptのソースコードで組み込んでおくと相当に気持ち良く運営できる。

参考サイト

rel="preload" によるコンテンツの先読み

コメント