webフォントは先読みで高速表示

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

 /

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

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

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

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

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

preloadとは

Pagespeedinsightのスコア画面。100点。

速い

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

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

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

参照元:W3C

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 が利用を推奨している。

未対応ブラウザの対応

IEや microsoft Edge は、preload未対応ですが、Polyfill を使えば対応させることができます。polyfillについては、画像の遅延読み込み-古いブラウザへの対応-をご参照ください。

まとめ

preloadは先読みさせてすばやく表示しますが、javaもcssもフォントもと欲ばるのは逆効果になる可能性があります。Pagespeedinsightで指摘された事項や、ファーストビューで読み込まれる要素だけにすることが、高速表示につながるのではないかと思います。

以上最近、高速表示にプリってるソクラテツがお送りしました( ´ ▽ ` )ノ

関連記事
PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

画像の遅延読み込み実装でサイト表示高速化

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html)
アフィリエイトの後ろになぜかある1ピクセル画像を究明するイメージ画像

謎の1ピクセル画像を究明

Amazonアソシエイトコードにあるimgタグの1ピクセル画像をご存知ですか?

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP