Google Fonts の読み込みを可能な限り高速化する方法

Google Fonts の読み込みが遅く、サイトの表示速度高速化のネックになっていたんですが、以下の2つを実施することで、読み込み速度を大幅に改善できましたので紹介します。

1. PageSpeed Module を利用した font-face 定義 CSS のインライン化
2. fonts.gstatic.com の preconnect

① に関しては、Web サーバーの設定を変更する必要があるため、レンタルサーバーで WordPress 等を運用している方は難しいかもしれません。

Google Fonts 読み込みの流れ

Google Fonts の読み込みは次の2つのフェーズからなります。

1. font-face 定義 CSS の読み込み
2. フォントデータ本体の読み込み

それぞれ見ていきましょう。

font-face 定義 CSS の読み込み

ブラウザは以下のような Google Fonts 用リンクを head タグ内で確認すると、リンク先の読み込みを開始します。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">

例えば、Lato フォント用 URL の https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900 にアクセスすると次のような CSS が返ってきます。

/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHh30AUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHh30AXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

(以下続く..)

この URL のレスポンスが遅く、読み込みのネックになっています。そのため、返却データをインライン CSS にしてしまい、URL アクセスを無くしたいところですが単純にはいきません。

理由は返ってくる内容がブラウザ毎に異なるためです。これは Google が各ブラウザに最適な方法を制御しているためで、さらに返却データ自体も将来変更される可能性があります。

そこで Google 謹製のモジュール PageSpeed Module の inline_google_font_css 機能を利用してインライン CSS 化します。

PageSpeed Module

PageSpeed Module は Web サーバーに組み込むことができる高速化モジュールです。Apache 版と Nginx 版の2種類があります。

Module が持つ多数の機能のうちの1つの inline_google_font_css を利用します。この機能は Google Fonts から返却される font face 定義 CSS をブラウザや OS 毎に一定期間だけキャッシュ化した上で、インライン化します。

この細かな制御により Google Fonts 側の変更にも対応しているわけですね。以下 Apache 版の設定で説明します。

inline_google_font_css

inline_google_font_css を有効化するには Apache 設定ファイルに次のように記載します。

ModPagespeed On
ModPagespeedEnableFilters inline_google_font_css
ModPagespeedGoogleFontCssInlineMaxBytes 4096
ModPagespeedSslCertDirectory /etc/ssl/certs
ModPagespeedSslCertFile /etc/ssl/certs/ca-certificates.crt

ModPagespeedEnableFilters に有効化する機能を指定します。inline_google_folt_css を指定して有効化しています。

ModPagespeedGoogleFontCssInlineMaxBytes にはインライン化する CSS の最大バイト数を指定します。デフォルト値は 3072 ですが、この値だと今回の例の Lato フォントでは足りないため 4096 まで引き上げています。日本語フォントの場合は返却される CSS が大きくなるため、もっと大きな値を指定する必要があります。

fonts.googleapi.com に自サーバーから https でアクセスする必要があるため、クライアント認証を行う必要があります。サーバーに置かれているクライアント証明書の場所を指定します。

ModPagespeedSslCertDirectory /etc/ssl/certs
ModPagespeedSslCertFile /etc/ssl/certs/ca-certificates.crt

上記は Ubuntu の場合の設定ですが、Cent OS 系の場合は異なります。公式ドキュメント (英語) に設定方法の記載ありますので、読んでみてください。また、この設定は .htaccess に記載することは出来ないのでご注意ください。

フォントデータ本体の読み込み

次にレンダリング中にフォントデータ本体が読み込まれます。各 font-face 定義内の src 属性の url(https://fonts.gstatic.com/s/...) の部分ですね。

ここで問題になるのが、フォントデータの読み込みが始まるタイミングがレンダリングの後半になることです。 ブラウザが CSS を認識し、フォントデータが必要だと判断した時点でロードが始まります。

実際には初めから fonts.gstatic.com のロードが必要なことは分かっています。そこで preconnectヒントを指定することで読み込みの一部を事前にスタートさせます。

preconnect

fonts.gstatic.com に対するpreconnect ヒントを head タグ内に記述します。

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

preconnect ヒントは指定した URL の DNS 名前解決と TCP のハンドシェイク、TLS のネゴシエーションなどを事前に行います。リンクの読み込み時間の多くはこれらの事前処理に割かれているため、この部分を先行して行うことで高速化が実現できます。

まとめ

Google Fonts の読み込みを可能な限り高速化する方法を紹介しました。Google Fonts の読み込みは一般的に遅いと言われていますが、この2つを実施すれば、Google Fonts の読み込みって遅いんだっけ？と思うほど、高速化されます。

サイトの表示速度を限界まで高速化したい方は、ぜひ実施してみてください。