AMP にも対応!Google Fonts を preload で先読みし最適化

Google Fonts を preload で先読みし高速化

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

以前、Web Font Loader を使い Google Fonts を非同期で読み込む方法をご紹介しました。

「 Google Fonts を非同期で読み込みサイトスピードを高速化」

この Web Font Loader を使った読み込みより、さらに速く Google Fonts を読み込む方法があります。

それが rel="preload" を用いるものです。

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

メリット
Google Fonts がレンダリングをブロックしない
Web Font Loader よりサイトスピードが速くなる
FOUT や FOIT が発生しにくい
FOUT
Web フォントの読み込みが完了するまで代替フォントで表示され、読み込みが完了すると Web フォントに切り替わる現象。
FOIT
Web フォントの読み込みが完了するまで、テキストが表示されない現象。

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

デメリット
IE など一部のブラウザには対応していない
Google の CDN を使わない

rel="preload" のブラウザ対応状況は、下記のリンクよりご確認ください。

Can I use… : preload

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

最終的なコード

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

今回は、Google Fonts の代表的なフォントである Roboto を例に説明します。

読み込む Roboto は、ウェイトは 400 のみ、スタイルはノーマルです。

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-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 で読み込む前に、rel="preload" で先読みします。

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

今回ご紹介する方法では、Google Fonts を自サイトのサーバーに設置します。

これは、フォントファイルのパスが変わる可能性があるためです。

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

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

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

しかし、Google Fonts の各フォントは、定期的にバージョンアップがなされています。

バージョンアップがされると、フォントファイルのパスが変わります。

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

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

Google Fonts のダウンロード

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

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

今回使うのは WOFF2 です。

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

google webfonts helper の使い方

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

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

google webfonts helperの画面の説明

サーバーに設置

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

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

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

このブログであれば、設置後の階層(パス)はこのようになります。

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

この後で指定する CSS や 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');
}

url には、WOFF2 ファイルまでのパスを指定します。

通常ページであれば、パスは相対パスでの指定でも構いません。

しかし、AMP ページであれば、http または https から始まる絶対パスで指定する必要があります。相対パスで指定すると、フォントの読み込みに失敗します。

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

IE でも Google Fonts を表示したい場合には、WOFF ファイルもサーバーに設置し CSS で読み込みます。

ただし、IE は preload に対応していないため、レンダリングブロックが発生します。

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

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

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

preload を指定

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

<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 を rel="preload" で読み込む作業は終わりです。

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

AMP でも可能

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

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

AMP でも rel="preload" が使えるため、今回ご紹介した方法で Google Fonts を先読みできます。

執筆時点の AMP の仕様では、Google Fonts のレンダリングブロックを回避する唯一の方法です。

AMP での rel="preload" については、下記のページで詳細な説明をご覧いただけます。

Optimizing your hosted AMP pages

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