GoogleFontsのパフォーマンスの最適化

公開: 2022-03-10
簡単なまとめ↬GoogleFontsは簡単に実装できますが、ページの読み込み時間に大きな影響を与える可能性があります。 それらを最適な方法でロードする方法を調べてみましょう。

GoogleFontsが人気があると言っても過言ではありません。 執筆時点で、これらはWeb全体で29兆回以上表示されており、その理由は簡単に理解できます。このコレクションを使用すると、Webサイトで無料で使用できる900を超える美しいフォントにアクセスできます。 Google Fontsがないと、ユーザーのデバイスにインストールされている「システムフォント」はほんの一握りに制限されます。

システムフォントまたは「Webセーフフォント」は、オペレーティングシステム全体に最も一般的にプリインストールされているフォントです。 たとえば、ArialとGeorgiaは、Windows、macOS、およびLinuxディストリビューションにパッケージ化されています。

すべての良いものと同様に、GoogleFontsにはコストがかかります。 各フォントには、表示する前にWebブラウザがダウンロードする必要のある重みがあります。 正しい設定では、追加のロード時間は目立ちません。 ただし、間違えると、テキストが表示されるまでユーザーが数秒待つ可能性があります。

GoogleFontsはすでに最適化されています

Google Fonts APIは、ブラウザにフォントファイルを提供するだけでなく、最も最適化された形式でファイルを配信する方法を確認するためのスマートチェックも実行します。

Robotoを見てみましょう。GitHubによると、通常のバリアントの重量は168kbです。

RobotoRegularのファイルサイズは168kbです
単一のフォントバリアントの場合は168kb。 （大プレビュー）

ただし、APIから同じフォントバリアントをリクエストすると、このファイルが提供されます。 これはたった11kbです。 どうしてそれができるのでしょうか？

ブラウザがAPIにリクエストを送信すると、Googleは最初にブラウザがサポートするファイルタイプを確認します。 私は最新バージョンのChromeを使用しています。これは、ほとんどのブラウザと同様にWOFF2をサポートしているため、フォントはその高度に圧縮された形式で提供されます。

ユーザーエージェントをInternetExplorer 11に変更すると、代わりにWOFF形式のフォントが提供されます。

最後に、ユーザーエージェントをIE8に変更すると、フォントはEOT（Embedded OpenType）形式で取得されます。

Google Fontsは、フォントごとに30以上の最適化されたバリアントを維持し、プラットフォームとブラウザごとに最適なバリアントを自動的に検出して配信します。

— Ilya Grigorik、Webフォントの最適化

これはGoogleFontsの優れた機能であり、ユーザーエージェントをチェックすることで、古いブラウザでフォントを一貫して表示しながら、それらをサポートするブラウザに最もパフォーマンスの高い形式を提供できるようになります。

ジャンプした後もっと！ 以下を読み続けてください↓

ブラウザのキャッシュ

Google Fontsのもう1つの組み込み最適化は、ブラウザのキャッシュです。

Google Fontsはどこにでもあるため、ブラウザは必ずしもフルフォントファイルをダウンロードする必要はありません。 たとえば、SmashingMagazineは「Mija」というフォントを使用します。ブラウザがそのフォントを初めて表示する場合は、テキストが表示される前に完全にダウンロードする必要がありますが、次にそのフォントを使用してWebサイトにアクセスするとき、ブラウザはキャッシュされたバージョンを使用します。

Google Fonts APIがより広く使用されるようになると、サイトまたはページへの訪問者は、ブラウザのキャッシュにデザインで使用されているGoogleフォントをすでに持っている可能性があります。

— FAQ、Google Fonts

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

注： MijaはGoogle Fontではありませんが、キャッシュの原則はベンダー固有ではありません。

さらなる最適化が可能

Googleはフォントファイルの配信を最適化するために多大な努力を払っていますが、ページの読み込み時間への影響を減らすために実装で行うことができる最適化がまだあります。

1.フォントファミリを制限する

最も簡単な最適化は、使用するフォントファミリを少なくすることです。 各フォントはページの重みに最大400kbを追加し、それにいくつかの異なるフォントファミリを掛けると、突然、フォントの重みがページ全体よりも大きくなります。

通常、見出し用とコンテンツ用の2つ以下のフォントを使用することをお勧めします。 フォントのサイズ、太さ、色を適切に使用することで、1つのフォントでも見栄えを良くすることができます。

単一のフォントファミリの3つの重みを示す例（Source Sans Pro）
単一のフォントファミリの3つの重み（Source Sans Pro）。 （大プレビュー）

2.バリアントを除外する

Google Fontsの高品質標準により、フォントファミリの多くには、利用可能なフォントの太さの全範囲が含まれています。

  • 薄い（100）
  • 薄い斜体（100i）
  • ライト（300）
  • ライトイタリック（300i）
  • レギュラー（400）
  • 通常のイタリック（400i）
  • ミディアム（600）
  • ミディアムイタリック（600i）
  • 太字（700）
  • 太字のイタリック（700i）
  • 黒（800）
  • 黒斜体（800i）

これは、12のバリアントすべてが必要になる可能性がある高度なユースケースには最適ですが、通常のWebサイトでは、3つまたは4つだけが必要な場合に12のバリアントすべてをダウンロードすることを意味します。

たとえば、Robotoフォントファミリの重量は約144kbです。 ただし、Regular、Regular Italic、Boldのバリアントのみを使用する場合、その数は最大36kbになります。 75％の節約！

GoogleFontsを実装するためのデフォルトのコードは次のようになります。

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

これを行うと、「通常の400」バリアントのみがロードされます。 つまり、明るい太字の斜体のテキストはすべて正しく表示されません。

代わりに、すべてのフォントバリアントをロードするには、次のようにURLで重みを指定する必要があります。

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

WebサイトがThin（100）からBlack（900）までのフォントのすべてのバリエーションを使用することはまれです。最適な戦略は、使用する予定の重みだけを指定することです。

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,600" rel="stylesheet">

これは、複数のフォントファミリを使用する場合に特に重要です。 たとえば、見出しにLatoを使用している場合は、太字のバリアント（および場合によっては太字のイタリック）のみを要求するのが理にかなっています。

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

3.リクエストを組み合わせる

上記で使用したコードスニペットは、HTTPリクエストと呼ばれるGoogleのサーバー（ fonts.googleapis.com ）を呼び出します。 一般的に、Webページが作成する必要のあるHTTPリクエストが多いほど、読み込みに時間がかかります。

2つのフォントをロードしたい場合は、次のようにします。

 <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

それは機能しますが、ブラウザが2つのリクエストを行うことになります。 これらを次のように1つのリクエストに結合することで、これを最適化できます。

 <link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,400i,600" rel="stylesheet">

1つのリクエストが保持できるフォントとバリアントの数に制限はありません。

4.リソースのヒント

リソースヒントは、Webサイトのパフォーマンスを向上させることができる、最新のブラウザでサポートされている機能です。 「DNSプリフェッチ」と「プリコネクト」の2種類のリソースヒントを見ていきます。

注：ブラウザが最新の機能をサポートしていない場合、ブラウザは単にそれを無視します。 したがって、Webページは引き続き正常に読み込まれます。

DNSプリフェッチ

DNSプリフェッチを使用すると、ページの読み込みが開始されるとすぐに、ブラウザはGoogleのFonts API（ fonts.googleapis.com ）への接続を開始できます。 これは、ブラウザがリクエストを行う準備ができるまでに、一部の作業がすでに完了していることを意味します。

Google FontsのDNSプリフェッチを実装するには、このワンライナーをWebページに追加するだけです<head> ：

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

事前接続

Google Fontsの埋め込みコードを見ると、単一のHTTPリクエストのように見えます。

 <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">

ただし、そのURLにアクセスすると、別のURL（https://fonts.gstatic.com）へのリクエストがさらに3つあることがわかります。 フォントバリアントごとに1つの追加リクエスト。

GoogleFontsリクエストのソースコード
（ソースを表示）（大きなプレビュー）

これらの追加リクエストの問題は、 https://fonts.googleapis.com/cssへの最初のリクエストが完了するまで、ブラウザがそれらを作成するプロセスを開始しないことです。 これがPreconnectの出番です。

プリコネクトは、プリフェッチの拡張バージョンとして説明できます。 これは、ブラウザがロードしようとしている特定のURLに設定されています。 DNSルックアップを実行するだけでなく、TLSネゴシエーションとTCPハンドシェイクも完了します。

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

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

このコード行を追加するだけで、ページの読み込み時間を100ミリ秒短縮できます。 これは、最初に接続が完了するのを待つのではなく、最初の要求と一緒に接続を開始することで可能になります。

5.フォントをローカルでホストする

Google Fontsは、「Libre」または「free software」ライセンスの下でライセンスされています。これにより、許可を要求することなく、フォントを自由に使用、変更、および配布できます。 つまり、必要がなければGoogleのホスティングを使用する必要はありません。フォントをセルフホスティングすることができます。

すべてのフォントファイルはGithubで入手できます。 すべてのフォントを含むzipファイルも利用できます（387MB）。

最後に、使用するフォントを選択できるヘルパーサービスがあり、そのために必要なファイルとCSSを提供します。

フォントをローカルでホストすることには欠点があります。 フォントをダウンロードすると、その時点でのフォントがそのまま保存されます。 それらが改善または更新された場合、それらの変更を受け取ることはありません。 これに対して、Google Fonts APIからフォントをリクエストすると、常に最新バージョンが提供されます。

最終変更日を示すGoogleFontsAPIリクエスト
Google FontsAPIリクエスト。 （大プレビュー）

APIのlastModifiedパラメーターに注意してください。 フォントは定期的に変更および改善されています。

6.フォント表示

ブラウザがGoogleFontsをダウンロードするのに時間がかかることはわかっていますが、準備が整う前にテキストはどうなりますか？ 長い間、ブラウザはテキストがあるべき場所に空白スペースを表示していました。これは「FOIT」（非表示テキストのフラッシュ）とも呼ばれます。

推奨読書：クリス・コイエによる「FOUT、FOIT、FOFT」

何も表示しないことは、エンドユーザーにとって不快な体験になる可能性があります。より良い体験は、最初にシステムフォントをフォールバックとして表示し、準備ができたらフォントを「交換」することです。 これは、CSSfont font-displayプロパティを使用して可能です。

font-display: swap; @ font-face宣言に対して、GoogleFontが使用可能になるまでフォールバックフォントを表示するようにブラウザに指示します。

 @font-face { font-family: 'Roboto'; src: local('Roboto Thin Italic'), url(https://fonts.gstatic.com/s/roboto/v19/KFOiCnqEu92Fr1Mu51QrEz0dL-vwnYh2eg.woff2) format('woff2'); font-display: swap; }

2019年にGoogleは、font-display：swapのサポートを追加すると発表しました。 フォントのURLにパラメータを追加することで、これをすぐに実装できます。

 https://fonts.googleapis.com/css?family=Roboto&display=swap

7. Textパラメータを使用します

Google Fonts APIのあまり知られていない機能は、 textパラメータです。 このめったに使用されないパラメータを使用すると、必要な文字のみをロードできます。

たとえば、一意のフォントである必要があるテキストロゴがある場合、 textパラメータを使用して、ロゴで使用されている文字のみをロードできます。

それはこのように動作します：

 https://fonts.googleapis.com/css?family=Roboto&text=CompanyName

明らかに、この手法は非常に特殊であり、現実的なアプリケーションはごくわずかです。 ただし、使用できる場合は、フォントの太さを最大90％削減できます。

注： textパラメーターを使用する場合、デフォルトでは「通常の」フォントの太さのみがロードされます。 別の重みを使用するには、URLで明示的に指定する必要があります。

 https://fonts.googleapis.com/css?family=Roboto:700&text=CompanyName

まとめ

Google Fontsを使用している上位100万のウェブサイトの推定53％で、これらの最適化の実装は大きな影響を与える可能性があります。

上記のうち何回試しましたか？ コメント欄で教えてください。