【令和最新版】Google Fontsの読み込み最適化の結論

当ブログで行ったGoogle Fontsの読み込み最適化を紹介します。CLSを大幅に改善できたので個人的にはこれが最適解だと思っています。

結論

いきなり結論ですが、次のHTMLのhrefの値を使用しているGoogle Fontsのそれに変更し、head内で読み込んでください。

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" fetchpriority="high" href="{href}" />
<link rel="stylesheet" href="{href}" media="print" onload='this.media="all"' />

説明

この実装はCSS-TRIKSで紹介されていたFOUTを防ぐ実装方法をアップデートしたものです。

参考：How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy

※FOUT：「Flash Of Unstyled Text」の略で、Webページがロードされた直後にテキストのスタイルが急に変わる現象のことを指します。

preconnectの指定

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

ブラウザにGoogleフォントのサーバーおよびフォントファイルをホストしているサーバーに対する接続を事前に開始するよう指示をします。

こちらのコードはGoogle Fontsの”Get embed code”から出力されるコードの一部ですので、既に導入されているとは思います。

フォントのスタイルシートを可能な限り事前に読み込む

<link rel="preload" as="style" fetchpriority="high" href="{href}" />

Webページの描画が行われる前にフォントを利用可能にしてページの表示速度を向上させます。

rel="preload"でGoogle Fontsのスタイルシートを事前に読み込むように指示をします。加えて参考記事リリース時には存在しなかったfetchpriority="high"属性を指定することでより優先的に読み込むように命令をします。

fetchpriority属性はリソースの先読みをどのように優先させるべきかを示す属性です。値にhighを指定することで高い優先度で先読みを行うよう指示をします。現在ではFirefox(とOpera)以外で利用可能です。

参考：HTMLLinkElement: fetchPriority プロパティ - Web API | MDN

fetchpriority属性は画像にも利用できるので、LCPを引き起こしやすいメインビジュアルのデカい画像だったり、ファーストビューあたりで表示されるloading="lazy"を指定できない画像に対してはfetchpriority="high"を指定しておくと良さそうです。

フォントが読み込まれるのを待ってからWebページに適応させる

<link rel="stylesheet" href="{href}" media="print" onload='this.media="all"' />

スタイルシートを読み込むリンク要素ですが、初期値にmedia="print"を指定しておくことで印刷用のCSSだとブラウザを騙して現在のレンダリングと関係なく読み込みさせます。

そしてonloadイベントが発火した（フォントの読み込みが完了した）時に、this.media="all"とすることで初めてWebページに適応させるという仕組みです。

裏技感はあるものの、フォントの読み込みがWebページの表示を妨げないようにするための施策としては最もコストが低いやり方だそうです。

実際にLighthouseの点数は上がった

この施策を行う前はCLSの項目でアラートが出ていましたが、導入後はアラートが無くなり大幅にパフォーマンスの点数が上昇しました。効果はかなりあると思います。

Astroには astro-google-fonts-optimizer というGoogle Fonts最適化のインテグレーションがありますが、何故か普通に読み込むより点数悪くなったのでリムーブしました。

本題からは話がそれますが、メインビジュアルのデカい画像にfetchpriority="high"を指定したら点数が2点くらい上がり、モバイルはLighthouseの機嫌が悪いとたまに出るもののデスクトップではLCPの警告が無くなりました。

まとめるとfetchpriority属性は最強です。次回のご活躍も期待しております。