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

2020.11.3 

ウェブフォントをpreloadで先読みして高速表示する方法

Planet20xxPC用バナー Planet20xxモバイル用バナー

Webフォントはサイトイメージやデザイン性に優れていますが、サーバーに置かれたフォントを呼び出し表示するため、サイト表示に時間がかかりがちです。そこでレンダリングを妨げず、非同期で先読みしてファーストビューを高速表示させるpreloadを紹介します。

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

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

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

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

preloadとは

Pagespeedinsightのスコア画面。100点。

速い

preloadとはlinkタグのrel属性値に"preload"を指定するだけで、hrefで参照したリソースを事前に読み込むことが出来るキーワードです。通常のlinkタグと違い、非同期に読み込むためレンダリングをブロックしません。そのため高速表示につながります。

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

参照元:W3C

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>要素の中に埋め込まれるリソース
fetchArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース
fontフォントファイル
image画像ファイル
object<object>要素の中に埋め込まれるリソース
scriptJavaScript ファイル
styleCSS スタイルシート
trackWebVTT ファイル
workerJavaScript ウェブワーカーまたは共有ワーカー
video通常は<video>で使用される動画ファイル
MINEタイプfontの場合
拡張子詳細
TTF通常はローカルフォントで利用。4.4より前の旧式 Android ブラウザに対応する場合にも利用。
WOFFTTF を圧縮しており、Web フォントとして利用する。大部分のブラウザが対応しているため、IE でも利用が可能。
WOFF2WOFF より圧縮率が高く、より高速で Web フォントを利用できる。モダンブラウザは対応済み。Google が利用を推奨している。

未対応ブラウザの対応

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

まとめ

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

以上最近、高速表示にプリってるプリネット20xxがお送りしました( ´ ▽ ` )ノ

【関連記事】

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