rel="preload"でWebフォント(@font-face)を先読み

投稿日：

GoogleのPageSpeed Insightsを使ってみたら"<link rel=preload>"をお勧めされたので、導入したときの覚書。


"<link rel=preload>"とは

コンテンツの先読みをブラウザに指示できる。
css内に記載しているWebフォント（@font-face）や背景画像（background-image）を指定しておくと体感速度が向上する。

サーバーがHTTP/2に対応しているなら設定することによる効果大。

IEとFirefox以外は対応済み

参考サイト


"<link rel=preload>"の実装

Webフォントの場合は下記のようなタグをheader内に記載する。

<link rel="preload" href="/path/to/font.woff2" as="font" type="font/woff2" crossorigin />

注意点

  • 同じサーバー内だとしても「crossorigin」 は必須。
  • CSSの前に記述する。


ファイル名は案件によって変わるので、共通部分のPHPでwoff2ファイルを検索(glob)して記述することにした。

Chrome DevToolsのNetworkで先読みされているのが確認できる。


【関連記事】