Googleの提供するPageSpeed Insightsでこのブログのパフォーマンスを診断したら、読み込みが遅い状況が見えた。
ChatGPTに聞きながらセッテングしたら99に改善した。
【Before】
【After】
ステップ1：原因の洗い出し
まずPageSpeed Insightsの結果を見て気になったのは、次の3点だった。
- Eliminate render-blocking resources（レンダリングをブロックしているリソース）
→ ajax.googleapis.com/jquery.min.js と cdnjs.cloudflare.com/jquery-migrate.min.js が原因。 - font-awesome.min.css がブロック扱い。
- Largest Contentful Paint（LCP） が5秒近く、表示の遅延が目立っていた。
この3つを潰せば、一気にLCPとスコアが改善できそうだとChatGPTが判断。
ステップ2：jQueryとFont Awesomeを完全排除
Cocoonテーマは内部でFont Awesomeを呼び出しているが、このブログではアイコンをほぼ使っていなかった。
また、いくつかのプラグイン（特にGoogle系やSNS連携系）が外部CDN（Content Delivery Network）のjQueryを自動的に読み込んでおり、それがブロック時間を生んでいた。
WordPressの管理画面だけで対処できないので、Code Snippetsプラグインを使って以下の処理を追加した。
- Font Awesome関連のCSS（font-awesome.min.css / fontawesome.css など）を読み込みキューから除外
- CDN経由の jQuery / jQuery Migrate を検出して強制的に削除
- 代わりに WordPress同梱の jQuery（/wp-includes/js/jquery/jquery.min.js） を登録
- jQuery Migrate は原則無効化（必要ならコメントを外して再有効化できる構造に）
Code Snippetsでは「Only run on site front-end（フロントエンドのみ）」に設定。
一度有効化してから Autoptimize のキャッシュを削除し、再生成した。
この時点で curl コマンドでHTMLを取得しても、
ajax.googleapis.com や cdnjs.cloudflare.com の文字列は一切出なくなった。
ステップ3：AutoptimizeのCSS設定を調整
次はCSS側の最適化。
AutoptimizeはCocoonと相性が良いが、設定次第では逆にスコアが落ちることもある。
今回は試行錯誤の結果、以下の設定に落ち着いた。
| 設定項目 | 状態 |
|---|---|
| CSS コードを最適化 | ON |
| CSS ファイルを連結 | ON |
| インラインの CSS も連結 | OFF |
| データ生成: 画像を URI 化 | OFF |
| レンダリングブロックしている CSS を除去 | ON |
| すべての CSS をインライン化 | OFF |
| Autoptimize から CSS を除外 | , admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/ |
ポイントは、「インラインCSSの連結」を切ったこと。一時的にONにしたときはスコアが65まで落ちたが、OFFに戻したら一気に改善した。CocoonのようにインラインCSSを多用するテーマでは、連結処理が逆にブロックを生む場合があるようだ。
ステップ４：キャッシュと最終確認
ここまででAutoptimizeのキャッシュを再削除し、
シークレットウィンドウでトップページを再読み込み。
その後、再度PageSpeed Insightsでモバイルを計測。
結果は――スコア99点。
LCPも4.7秒→3.6秒前後に改善。
「Eliminate render-blocking resources」の項目からは
ajax.googleapis.com と cdnjs.cloudflare.com の行が完全に消えた。
まとめ
ここまでやってみてわかったのは、外部CDNとCSSの最適化順序がPageSpeedの最大要因だったということ。
とくにCocoonテーマでは、Autoptimizeの設定バランスがシビアで、
「最適化ONにすれば速くなる」という単純な話ではない。
• jQueryはWordPress同梱を使う（CDNは切る）
• Font Awesomeは不要なら完全停止
• インラインCSSの連結は切る
• レンダリングブロックCSSの除去はON
この4点を満たした瞬間、スコアは劇的に上がった。
Docker上のWordPressでも、適切に最適化すればPageSpeed Insights 99点は普通に狙える。
大掛かりなCDNサービスを使わなくても、Nginx + Autoptimize + ちょっとの調整でここまでいけるのは大きな収穫だった。
次の課題は、wp-block-library のCSSをトップだけ外すことと、
ページキャッシュを導入してTTFBをさらに下げること。
これをやれば、モバイルでも安定して100点が見えてきそうだ。
コメント