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

2026年3月6日

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

まめすけ

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

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

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

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

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

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

指標	施策前	施策後（OMGF）	変化
総合スコア（モバイル）	59点	83点	+24点
FCP（最初の描画）	7.1秒	1.1秒	-6.0秒
LCP（最大要素の描画）	8.1秒	4.5秒	-3.6秒
Speed Index	7.1秒	3.3秒	-3.8秒

なぜ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版もあり）

インストール・設定手順

STEP

プラグインをインストール

ダッシュボード → プラグイン → 新規追加
「OMGF」で検索
「OMGF | Host Google Fonts Locally」をインストール → 有効化

STEP

ダッシュボードを確認

有効化するとサイドメニューに「OMGF」が追加されます。設定画面を開くと自動でGoogleフォントが検出されているはずです。

「All Google Fonts are optimized and hosted locally.」と表示されていれば成功
「No potential issues found in your configuration.」も確認

STEP

Load Earlyの設定

検出されたフォントの一覧から、使用しているフォント（例：Noto Serif JP）の「Load Early」にチェックを入れます。これによりフォントが優先的に読み込まれ、FCPがさらに改善されます。

STEP

Save & Optimize

画面下部の「Save & Optimize」ボタンをクリックして設定を保存します。

STEP

キャッシュクリア → 再計測

キャッシュプラグインを使っている場合はキャッシュをクリアしてから、PageSpeed Insightsで再計測してください。

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

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

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

手順

STEP

フォントファイルをダウンロード

以下のサイトでGoogleフォントのwoff2ファイルをダウンロードできます。

URL：https://gwfh.mranftl.com/fonts/
使用しているフォント名で検索（例：noto-serif-jp）
Subsets → japanese を選択
Styles → 使用しているウェイトにチェック（例：400・700）
「Download files」でzipをダウンロード → 解凍

STEP

サーバーにアップロード

解凍した.woff2ファイルをサーバーにアップロードします。

アップロード先（例）：wp-content/themes/テーマ名/assets/fonts/
fontsフォルダがない場合は新規作成

STEP

CSSで @font-face を定義

WordPress管理画面の「外観 → カスタマイズ → 追加CSS」に以下を追加します。（Noto Serif JPの場合の例）

@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');}

使用するフォント・ウェイトに合わせてファイル名を変更してください。400と700の2つ使っている場合は2つ記述します。

STEP

キャッシュクリア → 再計測

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

	OMGF（プラグイン）	手動
スコア	83点	78点
FCP	1.1秒	3.0秒
LCP	4.5秒	4.4秒
手間	ほぼゼロ	そこそこかかる
preload設定	自動	手動で別途必要
プラグイン依存	あり	なし
おすすめ度	★★★	★★☆