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で先読みされているのが確認できる。


【関連記事】

コメント

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

【PostgreSQL】ROWNUMのように行番号(現在行)を取得するROW_NUMBER

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links