サイト表示速度が「施策を打っても上がらない」ときは、原因分析に1日を集中投下する

Lighthouse スコア改善に着手したのに「パフォーマンスが全然上がらない」——この手詰まりは、ボトルネックが1箇所ではなく動画・フォント・JavaScript・画像・計測タグ・キャッシュに分散しているときに起きます。個別施策を順に打つのではなく、原因分析だけに集中する日を設けて全ボトルネックを一度に洗い出すことで、EC サイトの LCP 目標 1.5 秒の達成につながりました。

分析で見つかった典型的なボトルネック

実際の分析で判明した問題は、どれも単体の Lighthouse 指摘からは見えにくいものでした。

• ヒーロー動画の二重取得: PC 版と SP 版の動画を <source media> で出し分けておらず、両方（計約6MB）を毎回ダウンロードしていた。デバイス別出し分けと preload="none" + IntersectionObserver の遅延読込で半減
• 意味を失ったフォントサブセット: 日本語フォントをサブセット分割したのに全32ファイル・計2.7MBを毎ページ読み込んでいた。使用文字のみの再サブセット化と font-display: swap で解消
• ABテストツールのアンチフリッカー: 画面を最大2秒ブロックする処理が LCP に甚大な影響を与えていた。ツールの除外が LCP 目標達成に直結した
• 計測タグの一斉発火: 広告・分析系タグが初期ロードで一斉に発火しメインスレッドを阻害。遅延読込と棚卸しで対処
• 画像フォーマット: ギャラリー画像の WebP 化で転送量を約40%削減

教訓

1. スコアが頭打ちになったら、施策ではなく計測に戻る。 ボトルネックが分散している場合、上位1つを潰しても体感もスコアも動かない
2. サードパーティスクリプトを疑う。 ABテスト・タグマネージャ由来の描画ブロックは、自前コードの最適化では絶対に解決しない
3. 「最適化したはず」の設定を検証する。 フォントサブセットや画像遅延読込は、導入後の運用変更で形骸化していることがある
4. 効果はリリース単位で計測する。 before/after のスコアとフィールドデータ（セッション・トラフィック）を対で残すと、次の投資判断がしやすい