Google Fontsの外部ファイルを少しでも速く表示させる方法

Google Fontsで日本語のWebフォント（Japanese）が幾つも無料で提供されていて現在は正式版として相当に使い易くなっている。

Google Fontsの日本語フォント

種類が非常に多くて五十二件（2022年2月時点）から二十件のみ掲載する。

※フォント名のリンクの右横の「適用」を押すと本稿のフォントを入れ換えて表示する（読み込みに多少とも時間がかかる）。
※全ての内容が揃ってないフォントは部分的に元のフォントが使われる。Google Fontsを外部ファイルで読み込むとすると日本語は漢字が多いためにどうしても時間がかかってしまう。近年、Webフォントが読み込まれてサイトで使えるまで通常のフォントが出るようになったから以前みたいに文字のない画面で始まるのを避けられるにせよ、入れ替わるときのカク付きはあり得るし、なるべく速く読み込んでその他のパフォーマンスも下げることが少ないように使いたい。

先読みのrel-preloadを適用する
Google Fontsの先読みのソースコード
JavaScriptなしで普通に読み込む
JavaScriptなしでも先読みする
Noto Sans Japaneseを使ったサンプル

先読みのrel-preloadを適用する表示速度に関してはHTMLのリソースヒントの一つで、外部ファイルを先読みで取得するrel-preloadを使うのが最速みたいだ。そしてWebフォントの外部ファイルで問題になるパフォーマンスの低下も相当に低く抑えられる。例えばGoogle Fontsを普通に使ってサイトのパフォーマンスを計測するPageSpeed Insightsにかけると幾つかの警告が出て来てしまう。最も厳しいのが「レンダリングを妨げるリソースの除外」で、Webフォントの読み込みが後ろのコンテンツの表示を止めてしまってそれだけ表示速度を含めたパフォーマンスを低下させる。しかしrel-preloadを適用すると外部ファイルの読み込みが非同期になるからブラウザはWebフォントが使えるまでその場で待たずに後ろのコンテンツを直ちに扱うことができる。 PageSpeed Insightsのレンダリングを妨げるリソースの除外の項目で合格と判定されている

PageSpeed Insightsのレンダリングを妨げるリソースの除外の項目で合格と判定されている

レンダリングを妨げるリソースの除外｜PageSpeed Insights｜Google Developers

PageSpeed Insightsの「レンダリングを妨げるリソースの除外」の警告は出なくなる。Google Fontsの先読みのソースコード

<link rel="preload" href="Webフォントの外部ファイルのURL" as="style" onload="this.removeAttribute('onload');this.removeAttribute('as');this.rel='stylesheet';">

どんなWebフォントでも帯文字の部分だけ変更して使うことができる。linkタグのas属性の値はWebフォントの外部ファイルの先読みには「font」を使わなくてはならない。しかしGoogle Fontsで提供されるWebフォントのソースコードの外部ファイルのURLはその先の実際に使われるWebフォントのタイプの振り分け用になっている。なのでas属性の値は「style」を入力することになる。先読みのソースコードはサイトの適切な場所ならばどこに置いても構わないけれどもなるべく上の方に置いた方がそれだけ速く展開できる。head内の先頭に近いところがパフォーマンスを保つには最適な場所になる。ソースコードの内容としてWebフォントの外部ファイルを読み込んだらデザインのCSSとして読み込むという一連の流れがあり、それはJavaScriptで行われているので、もしもブラウザがJavaScriptを使用しない設定担っていると止まってしまう。JavaScriptなしで通常のフォントを使う場合は上記のソースコードだけで他に何もする必要はない。BloggerなどのXMLのマークアップが必要なサイトはそのままではエラーになるからソースコードを修正しなくてはならない。JavaScriptなしで普通に読み込む

<noscript>
Webフォントの元のソースコード 
</noscript>

使用したいWebフォントの元のソースコード、外部ファイルのURLを指定するlinkタグをJavaScriptなしで表示するnoscriptタグで囲って追加しておく。これは「レンダリングを妨げるリソースの除外」の警告の対象になるので、後のコンテンツの表示を止めないためにはbody内の下の方に置くべきだけど、するとWebフォントの表示速度自体は最も遅くなるからバランスを取るならばhead内の下の方に上げても良いかも知れない。JavaScriptなしでも先読みする先読みのlinkタグ

<link rel="preload" href="Webフォントの外部ファイルのURL" as="style">

Webフォントのlinkタグ

Webフォントの元のソースコード

パフォーマンスを低下させないためにはWebフォントの元のソースコードを全てのコンテンツの終わりに置かなくてはならない。つまりbodyの終了タグ（</body>）に近いところに記載する。するとWebフォントの表示は後回しになるので、優先したければもっと上のhead内の下などもバランスを取り易い。先読みのrel-preloadのlinkタグは全てのコンテンツ、メタ情報も含めれば全てのマークアップの始まりに置くのが最も効果的だ。headの開始タグ（<head>）に近いところに記載するべきだと思う。先読みのソースコードはWebフォントの元のソースコードよりも前に置かないと効果的ではない。後に置いたら意味はないし、前でも遠く離すほどに先読みを終えて後の元のソースコードに辿り着いたときに速やかに開始できる。これはJavaScriptを使ったソースコードと比べると場合によってパフォーマンスが低いかも知れない。Webフォントの読み込みが完了した時点で、即座に次のデザインの読み込みに移るかどうかは全てのサイトで同じとはかぎらないためだ。先読みと元の二つのソースコードを離して効果的に記載すればするほどに上手く行き難くなってしまいもする。ブラウザは上の作業が終わっても下の作業にまだ辿り着かず、二つの流れに開きが出て来て無駄を残す可能性がある。Noto Sans Japaneseを使ったサンプル Google Fontsの日本語フォントのNoto Sans Japaneseの紹介ページ

Google Fontsの日本語フォントのNoto Sans Japaneseの紹介ページ

Noto Sans Japanese｜Google Fonts｜Google

実際にWebフォントの外部ファイルを先読みに変更するときはどうなるかをGoogle FontsのNoto Sans Japaneseを例として確認してみる。元のソースコード

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

現在、三つのlinkタグが使われる。最初の二つはHTMLのリソースヒントのrel-preconnect（多めの事前接続）で表示速度を少し改善するためにあり、最後の一つがWebフォントの幾つかのタイプを振り分ける外部ファイルになる。Google Fontsはその先にWebフォントの外部ファイルがあるので、直接、Webフォントの外部ファイルを読み込むわけではない（だからrel-preconnectのlinkタグが二つもあるんだろう）。先読みのソースコード

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" as="style" onload="this.removeAttribute('onload');this.removeAttribute('as');this.rel='stylesheet';">

三つのlinkタグの最初のものは最後のもののドメイン（https://fonts.googleapis.com）の事前接続だからそれが先読みになると吸収されて必要なくなる。だから二番目のWebフォントの事前接続のものを残して最後のWebフォントの本体というか、そうしたデザインのCSSのためのものに先読みを適用する。置き場所はどちらもサイトのソースコードの先頭付近に置くことが望ましい。JavaScriptなしの場合に対応すれは所定のnoscriptタグを追加したり、Webフォントのソースコードを先読みと本体に分割して記載したりできる。Google Fontsの外部ファイルの先読みのソースコードを紹介したけれどもその他のWebフォントの外部ファイルでも提供されるソースコードの内容が違うにせよ、linkタグのrel-preloadで外部ファイルを先読みすれば表示速度とパフォーマンスを大きく落とさないように使うことができる。