キーリクエストをpreloadで先読みして高速表示する方法

キーリクエストのpreloadとは、読み込みが後回しになっているファイルを先読みするというものです。読み込み順を正しく記述することで、表示速度の高速化が見込めます。

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

※Pagespeedinsightの改善できる項目より

Pagespeedinsightでこんなメッセージが出たなら、先行してフェッチさせるキーワード「preload」は必須なテクになります。
この機会にマスターしちゃいましょう ( ´ ▽ ` )ﾉ

【INDEX】－目次－

preloadとは

速い

preloadとはlinkタグのrel属性値に"preload"を指定するだけで、hrefで参照したリソースを事前に読み込むことが出来るキーワードです。

通常のlinkタグと違い、非同期に読み込むためレンダリングをブロックしません。そのため高速表示につながります。

この仕様は、リンク要素で使用できるpreloadキーワードを定義します。このキーワードは、早期フェッチを開始し、フェッチをリソース実行から分離する宣言型フェッチプリミティブを提供します。

先読みできるコンテンツとして、ホームページデザインで使用されている「fontawesome」や「fontello」といったウェブフォントが挙げられます。

ウェブフォントはサイトイメージやデザイン性に優れていますが、サーバーに置かれたフォントを呼び出し表示するため、サイト表示に時間がかかりがちです。

そこでレンダリングを妨げず、非同期でpreload（先読み）することで、ファーストビューを高速表示させることが可能になります。

preloadの記述は、いたってシンプルです。

サンプル

<link rel="preload" as="font" href="リソースパス" type="font/woff2" crossorigin >

preloadはhtmlの<head>内で宣言します。preloadはリソースを優先的にフェッチするだけで実行はしませんので、そのリソースを実行する記述をpreloadのあとに記述します。

↑記述順には気を付けよう

【href属性】

href属性にリソースの参照先パスを指定します。

【as属性】

ファイルの種類を指定することで、リソースの読み込みの優先付けをより正確に処理することができます。また将来のリクエストのためにキャッシュに格納して、リソースの再利用を可能にします。

【type属性】

MIMEタイプを指定しすることで、ブラウザによって対応しているリソースであるかどうかを確認します。対応している場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。

そして最後に、crossoriginを記述します。記述漏れするとブラウザでプリロードが実行されません。crossoriginについて詳しくは、MDN web doc「オリジンをまたいだフェッチ」をご参照ください。

as種類	詳細
audio	通常は<audio>で使用される音声ファイル
document	<frame>や<iframe>に埋め込まれる HTML 文書
embed	<embed>要素の中に埋め込まれるリソース
fetch	ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース
font	フォントファイル
image	画像ファイル
object	<object>要素の中に埋め込まれるリソース
script	JavaScript ファイル
style	CSS スタイルシート
track	WebVTT ファイル
worker	JavaScript ウェブワーカーまたは共有ワーカー
video	通常は<video>で使用される動画ファイル

MINEタイプ（fontの場合）

拡張子	詳細
TTF	通常はローカルフォントで利用。4.4より前の旧式 Android ブラウザに対応する場合にも利用。
WOFF	TTF を圧縮しており、Web フォントとして利用する。大部分のブラウザが対応しているため、IE でも利用が可能。
WOFF2	WOFF より圧縮率が高く、より高速で Web フォントを利用できる。モダンブラウザは対応済み。Google が利用を推奨している。