Lighthouseスコア100への道①：Google Web Fontの最適化がスコアアップの鍵！

2025.03.03 : Yamamoto Naoki

Coding

Webサイトの印象を大きく左右するWebフォント。特にGoogle Fontsは手軽に高品質なフォントを導入できるため、多くのサイトで利用されています。しかし、その手軽さゆえに、何も考えずに導入するとWebサイトの表示速度を著しく低下させ、Lighthouseスコアの足を引っ張る大きな原因になることをご存知でしょうか？

今回は、シリーズ「Lighthouseスコア100への道」の第1弾として、簡単な改善策から、スコア100を本気で目指すための究極の最適化まで、Google Web Fontのパフォーマンスを最大限に引き出す秘訣を徹底解説します。

なぜGoogle Fontsがパフォーマンスのボトルネックになるのか？

Lighthouseレポートで「レンダリングを妨げるリソースの除外」や「ウェブフォント読み込み中のテキストの表示」、「事前に接続を確立してください」といった指摘を受けたことはありませんか？これらの原因の多くは、Webフォントの読み込み方法にあります。

標準的な方法では、ブラウザがHTMLを解析し、CSSをリクエストし、さらにそのCSSからフォントファイルをリクエストする…という段階的なプロセスを経るため、どうしても遅延が発生します。この遅延が、テキストが非表示になる時間（FOIT: Flash of Invisible Text）を生み出し、ユーザーの体感速度とLighthouseスコアを著しく低下させるのです。

解決策1：【必須レベル】font-display: swap; を必ず指定する

まず、誰でも絶対に実施すべき最も簡単で効果絶大なのがfont-display: swap;の指定です。

これを指定すると、ブラウザはWebフォントの読み込みを待たずに、まず代替フォントでテキストを表示します。その後、Webフォントのダウンロードが完了した時点でフォントを差し替えます。これによりFOITを完全に防ぎ、ユーザーは即座にコンテンツを読めるようになります。

実装方法

Google FontsのURLの末尾に &display=swap を追加するだけです。

変更前：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700" rel="stylesheet">


変更後：
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

たったこれだけでLighthouseの「ウェブフォント読み込み中のテキストの表示」はクリアできます。これはWebフォント利用の大前提と考えましょう。

解決策2：必要な文字・太さだけを読み込む

特に日本語フォントはファイルサイズが巨大です。サイトで使用するフォントの太さ（wght）は本当に全て必要でしょうか？見出し用に太字（700）、本文用に標準（400）など、実際に使用するウェイトだけに絞り込むことで、ダウンロード量を大幅に削減できます。

悪い例（不要なウェイトまで読み込んでいる）：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">


良い例（必要なウェイトだけに絞っている）：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

解決策3：【究極の最適化】PreconnectとPreloadを駆使した最速ロード術

display=swapとウェイトの絞り込みでスコアはかなり改善しますが、Lighthouseで100を目指すなら、もう一歩踏み込んだ最適化が必要です。「レンダリングを妨げるリソースの除外」や「事前に接続を確立してください」といった項目をクリアするための、究極のテクニックがこちらです。

<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="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">

一見複雑に見えますが、各行が連携して最高のパフォーマンスを発揮します。分解して見ていきましょう。

パート1: preconnect フォントを読み込むには、まずCSSファイルがあるfonts.googleapis.comに、次にフォントファイルがあるfonts.gstatic.comに接続する必要があります。preconnectは、この接続（DNSルックアップ、SSL/TLSネゴシエーション等）を事前に済ませておく指示です。これにより、いざダウンロードする際の待ち時間を劇的に短縮できます。
パート2: preloadとfetchpriority preloadは、このCSSファイルが後で必ず必要になることをブラウザに伝え、先行してダウンロードを開始させる指示です。さらにfetchpriority=”high”を付けることで、「他のリソースより優先して！」と強く念押しし、ダウンロードの順番を早めることができます。
パート3: 非同期でのCSS適用 最後の行がこのテクニックの肝です。
1. media=”print”で、ブラウザに「これは印刷用のCSSだ」と誤認させ、画面表示のレンダリングをブロックさせないようにします。
2. CSSのダウンロードが終わるとonloadイベントが発火し、this.media=’all’に切り替わります。
3. この瞬間に初めてスタイルが画面に適用されるため、レンダリングを一切妨げることなくフォントを読み込めるのです。

この4行のコードは、GoogleのCDNを利用する形でのWebフォント読み込みにおいて、現在考えられるほぼ最速の方法です。

（参考）解決策4：フォントをセルフホスティングする

もう一つの上級者向けテクニックとして、自分のサーバーにフォントファイルを置いて読み込む「セルフホスティング」があります。外部サーバーへの通信が一切なくなるため遅延が減る、より細かなサブセット化が可能になる、などのメリットがありますが、設定が煩雑になるデメリットもあります。究極のパフォーマンスを目指す上では、前述の「PreconnectとPreloadを駆使する方法」と「セルフホスティング」、どちらが自分のサイトの構成に合っているか検討してみると良いでしょう。

まとめ

Webフォントはサイトの品質を高める強力なツールですが、パフォーマンスへの配慮が不可欠です。Lighthouseスコア100を目指すなら、以下のステップで最適化を進めましょう。

【必須】 まずは&display=swapをURLに追加し、使用するウェイトを絞る。
【推奨】 ここまでの対策で満足できない、あるいはスコア100を本気で目指すなら、PreconnectとPreloadを組み合わせた究極のテクニックを導入する。
【選択肢】 サイトの要件に応じて、セルフホスティングも検討する。

まずは簡単な設定から、そしてぜひ究極の最適化へ。正しい知識で、美しさと速さを両立したWebサイトを実現しましょう！

次回は、ページの表示を劇的に速くするテクニック「プリロードの活用」について、フォント以外のリソースにも焦点を当てて解説します。お楽しみに！