Googleフォントをローカル配信するだけでWordPressのスコアが激変した話

【テーマ問わず使える】プラグインvs手動を徹底比較

まめすけ

「PageSpeed InsightsでFCPが7秒超え…どうすればいいの？」

そんな悩みを抱えていたこのブログ「ウェブlog」で、たった1つの施策によってFCPが7.1秒→1.1秒、スコアが24点も改善されました。

その施策とは「Googleフォントのローカル配信」です。

難しそうに聞こえますが、プラグインを使えば設定ほぼゼロ。WordPressのテーマを問わず使える汎用的な方法なので、Googleフォントを使っているすべてのWordPressサイトに有効です。

この記事では「プラグインで自動化する方法（OMGF）」と「手動でローカル配信する方法」の両方を実測データ付きで比較します。

まず結果から：施策前後の比較

なぜGoogleフォントがサイトを遅くするのか

Googleフォントを使うと、ページが読み込まれるたびにGoogleのサーバー（fonts.googleapis.com）へ通信が発生します。

この外部通信が発生するまでフォントの読み込みが始まらないため、テキストの表示が遅れてFCP（First Contentful Paint）に大きなダメージを与えます。

特にモバイル環境では回線速度の影響を受けやすく、PageSpeed Insightsのモバイルスコアを大幅に下げる原因になります。

解決策：フォントファイルを自分のサーバーに置いて配信する

Googleのサーバーへの通信をなくし、自分のサーバーからフォントを直接配信することで、この遅延を解消できます。これを「ローカルホスティング」と呼びます。

方法A：プラグイン「OMGF」で自動化（おすすめ）

「OMGF | Host Google Fonts Locally」はインストールして有効化するだけで、サイトで使われているGoogleフォントを自動検出し、サーバーに保存してローカル配信に切り替えてくれるプラグインです。

OMGF の特徴

• インストールするだけで自動でGoogleフォントを検出・保存
• preloadを自動設定してくれるのでフォントの優先度が上がる
• GDPR対応（Googleへの個人情報送信をブロック）
• 無料で使える（Pro版もあり）

インストール・設定手順

SWELLテーマの場合はSWELL設定 → 高速化 → 「SWELLキャッシュをクリア」も忘れずに。

方法B：手動でGoogleフォントをローカル配信

プラグインを増やしたくない方や、仕組みをしっかり理解したい方向けの手動方法です。少し手間がかかりますが、プラグインへの依存がないというメリットがあります。

手順

@font-face {  font-family: 'Noto Serif JP';  font-style: normal;  font-weight: 400;  font-display: swap;  src: url('/wp-content/themes/テーマ名/assets/fonts/フォントファイル名.woff2') format('woff2');}

プラグイン（OMGF）vs 手動：実測比較

スコアはOMGFが5点上回りました。主な差はpreloadの設定です。OMGFはLoad Earlyをオンにするだけで自動的にpreloadを設定してくれますが、手動方法ではphp（functions.php）での追記が必要になります。

手間・効果ともにOMGFに軍配が上がりますが、「プラグインを極力増やしたくない」という方は手動方法＋preload設定で同等の効果が期待できます。

注意点・よくある失敗

① 既存のGoogleフォント読み込みを削除し忘れる

テーマやプラグインがGoogleフォントを読み込んでいる場合、OMGF導入後も重複して読み込まれることがあります。OMGFのダッシュボードで「All Google Fonts are optimized」と表示されているか確認してください。

② 手動方法でCSSのパスが間違っている

フォントファイルのパスが間違っているとフォントが読み込まれず、フォールバックフォント（デバイスのデフォルト）が表示されます。ブラウザの開発者ツールでネットワークタブを確認して、フォントが正常に読み込まれているかチェックしましょう。

③ キャッシュが残っている

設定変更後にキャッシュが残っていると効果が反映されません。必ずキャッシュクリア後に計測してください。

まとめ

Googleフォントのローカル配信は、Googleフォントを使っているWordPressサイトなら必須レベルの速度改善施策です。

• 手軽にやるなら：OMGFプラグインをインストールするだけ
• プラグインを増やしたくないなら：手動でwoff2をアップロード＋CSSで@font-face定義
• どちらもテーマを問わず使える

実際にこのブログ「ウェブlog」でOMGFを導入したところ、FCPが7.1秒→1.1秒、スコアが24点アップという結果になりました。

もしGoogleフォントを使っているならぜひ試してみてください！

この記事はウェブlogの速度改善シリーズの一部です。一覧はこちら