Google Fontsのパフォーマンスを最適化する6つの方法

Google Fontsを利用する際も細かい工夫を重ねる事でWEBパフォーマンスをさらに向上させる事ができます。

Google Fontsは常にユーザー環境・ブラウザに応じた最適な形式を提供する機能・キャッシュ機能が搭載されています。

基本は全てのバリエーションではなく、部分的に限定して利用する事です。

Google Fontsとは

Google Fontsは、現在WEB全体で29兆回以上も利用されているフォントです。

実に900種を超える美しいフォント群が用意されていて、それらが無料で利用できるのです。

逆にGoogle Fontsを使わないままだと、デバイスにインストールされている「システムフォント」に頼らざるを得なくなります。

Google Fontsを工夫してパフォーマンスを上げる

ブラウザが各フォントをダウンロードするため多少の通信が必要ですが、所要時間は微々たるものです。

しかしだからと言ってフォントをただ読み込んで利用するだけでは配慮が足りません。

様々な部分を見直すことで、WEBパフォーマンスを向上させる事ができます。

既に最適化されているGoogle Fonts

「Google Fonts API」はブラウザにフォントファイルを提供する機能を有していますが、それだけではありません。

常に最適な形式でファイルを配信できる最適化の機能を持っています。

例えばGitHubで「OpenSans-regular」フォントを見てみると、通常パターンの重量は212kbです。

ところが、実際にAPIから提供されるファイルのバイト数はたった27KBです。

ではなぜこのような事が可能なのでしょうか？

ブラウザサポートのチェック

ブラウザがAPIにリクエストを送信すると、Googleは最初にそのブラウザがサポートするファイルタイプを確認します。

ブラウザごとの提供パターン

上記の様に古いものから新しいブラウザまで幅広く対応できるよう、Google Fontsは各フォントごとに30以上の形式を常に維持しています。

その中からプラットフォームやブラウザごとに、最適な形式を自動的に検出して配信しているのです。

ユーザーの環境ごとに提供物を切り替える、Google Fontsの優れた機能の一つです。

ブラウザキャッシュ

Google Fontsのもう1つの優れた機能は、ブラウザのキャッシュです。

Google Fontsはブラウザキャッシュ内に存在できるため、ブラウザは毎回全てのフォントファイルをダウンロードする必要はありません。

例えばブラウザがそのフォントを初めて表示する場合は、テキスト表示の前にダウンロードする必要がありますね。

しかし次にそのフォントを使用してテキスト表示する時は、ブラウザはキャッシュされたバージョンを使用できます。

Google Fontsブラウザのキャッシュは、クリアされない限りはおよそ1年後に期限切れになるよう設定されています。

Google Fontsをさらに最適化するために

Google Fontsファイルの配信時の最適化により、インストール時の負担は随分軽くなっていると言えるでしょう。

しかしWEBページの読み込み時間を減らすため、まだまだ工夫できる余地があります。

基本はfont familyを制限する事

最も簡単なのは、使用するfont familyの数や種類自体を減らす事ですよね。

各フォントはWEBページのサイズとは別に最大400kb程度のサイズUPになります。

複数の異なるfont familyを加えるとなると、フォントサイズの方がページサイズよりも大きくなる場合もあります。

1種のフォントでもバリエーションを作れる

ですので通常は、見出し用とコンテンツ用の2種（2種以下）のフォントだけを使用する事をお勧めします。

1種類のフォントでもサイズ・太さ・色を変えれば、多彩に表現できるためです。

Google Fontsは他にも様々な工夫や設定を加える事で、そのパフォーマンスをさらに向上させる事ができます。

本記事では制限・最適化に関する6つの方法についてご紹介します。

1.必要ない種類を除外する

Google Fontsの英語フォントでは、その「太さ」において実に豊富な種類が含まれています。

太さのバリエーション（Open Sans）

上記10種類の形式が本当に必要なのであれば、全て読み込むしかありませんよね。

しかし3つまたは4つ程度しか使わないのであれば、全てをダウンロードする事は無意味です。

例えば「Open Sans」の総重量は約945kbです。

その中で「Regular 400」「Regular 400 italic」「Bold 700」の3種類のみに限定すれば、そのサイズ数は286kb程度になります。

実に70％近くの節約につながるのです。

パターンの読み込み方

ここまで説明しましたが、全ての種類を読み込む場合は次の様に全パターンの指定している事になります。

<link href="https://fonts.googleapis.com/css?family=Open+Sans:wght@300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">

上記の様にLight 300からExtra-bold 800まで、全てのバリエーションを実際に使用している事は稀です。

むしろ最初から上の様に全て設定しているなら、不要なパターンを削除した方が良いという事です。

通常の読み込み方（Noto Serif JP：日本語フォント）

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400&display=swap" rel="stylesheet">

基本的にGoogle Fontsからフォントを読み込む場合、選択したいサイズや太さのみをコードに追記していきます。

ですので最初から記述されたコードでない限りは、全パターンが指定されている事はありません。

テンプレート等パッケージ化されたhtmlソースや他人が書いたコードの場合は、Google Fontsで余計なパターンを読み込んでいないかを確認しましょう。

2.リクエストを連結させる

上記で使用したコードは、HTTPリクエストによりGoogleのサーバー（fonts.googleapis.com）を呼び出します。

ですのでこのHTTPリクエストが多ければ多いほど、それだけ読み込みに時間が掛かります。

例えば2つのフォントを読み込む場合、以下の様にしている方がいらっしゃるのではないでしょうか。

複数フォント（日本語＋英語）の読込

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

上記の場合ブラウザが2つのHTTPリクエストを行うことになり、それだけ負担が掛かります。

連結させる場合

これを次のような単一のリクエストに結合する事で最適化できます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&family=Open+Sans:wght@300&display=swap" rel="stylesheet">

1つのHTTPリクエストで要求できるフォントとその種類数に制限はなく、どんどんつなげる事ができます。

3.同時接続機能

同時接続機能とは、最新のブラウザでサポートされたWEBサイトのパフォーマンスを向上させる機能です。

「DNSプリフェッチ」と「プリコネクト」の2種類があります。

※ブラウザが最新の機能をサポートしていない場合はブラウザはそれを無視します。その場合WEBページは通常通り読み込みます。

DNSプリフェッチ

DNSプリフェッチを使用すると、ブラウザはページの読み込みが開始されると同時にGoogleのFonts API（fonts.googleapis.com）へも接続を開始できます。

これはブラウザがWEBページを表示させるまでに必要な一連の作業を、1件1件ではなく同時に進行させる事を意味します。

Google FontsのDNSプリフェッチを実装するには、次のタグををWEBページのヘッダー内に追加するだけです。

<link rel="dns-prefetch" href="//fonts.googleapis.com">

ブラウザ対応表

DNSプリフェッチ：https://caniuse.com/link-rel-dns-prefetch

プリコネクト

Google Fontsの埋め込みコード自体は1行なので、単一のHTTPリクエストのように見えますよね。

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200" rel="stylesheet">

ただしそのURLにアクセスすると、中で別のURL「https://fonts.gstatic.com」へのリクエストが実にたくさんある事がわかります。

フォントの種類ごとに個別の追加リクエストになるためですね。

CSS内ソースコード

上記は日本語フォントである事もあり、合計119回リクエストをおこなっています。

問題となるのは、ブラウザはこのCSS内のリクエストを実行している間それ以外のプロセスをおこなわない事にあります。

そこでプリフェッチの拡張バージョンとも言えるプリコネクトの登場です。

単一タスクではなく同時タスク

これはブラウザが読み込みしようとしている特定のURLに設定される機能です。

最初の1つ目の接続が完了するのを待たずに、同時に他の複数の接続を開始する事ができます。

上記の接続などを同時に実施します。

プリコネクトはDNSプリフェッチと同様、1行のコードで実装できます。

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

この1行を追加するだけで、ページの読み込み時間を100ミリ秒短縮できるとしています。

ブラウザ対応表

プリコネクト：https://caniuse.com/link-rel-preconnect

4.ローカルでホストする

Google Fontsは「フリーソフトウェア」ライセンスの下で使用許諾されています。

これにより利用許可を申請する事なく自由に使用や変更、そして配布もする事が可能です。

ですので毎回Google Fontsを読み込まずに、フォントを自身のWEBサイトサーバー内にホストする事もできるのです。

ホストした中から選択して利用できる

フォントファイルはGoogle FontsやGithubで入手できます。ファイルサイズはフォントにより様々です。

この中から使用するフォントを選択・利用するために必要なファイルとCSSが提供されています。

こうすればHTTPリクエストをせずに読み込む事ができるので、パフォーマンス向上につながります。

フォントをローカルでホストするデメリット

フォントをダウンロードすると、その時点の状態がそのまま保存されます。

フォントが改善または更新されてもそれらが自動反映される事は無いので、そこはデメリットでしょう。

これに対してHTTPリクエストでフォントを読込すれば、常に最新バージョンが提供されます。

5.代替フォント表示

ブラウザがGoogle Fontsをダウンロードする場合、多少なりとも時間は掛かっています。

ではその読込準備が整うまでの間、テキスト表示はどうなるのでしょう。

FOIT

ブラウザは以前から、読み込みが終わるまでテキストがあるべき場所に空白スペースを表示していました。

これは「FOIT」（Flash of InvisibleText）とも呼ばれます。

ただ何も表示されないままだとユーザーに不快感を与える可能性がありますよね。

最善策は最初にシステムフォントを表示しておき、準備ができたらGoogle Fontsに「交換」する事です。

代替フォント設定方法

これはCSSのfont-displayプロパティを使用して可能です。

@font-faceに対し「font-display: swap;」追加する事で、GoogleFontが利用可能になるまで代替フォントを表示するように指示できます。

@font-face { font-family: 'Open Sans'; src: local('Open Sans Regular 400'), url(ファイル位置.woff2) format('woff2'); font-display: swap; }

ここで、font-display: auto;を使うとフォントが利用可能となるまでの間、そのフォントが適用されているテキストが非表示となります。

font-displayの指定がない場合もこの状態となります。

コードタグでも実現可能

Googleは2019年に、display=swapのタグサポート追加を発表しました。

ですのでフォントのコードURLにパラメータを追加する事ですぐに実装できます。

<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap" rel="stylesheet">

6.特定文字のみで利用する

Google Fonts APIのあまり知られていない機能として挙げられるのが「textパラメータ」です。

このパラメータを使用すれば「必要な文字のみ」を読み込みできます。

例えば特定のアルファベットのみ別のフォントを使いたいという場合、その使いたい文字のみを指定する事ができます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&text=gG" rel="stylesheet">

実際には全ての文字を使う事は稀な訳ですから、必要な文字のみに抑える事でパフォーマンスを上げる訳ですね。

特定フォントとそれ以外のフォントの2種を連結

それ以外は別のフォントにしたい場合は、連結させて以下の様にできます。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&text=gG&family=Raleway&text=ABCDEFHIJKLMNOPQRSTUVWXYZabcdefhijklmnopqrstuvwxyz/!?" rel="stylesheet">

textパラメータを使用する場合、デフォルトでは「通常の太さ」のみが読込されます。

別の太さを使用するには、URLで明示的に指定する必要があります。

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&text=gG" rel="stylesheet">

まとめ

以上6つのGoogle Fonts最適化・パフォーマンスを向上させる方法についてご紹介しました。

現在Google Fontsを使用している上位WEBサイトの半分以上が、これらの最適化により本来のパフォーマンスが変動する可能性があるとされています。

何気なく読み込んでいるGoogle Fontsのコードを今一度確認してみる事をお勧めします。

一押し人気コーナー紹介