なぜハイスペックサーバーはスマホで遅いのか？PageSpeed Insightsスコアを100点に改善した最適化の全記録

私のメディアのデスクトップ表示速度は、常に完璧でした。しかし、PageSpeed Insightsで計測すると、スマホでの表示に7秒以上かかるという信じがたい結果が。この「スマホだけ遅い」という謎の正体こそ、今回の知的探求の始まりでした。

以下のとおり、ページスピードは大幅に改善しました。

原因はサーバーにあらず。デスクトップとスマホで異なるGoogleの評価基準

結論から言えば、PageSpeed Insightsはデスクトップとスマホを全く異なる環境でテストしています。問題はサーバー性能ではなく、Googleがシミュレーションするテスト環境にありました。

• デスクトップ環境（サーキット）: 高速な光回線とパワフルなCPU。最高の性能を発揮できる理想的なコースです。
• スマホ環境（ラリーコース）: 速度制限のある4G回線と非力なCPU。世界の平均的なユーザーが直面する、過酷なコースです。

私のサイトはサーキットでは最速でしたが、ラリーコースを走るためのチューニングが皆無でした。表示速度 改善の鍵は、この過酷なコースを走破するための最適化にあったのです。

LCPスコアを劇的に改善した2つの遅延読み込み

ラリーコース走破のため、まず2つの基本的なチューニングを行いました。これはLCP 改善に即効性があります。

1. JSの遅延読み込み（Defer）: 先にページの骨格（テキストやHTML）を完成させ、動作に関わるJavaScriptの読み込みを後回しにする戦略です。
2. 画像の遅延読み込み（Lazy Load）: 画面に表示されていない重い画像を、必要になるまで読み込まない戦略です。

結果は劇的でした。スマホのLCP（主要コンテンツの表示時間）は7.6秒から1.4秒へと大幅に短縮。しかし、その代償としてデスクトップで新たな問題、CLS（レイアウトのズレ）が発生してしまいました。

CLS改善の最終兵器。「画像の寸法指定」というたった1つのスイッチ

CLS 改善の鍵は、遅延読み込みされる画像の「場所」をあらかじめ確保することにありました。プラグイン設定の奥深くにあった**「不足している画像の寸法を追加（Add Missing Image Dimensions）」**というスイッチ。これをオンにするだけで、ブラウザは画像読み込み前から正確なスペースを確保できるようになります。

結果、スマホとデスクトップ両方でCLSスコアはほぼゼロになり、完璧な走行安定性を手に入れました。

最後の仕上げ。世界中にコンテンツを届ける「CDN」の効果

国内コースを制覇し、次なる一手はグローバル対応です。ここでCDN 効果が発揮されます。CDNは、世界中に設置されたサーバー網にあなたのサイトのコピーを配置する技術です。

メリット: ユーザーは物理的に最も近いサーバーからコンテンツを受け取るため、サーバー 応答時間が劇的に短縮され、世界中どこからでも高速なアクセスが可能になります。

LiteSpeed Cacheに統合されているQUIC.cloudのCDNを有効化し、インフラはついに完成しました。

チューニング結果：最終スペックシート

以上の最適化を経て、私のサイトが叩き出した最終スコアです。

重要なのはサーバーの馬力だけではありません。その性能をあらゆる環境で引き出す緻密なチューニングこそが、PageSpeed Insightsを制する鍵なのです。