Mobilisticaでは、運営する複数のWordPressサイトの実測データをもとに、表示速度改善の効果を検証しています。今回は、あるECサイト（コーヒー豆の通販サイト）で、2日間かけて実施した改善の記録です。Google PageSpeed Insightsでの計測値をベースに、何をしたら何が変わったかを、うまくいかなかった施策も含めて具体的に残します。
モバイルのPerformanceスコアは28点から76点まで改善しました。PageSpeed Insightsの基準では50〜89点は「改善が必要」ゾーンにあたるため、モバイルはまだ「緑（90点以上）」には届いていません。一方でデスクトップは97点まで到達しています。この記事では、緑ゾーンに届いていない部分も含めて、正直に現状を書きます。
計測値の変化
スコアという1つの数字だけでなく、実際の体感速度に直結する指標がどう変わったかが重要です。
- LCP（Largest Contentful Paint／最大コンテンツの描画時間）：約10秒 → モバイル4.6秒 / デスクトップ1.2秒。ページの「メインの内容が表示されるまでの時間」の指標です
- CLS（Cumulative Layout Shift／レイアウトのズレ）：0.35〜0.61 → 0.000（安定）。読み込み中にボタンやテキストの位置がガタつく現象の指標です
- TBT（Total Blocking Time／メインスレッドのブロック時間）：1.7秒 → 0ms。ページが「見た目は表示されているのにタップしても反応しない」時間です
- 総転送量：約3,350KiB → 917KiB（-73%）
- 未使用JavaScript：453KiB → 0（完全解消）
効果が大きかった施策
1. 画像の圧縮とレスポンシブ化（LCP改善の中心）
JPEG画像をPillowでQ80圧縮し、904KBから202KBまで削減。さらにヒーロー画像を768w/1200wのレスポンシブサイズで書き出し、LCP用のpreloadとpicture要素によるWebP配信を組み合わせました。この施策単体でLCPが6.2秒から4.6秒まで縮まっています。画像1枚の最適化が、全体のスコアに与える影響の大きさを実感した施策です。
2. 日本語Webフォントの見直し
日本語Webフォントをシステムフォントに切り替え、1,580KBの転送量を削減しました。見た目への影響が一番大きい施策なので、ブランドの見え方を事前に確認してから実施しています。速度への効果は今回の施策の中でも特に大きいものでした。
3. 未使用JavaScriptの条件付き読み込み
WooCommerce関連のJS（YITH・React系・WCPA等）を、実際にその機能を使わないページでは読み込まないよう条件分岐しました。これだけで163KBの削減になり、他の細かい未使用スクリプト除去（EWWWのArrive.js・WebP検出スクリプトなど）とあわせて、最終的に未使用JSは0まで解消しています。
4. CSSの分割
1本のCSS（main.css、126KB相当）を、全ページ共通のcore（35KB）とページ固有のpages（91KB）に分割し、トップページではcoreのみを読み込むように変更しました。「使わないCSSまで全ページで読み込む」という、よくある無駄を削減した形です。
5. サードパーティスクリプトの遅延読み込み
Facebook PixelやMicrosoft Clarityなどの計測タグを、初回操作または5秒後に読み込む方式に変更しました。Google タグマネージャー経由のgtagも同様に遅延化し、コンバージョン計測用のstub（データ収集の仮受け皿）だけ先に用意して、本体ライブラリは後から読み込む構成にしています。計測を止めずに速度を稼ぐ、というのがポイントです。
うまくいかなかったこと
良かった施策だけでなく、試して逆効果だったこともそのまま書きます。wp-block-libraryのCSS読み込みを止めるという、よく紹介される定番の高速化テクニックを試したところ、Speed Indexがかえって2.9秒から4.8秒に悪化しました。ブロックエディタの基本スタイルは、実は初期描画に必要な最低限のCSSを含んでおり、無条件に削るとレンダリングが逆に遅くなることがあります。「定番のテクニック」がそのまま効くとは限らない、という実例です。
今後の課題
PageSpeed Insightsの改善提案はすでに0件になっていますが、まだ手をつけていない部分もあります。jQueryとjQuery Migrate（合計約99KB）はWooCommerceやフォームプラグインが依存しているため、簡単には外せません。またCDN導入（画像配信のさらなる高速化）は検討中で、モバイルのLCPをもう一段縮める余地があると見ています。
まとめ
統計的な「一般論」ではなく、実際に運営しているサイトの実測データをもとに、何をしたらどれだけ変わったか、そして何が効かなかったかを具体的に記録していくのがMobilisticaの方針です。今後も改善事例を随時追加していきます。