Mobilisticaは先日、モバイルECサイト無料診断というオープンソースの診断ツールを公開しました。公開してまず最初にやったのは、そのツールで自分のサイトを診断することです。結果は少し恥ずかしいものでした。PageSpeed改善を扱うメディアなのに、LCP（最大コンテンツの描画）が約5〜7秒。この記事は、その原因を特定して当日中に直し、スコアがどれだけ変わったかの実測記録です。
診断結果：スコアより「優先順位」を見る
2026年7月17日、自作の診断ツール（内部ではGoogleのPageSpeed Insights APIを使用）でモバイル計測した初期値は次のとおりでした。
- トップページ：Performanceスコア 76.67／LCP 5.76秒（評価poor・目標2.5秒）
- 記事ページ：Performanceスコア 71.7／LCP 6.70秒（poor）
ここで重要なのは、CLS（表示のガタつき）が0.00台、TBT（処理のブロック時間）が0msと、ほぼ満点だったことです。診断ツールはこの組み合わせから「レイアウトとJavaScriptは健全。最大要素の“配信”だけが律速」という優先順位（P1判定）を返してきました。闇雲に高速化テクニックを試すのではなく、直すべき場所が1箇所に絞れたわけです。
原因の特定：Webフォントがレンダリングを止めていた
PageSpeed Insightsの詳細監査を見ると、読み込みを圧迫している筆頭にGoogle Fonts（Noto Sans JPとJetBrains Mono）が約119KBで挙がっていました。当サイトのテーマはフォント読み込みに描画置換の許可（swap指定）もプリコネクトも設定済みでしたが、フォントのCSSファイル自体がレンダーブロッキングのままでした。つまりブラウザは、見出しテキストを描く前にこのCSSのダウンロードを待っていたのです。テキスト主体のサイトではLCP要素はたいてい見出しや本文ブロックなので、これが直撃します。
修正：テーマファイルに数行追加しただけ
対策は「フォントCSSを非同期で読み込み、先にシステムフォントで描画してから、読み込み完了後に置き換える」方式です。WordPressのテーマなら、スタイルの読み込みタグを加工するフィルターで実現できます。
ポイントは3つあります。①メディア属性を一時的にprintにしてダウンロードを非ブロッキング化し、読み込み完了時にallへ切り替える ②JavaScriptが無効な環境向けにフォールバックを残す ③描画置換の許可（swap）は引き続き必須（フォント到着時の置き換えを滑らかにする）。
結果：約15分の作業でLCPが2.5〜2.9秒短縮
修正を反映して再計測した結果です（同日・同条件のモバイル計測）。
- トップページ：76.67 → 89.67（LCP 5.76秒 → 3.22秒）
- 記事ページ：71.7 → 87.17（LCP 6.70秒 → 3.83秒）
変更はテーマファイル1つ、実質十数行。それでもスコアは13〜15点、LCPは2.5秒以上改善しました。前回の28点→76点の改善記録では画像とキャッシュが主役でしたが、今回のようにフォントの読み込み方ひとつが数秒を奪っているケースは、ECサイトでも非常によくあります。
まだ終わりではない：残った課題
正直に書くと、LCPは3.2秒でまだ目標の2.5秒には届いていません。診断ツールの優先度もP1からP2に下がっただけです。残っている改善候補は次のとおりです。
- Cache-Controlヘッダーの設定（静的ファイルのブラウザキャッシュ）
- 未使用CSSのさらなる削減（フォントのウェイト数見直し・サブセット化）
- フォントのセルフホスト化（外部接続そのものをなくす）
これらも実施したら、同じように実測データで続報を書きます。
自分のサイトでも同じ診断ができます
今回使った診断は、Mobilisticaが無料公開しているモバイルECサイト無料診断でどなたでも実行できます。URLを入れるだけで、今回のように「どこから直すべきか」を売上影響順に提示します。エンジニアの方はGitHub（オープンソース）のコマンドライン版で、修正前後の比較レポートも作れます。
よくある質問
描画置換の許可（swap）を設定していれば十分ではないのですか？
swapは「フォント到着までの代替表示」を許可する設定で、フォントCSSファイル自体のダウンロード待ちは解消しません。今回のようにCSS読み込みがブロッキングのままだと、swap以前の段階で描画が止まります。
この方法はどのWordPressテーマでも使えますか？
テーマがWordPress標準の仕組みでフォントを読み込んでいれば応用できます。判定に使うハンドル名をお使いのテーマに合わせて変更してください。プラグインやカスタマイザー経由で読み込んでいる場合は方法が異なります。
計測値は毎回同じになりますか？
PageSpeed Insightsのラボ値は測定ごとに数%変動します。本記事の数値は2026年7月17日の実測値で、傾向（2.5秒以上の短縮）を見るためのものです。
まとめ
「一般論のチェックリスト」ではなく、実測→原因特定→最小の修正→再実測、という順番なら、短時間の作業でも大きな改善が得られることがあります。Mobilisticaでは今後も、自社サイトと診断ツールを使った改善の実測記録を公開していきます。