3週間前に投稿

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

2019年7月30日

この記事は約 9 分で読めます。

4.5

Google Fonts の読み込みついて調べてみました。
Google Fontsを素早く読み込む」とかで
検索すると「非同期で読み込む」と言った
記事が上位に出てくるのですが、
こんな記事を発見しました。

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

ブラウザがAPIにリクエストを送信すると、
Googleはまずブラウザがサポートしている
ファイルの種類を確認します。

私はChromeの最新版を使っているので、
ほとんどのブラウザが
WOFF2をサポートしているのと同じように
フォントはその非常に圧縮された
フォーマットで私に提供されています。

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

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

Google Fonts の場合、
フォントごとに 30 を超える最適化された派生フォントが含まれており、
それぞれのプラットフォームやブラウザに最適な
派生フォントを自動的に検出して提供します。

圧縮を利用したフォントサイズの削減

これはGoogle Fontsの優れた機能です。
ユーザーエージェントが
それらをサポートしているブラウザに最も
パフォーマンスの高い形式を提供できると同時に、
古いブラウザでもフォントを一貫して
表示することができるからです。

グーグルフォントのもう一つの内蔵最適化は
ブラウザキャッシングである。

Another built-in optimization of Google Fonts is browser caching.

ブラウザがそのフォントを初めて見た場合は、
テキストが表示される前に
完全にダウンロードする必要がありますが、
次にそのフォントを使用するWebサイトにアクセスした場合、
ブラウザはキャッシュされたバージョンを使用します。

Like any other asset, font files have to be downloaded to a site visitor’s computer before they can be displayed. Fonts served by the Google Fonts API are automatically compressed for a faster download, and once downloaded are cached in the browser and reused by any other web page that uses the Google Fonts API.
As the Google Fonts API becomes more widely used, it is likely visitors to your site or page will already have any Google fonts used in your design in their browser cache.
( 他のアセットと同様に、フォントファイルは表示する前にサイト訪問者のコンピュータにダウンロードする必要があります。 Google Fonts APIによって提供されるフォントは、ダウンロード速度が速くなるように自動的に圧縮され、ダウンロードされるとブラウザにキャッシュされ、Google Fonts APIを使用する他のWebページで再利用されます。
Google Fonts APIが広く使用されるようになるにつれて、サイトやページへの訪問者のデザインに使用されているGoogleフォントがブラウザのキャッシュにすでに含まれている可能性があります。
)

Will web fonts slow down my page?

なるほど・・・、
ブラウザキャッシュを再利用することで
表示速度に一役買っているわけですね。

Googleフォントブラウザのキャッシュは、
キャッシュが早くクリアされない限り、
1年後に期限切れになるように
設定されているのだそうです。

だったらいいんじゃね?
最適化など必要ないのでは?
と思いましたが、
続きがあるようです。

なんと、
さらなる最適化が可能だそうで、

  1. Limit Font Families
    最も簡単な最適化は、単に少数のフォントファミリを使用することです。
  2. Exclude Variants
    最適な方法は、使用する予定の太さだけを指定することです。
  3. Combine Requests
    単一のリクエストにまとめることで最適化できます。
  4. Resource Hints
    リソースヒントは
    Webサイトのパフォーマンスを向上させることができる
    最新のブラウザでサポートされている機能です。
    当ブログにて触れています。
  5. Host Fonts Locally
    すべてのフォントファイルはGithubから入手できます。
    すべてのフォントを含むzipファイルも入手可能です(387MB)。
  6. Font Display
    最初にシステムフォントをフォールバックとして表示し、
    次に準備ができたらフォントを「入れ替える」ことです。
    これはCSSのfont-displayプロパティを使って可能です。
    当ブログにて触れます。
  7. Use the Text Parameter
    Google Fonts APIのもう少し知られている機能はtextパラメータです。
    このめったに使用されないパラメータでは、
    必要な文字だけを読み込むことができます。

元記事では、
上記の7項目について書かれています。
ここでは、
4.Resource Hints」と
6.Font Display」について
触れてみたいと思います。

その他の最適化については
元記事を参照してください。

Resource Hints は、
Webサイトのパフォーマンスを向上させることができる
最新のブラウザでサポートされている機能です。

DNS Prefetching」と「Preconnect」、
この2種類のResource hintsを見ていきます。

Note

ブラウザがこの機能をサポートしていない場合は、
普通にロードされます。

DNS Prefetching

DNS Prefetching を使用すると、
ページの読み込みが開始されると同時に
ブラウザはGoogleの
Fonts API ( fonts.googleapis.com )
への接続を開始できます。
これは、ブラウザがリクエストを出す準備ができるまでに、
いくつかの作業がすでに完了していることを意味します。

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

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

Preconnect

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

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

ただし、そのURLにアクセスすると、
別のURL( https://fonts.gstatic.com)
に対してさらに3つの要求があることがわかります 。
各フォントバリエーションに対して1つの追加要求。

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

Preconnect は、
prefetch の拡張バージョンとして記述できます。
ブラウザがロードしようとしている
特定のURLに設定されます。
DNS lookup を実行するだけでなく、
TLS negotiation とTCP handshake も完了します。
DNS Prefetchingと同じように
1行のコードで実装できます。

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

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

Font Display

font-display は、
フォントがダウンロード済みで利用できるかに基づいて、
どのようにフォントの種類を表示するかを定めます。

font-display: swap;を追加することにより、
@ font-face宣言は、
Google Fontsが利用可能になるまで
ブラウザに代替フォントを
表示するように指示します。

@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;
  }

In 2019 Google, announced they would add support for font-display: swap. You can begin implementing this right away by adding an extra parameter to the fonts URL:
( 2019年、Googleはfont-display:swapのサポートを追加すると発表しました。
フォントのURLに追加のパラメータを追加することで、
すぐにこれを実装することができます。 )

Google Fontsを使用しているときに
font-displayを実装するには、
リクエストに追加のパラメータを追加するだけです。

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

DNS PrefetchingとPreconnectのBrowser Support

Can I Use link-rel-dns-prefetch? Data on support for the link-rel-dns-prefetch feature across the major browsers from caniuse.com.

Can I Use link-rel-preconnect? Data on support for the link-rel-preconnect feature across the major browsers from caniuse.com.

CSS font-rendering controlsのBrowser Support

Can I Use css-font-rendering-controls? Data on support for the css-font-rendering-controls feature across the major browsers from caniuse.com.

Original article

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Google Fonts のパフォーマンスを最適化する