By AI Language Model (Gemini 2.5 Pro)

AstroでGoogle Fontsを最適化・インライン化する方法（astro-google-fonts-optimizer解説）

AstroでGoogle Fontsを最適化する「astro-google-fonts-optimizer」の解説

AstroサイトでGoogle Fontsを利用する際、インテグレーション「astro-google-fonts-optimizer」を導入することで、パフォーマンスを向上させることができる。このツールは、ビルド時にフォント用のCSSをHTMLに直接インライン化し、ページの表示速度を改善する。

なぜGoogle Fontsの最適化が必要か？

通常、Google Fontsを<link>タグで読み込むと、ブラウザは以下の順で処理を行う。

  1. HTMLのレンダリングを一時停止する。
  2. GoogleのサーバーへCSSファイルをリクエストし、ダウンロードする。
  3. CSSファイルの内容を解析し、その中に記述されたフォントファイル（.woff2など）をダウンロードする。

この「CSS取得」のステップはレンダリングブロックとなり、後続のフォントファイルのダウンロードも遅延させるため、ページの初回表示（FCP: First Contentful Paint）が悪化する一因となる。

astro-google-fonts-optimizerは、この最初のCSS取得リクエストを不要にすることで、このボトルネックを解消する。

astro-google-fonts-optimizerの導入手順

1. パッケージのインストール

プロジェクトにパッケージを追加する。

# npm
npm install astro-google-fonts-optimizer

# yarn
yarn add astro-google-fonts-optimizer

# pnpm
pnpm add astro-google-fonts-optimizer

2. コンポーネントの利用

レイアウトファイルやコンポーネントの<head>タグ内で、GoogleFontsOptimizerコンポーネントをインポートして使用する。

例: src/layouts/Layout.astro

---
import { GoogleFontsOptimizer } from "astro-google-fonts-optimizer";
---
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Astro Site</title>
    
    <GoogleFontsOptimizer 
      url="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" 
    />
  </head>
  <body>
    <slot />
  </body>
</html>
  • urlプロパティには、Google Fontsで生成されるCSSのURLをそのまま指定する。
  • 複数のフォントファミリーやウェイトは、&family=で繋げて1つのURLにまとめるのが標準的な方法である。

ビルド時に何が起こるか？

astro buildを実行すると、astro-google-fonts-optimizerは指定されたURLからCSSファイルの内容を取得し、HTMLファイルの<head>内に直接<style>タグとして埋め込む。

ビルド後のHTML（抜粋）

<head>
  ...
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <style>
    /* devanagari */
    @font-face {
      font-family: 'Noto Sans JP';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url(https://fonts.gstatic.com/...) format('woff2');
      ...
    }
    /* (以下、CSSの内容が続く) */
  </style>
  ...
</head>

これにより、ブラウザは外部CSSをダウンロードすることなく、すぐにフォントファイルの取得を開始できる。

主な効果とベストプラクティス

  • 初回表示の高速化: レンダリングをブロックする外部CSSリクエストがなくなるため、ページの読み込みが速くなる。
  • レイアウトシフトの抑制: font-display: swapがCSSに含まれるため、フォント適用時のちらつき（FOUT）やレイアウトのずれ（CLS）を軽減する効果が期待できる。
  • データ量の最適化: urlで指定するフォントは、実際にサイトで使用するファミリーとウェイト（太さ）のみに限定すること。不要なフォントを読み込まないことがパフォーマンスの鍵となる。

注意点

  • フォントファイル自体はGoogleから配信: このツールはCSSをインライン化するだけで、フォントファイル（.woff2など）自体をセルフホストするわけではない。そのため、ユーザーのブラウザは引き続きGoogleのサーバー（fonts.gstatic.com）へアクセスする。
  • ライセンスの確認: Google Fontsの利用規約および各フォントのライセンスは、プロジェクトの要件と合致しているか各自で確認すること。
  • URLの更新: 使用するフォントを変更・追加した場合は、コンポーネントのurlプロパティを忘れずに更新する必要がある。

参考リンク