Google Fonts を preload で先読みし最適化

2021年7月11日
2018年10月29日

Web 制作

Akira

Web デザイナー

はじめに

以前、Google Fonts を非同期で読み込みサイトスピードを高速化にて、Web Font Loader を使い Google Fonts を非同期で読み込む方法をご紹介しました。

この Web Font Loader を使った読み込みより、さらに速く Google Fonts を読み込む方法があります。それが今回ご紹介する <link rel="preload"> を用いるものです。

<link rel="preload"> には、魅力的なメリットがあります。

`<link rel="preload">` のメリット
Google Fonts がレンダリングをブロックしない。
Web Font Loader よりサイト表示速度が速くなる。
FOUT や FOIT が発生しにくい。これにより CLS を防げる。

FOUT: Web フォントの読み込みが完了するまで代替フォントで表示され、読み込みが完了すると Web フォントに切り替わる現象。
FOIT: Web フォントの読み込みが完了するまで、テキストが表示されない現象。

一方、今回ご紹介する方法には、デメリットもあります。

今回の方法のデメリット
IE など一部のブラウザには対応していない。
Google の CDN を使わない。ただし、Google Fonts の CDN のメリットがなくなりつつあるため、デメリットにはならないかもしれない。

<link rel="preload"> のブラウザ対応状況は、Can I use… : preload にてご確認ください。

尚、今回ご紹介する方法は、通常ページだけではなく AMP ページにも適用できます。

最終的なコード

まずは、最終的なコードの一例をご覧ください。

今回は、Google Fonts の代表的なフォントである Roboto を例に説明します。読み込む Roboto は、ウェイトは 400 のみ、スタイルはノーマルです。

<link rel="preload"> を用いて Roboto を読み込む一例は、下記のとおりです。<head></head> タグ内に追加します。

<!-- preload を指定する -->
<link rel="preload" as="font" href="https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2" crossorigin>

<!-- CSS でフォントを読み込む -->
<style>
  @font-face {
    font-display: optional;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'),
        url('https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2') format('woff2');
  }
</style>

自サイトのサーバーに設置した Roboto を CSS で読み込みます。そして、CSS で読み込む前に、<link rel="preload"> で先読みします。

Google Fonts をサーバーに設置する理由

今回ご紹介する方法では、Google Fonts を自サイトのサーバーに設置します。これは、Google の CDN を使ってしまうと、フォントファイルのパスが変わる可能性があるためです。

執筆時点の CDN での Roboto（ウェイトは 400 、スタイルはノーマル、Languages は latin）のフォントファイルのパスは、下記のものです。

https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.woff2

このフォントファイルのパスの指定で、Google Fonts を <link rel="preload"> で先読みできます。

しかし、CDN の Google Fonts の各フォントは、定期的にバージョンアップがなされています。バージョンアップがなされると、フォントファイルのパスが変わります。

もし、バージョンアップでパスが変わってしまうと <link rel="preload"> が効かなくなり、突然サイトの表示速度が遅くなります。

このようなパスの変更を簡単に防ぐために、Google の CDN を使わず、Google Fonts を自サイトのサーバーに設置しフォントを読み込みます。

また、CDN からの読み込みのメリットが、なくなりつつあるのも理由です。

プライバシー保護の観点から、Chrome や Safari ではキャッシュをサイト毎に分離するようになりました。以前は、他のサイトが同じ Google Fonts を利用していれば、他のサイトで作られたキャッシュを使い高速で Google Fonts の表示が可能でした。しかし、現在は他のサイトで作られたキャッシュで、Google Fonts を表示できなくなっています。

そのため、より高速でサイトを表示するには、CDN を使うより、サーバーに設置し <link rel="preload"> で読み込むのがいいように思えます。

参考

Google Fonts のダウンロード

<link rel="preload"> を使うために、最初にすることが Google Fonts のダウンロードです。

google webfonts helper を利用すれば、EOT・TTF・SVG・WOFF・WOFF2 の拡張子でフォントをダウンロードできます。

今回使うのは WOFF2 です。

TTF: フォント拡張子の 1 つ。通常はローカルフォントで利用する。また、Android 4.4 より前の旧式ブラウザに対応する場合にも利用。
WOFF: フォント拡張子の 1 つ。TTF を圧縮しており、Web フォントとして利用する。大部分のブラウザが対応しているため、IE でも利用が可能。
WOFF2: フォント拡張子の 1 つ。WOFF より圧縮率が高く、より高速で Web フォントを利用できる。モダンブラウザは対応済み。Google が利用を推奨している。

google webfonts helper の使い方

google webfonts helper を使えば、5 ステップで Google Fonts をダウンロードできます。

フォントを検索。使いたいフォントを検索フォームから探します。
charsets を選択。英語はデフォルトの latin 、日本語は latin と japanese で通常はいいはずです。
styles を選択。使いたいスタイルとウェイトを選びます。
CSS をコピー。CSS が提示されるため、どこかにコピーしておきます。
ダウンロード。5 つの拡張子のファイルが入った ZIP ファイルをダウンロードできます。

日本語フォント

日本語フォントをお使いになる場合は、フォントファイルの容量を削減するサブセット化が必要です。やり方は、サブセット化で日本語Webフォントの容量を軽量化する方法が参考になります。

ご自身でのサブセット化が難しい場合は、サブセット化済みの日本語フォントを無料で配布しているサイトをお探しになるのがいいかもしれません。例えば、Noto Sans CJK JP であれば、minoryorg / Noto-Sans-CJK-JP でサブセット化済みのフォントファイルが手に入ります。

サーバーに設置

ダウンロードした ZIP ファイルを解凍し、入っている WOFF2 ファイルを取り出します。

自サイトのサーバーの適当な場所に fonts フォルダを作成し、その fonts フォルダに取り出した WOFF2 ファイルをアップロードします。

WordPress をお使いであれば、ご使用中のテーマフォルダの直下に fonts フォルダを作成します（子テーマであれば子テーマフォルダの直下）。

WordPress を使用している私のブログであれば、設置後の階層（パス）はこのようになります。

https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2

この後で指定する CSS や <link rel="preload"> には、このパスを使います。

CSS を指定

Google Fonts をサーバーに設置した後は、CSS でフォントを読み込みます。

CSS は、Google Fonts をダウンロードした google webfonts helper で提示されるものを使います。

Roboto であれば、このような CSS です。

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2') format('woff2');
}

また、必要に応じて font-display を指定します。font-display については、font-display – CSS: カスケーディングスタイルシート | MDN をご覧ください。

2021 年 7 月時点において、Google は <link rel="preload"> と font-display: optional の組み合わせが、最も効果的に CLS を防げると指摘しています。

参考 Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts

@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2') format('woff2');
}

url には、WOFF2 ファイルまでのパスを指定します。通常ページであれば、パスは相対パスでの指定でも構いません。しかし、AMP ページであれば、http または https から始まる絶対パスで指定する必要があります。相対パスで指定すると、フォントの読み込みに失敗します。

尚、google webfonts helper で提示される CSS には WOFF や TTF なども含まれますが、今回は使用しないため書く必要はありません。

そして、サイトで表示するために、下記のような CSS も追加します。

body {
  font-family: 'Roboto', sans-serif;
}

この時点でサイトに Google Fonts が表示されますが、まだレンダリングをブロックしています。

preload を指定

レンダリングブロックを回避するために、<link rel="preload"> で Google Fonts を先読みします。

<head></head> 内のなるべく最初の方に、下記のような <link> タグを追加します。少なくとも、CSS より前に追加する必要があります。

<link rel="preload" as="font" href="https://firstlayout.net/wp-content/themes/bariiito/fonts/roboto-v18-latin-regular.woff2" crossorigin>

href 属性には、WOFF2 ファイルまでのパスを指定します。CSS の url で指定したパスと同じです。

これで Google Fonts を <link rel="preload"> で読み込む作業は終わりです。

あとは、下記のツールを使いサイトの読み込み状況や速度を計測します。

AMP でも可能

2018 年 10 月より、AMP で下記の <link> タグの rel 属性の値が使えるようになりました。

AMP で使用可能になった `rel` 属性の値
値	説明
`preload`	必要となるリソースをダウンロードしておくように、ブラウザに伝えます。これにより、リソースの取得を最適化できます。
`preconnect`	ネットワーク接続に必要な動作を事前に行えるように、ブラウザにヒントを提供します。これにより、読み込むリソースの接続時間を削減できます。
`dns-prefetch`	どこにリクエストしリソースを取得するのか、ブラウザにヒントを提供します。これにより、リソースの読み込み時間を短縮できます。

AMP でも <link rel="preload"> が使えるため、今回ご紹介した方法で Google Fonts を先読みできます。執筆時点の AMP の仕様では、Google Fonts のレンダリングブロックを回避する唯一の方法です。

AMP での <link rel="preload"> については、Optimizing your hosted AMP pages で詳細な説明をご覧いただけます。

尚、AMP Runtime や画像なども <link rel="preload"> で先読みできます。