フォントの遅延読込について

Pocket

素のcss

通常は以下のように書き、styleを各要素に当てていると思います

preload

結論から言うと、これが最も良いです
webフォントを適用させない状態でコンテンツを表示しつつ、フォントをダウンロード。
フォントのダウンロードが完了したらフォントが適用されます。
使い方もpreloadとas属性で種類を指定するだけと非常に簡単。jsももちろん不要
fontだけでなく、遅延読込に関して幅広く使うことが出来ます。

crossorigin=”anonymous”はデフォルトで設定になっているため、書いても書かなくてもokです

subresource

現在は全く意味の無いものです、忘れてもok

幾つかのページで見かけましたが、mozillaにはありませんでした
https://developer.mozilla.org/ja/search?q=subresource

何かのブラウザに、preloadのβ版のような位置づけで実装された物と思います

ある意味シンプルですが、ダイナミック過ぎます
保守性も下がるため、良いことはありません

jsで動的にrel属性を変更、もしくは追加

昔流行った技のようです。
テキスト含め、ページの内容が通常通りに表示された後、フォントをダウンロード、適用します。
挙動はpreloadに近く、保守性も高めでとっつきやすかったので僕も使ってました。
現在はpreloadがあれば無用です

Resource Hints

リソースヒント
cssや画像ファイル等の事前読込をブラウザに促す機能です

これらは遅延読込とはあまり関係ありませんが、
混同しないように記録しておきます。

preconnect

事前にhrefで記述したリンク先を、名前解決+接続まで済ませておく機能です
hrefにはhttp、httpsどちらも対応しています
機能的にはdns-prefecheの上位互換ですが、若干普及していないという問題点があります

dns-prefeche

事前に名前解決を行うために使います。
preconnectの下位互換ですが、こちらの方がブラウザの対応状況が良いようです
若干こちらの方がエコかなと思いますが、このご時世にhttpsを使えないのは辛いですね
記述方法は最後に記しますが、preconnnectの補助として併記すると良い感じです

prefeche

これは別ページの内容を先読みする物で、今回とは関係ありません。
今のページの全てが読み終わった後、別ページに移動する前に読み込むようです
以下のように使います

ただし標準外の仕様のため、現在はどれほど影響があるかは不明です。
https://developer.mozilla.org/ja/docs/Web/HTTP/Link_prefetching_FAQ

リソースヒントのまとめ

結論としては、preconnectとdns-prefetchをrel属性に併記すればok
二重で取得はしません

今後はpreconnect一本化で良くなると思いますが、現状ブラウザの対応状況が微妙です