PageSpeed Insightsスコア60→99！WordPress高速化でやったこと
こんにちは、ゆきしょうです。
「せっかく作ったWebサイトの表示が遅い」「PageSpeed Insightsで計測したら、赤色のスコアが出た」と困っていませんか。
WordPressでサイト運営をしていると、必ずぶつかるのがこの「サイトのスピード問題」です。
私も先日、制作中のサイトを計測して驚きました。
スコアは60点でした。
そこから改善して、最終的には「パフォーマンス99点」「ユーザー補助・ベストプラクティス満点」になりました。
今回は、私が実際に直面したトラブルと、60点のサイトを99点に変えた具体的な修正ステップを公開します。
プラグインに頼りすぎない、本質的な改善記録です。
現状の把握：なぜこんなに遅いのか？
まずは、改善前の状態をご覧ください。
- パフォーマンス： 60点（赤点）
- FCP（最初の表示）： 6.6秒
- LCP（メインコンテンツ表示）： 8.0秒
診断ツール「PageSpeed Insights」からは、「レンダリングを妨げるリソースを除外してください」「画像サイズを適切にしてください」と警告がいくつも出ていました。
特に、トップページに配置した「背景動画（25MB）」が重く、これがいちばんの原因でした。
対策①：意外な盲点！「迷子ファイル」の撲滅
まず最初に行ったのは、コンソールエラーの修正です。
これ、意外と見落としがちなんです。
404エラー（迷子ファイル）の削除
ブラウザの「検証ツール（コンソール）」を見ると、存在しないCSSファイルや動画ファイルを読み込もうとしてエラーが出ていました。
ブラウザが「ないものを探す時間」は無駄でしかありません。
これらの記述をコードから削除したり、正しいパスに直したりしました。
これだけで読み込みの"つっかえ"が取れて、裏側の処理がスムーズになります。
対策②：動画ファイルの最適化
次に着手したのが、最も容量を食っていた動画ファイルの最適化です。
ここがスコアアップの肝でした。
25MBを3MB以下に圧縮
25MBもあった背景動画は、Webサイトに載せるには重すぎます。
そこで以下の処理を行いました。
- カット編集： 動画編集ソフトで「必要なシーンだけ」の10秒程度に短縮。
- 強力な圧縮： 圧縮ツールを使って、画質を保ちつつ3MB以下まで軽量化。
- 音声の削除： 背景動画に不要な音声データはカット。
これで、サイトの読み込みデータ量がかなり減りました。
対策③：スマホユーザーへの配慮
動画を軽くしても、スマホ（4G回線）にとってはまだ重荷になることがあります。
そこで、コードを書き換えて一工夫しました。
対策④：画像の徹底的なリサイズ
最後に、基本中の基本である画像処理です。
PC用の巨大な画像（横幅2000px超えなど）を、そのままスマホで表示させていませんか？
私はすべての画像を「表示サイズに合わせてリサイズ」し、無駄なピクセルを削ぎ落としました。
これをやるだけで表示速度の体感はかなり変わります。
結果：オールグリーンの爆速サイトへ
これらの対策（エラー修正・動画圧縮・スマホ最適化・画像リサイズ）を終えて、再計測した結果です。
パフォーマンススコア：99点
すべての項目が緑の評価になりました。
ちなみに、素材の最適化と合わせてもう一つ効くのがサーバー側の見直しです。
画像や動画をどれだけ軽くしても、サーバーの応答自体が遅いと頭打ちになります。
シンレンタルサーバーはPHPの高速化機能を搭載していて、独自ドメインも永久無料です。
いまのサーバーの表示速度が気になっている方は、一度チェックしてみてください。
まとめ：WordPress高速化の極意
今回の改善で確信したのは、「高速化の鍵は、プラグインを入れる前にある」ということです。
- 動画や画像はアップロード前に「物理的に」小さくする。
- 見えないエラー（404など）を放置しない。
- スマホユーザーに無駄な通信をさせない設計にする。
制作中のサイトでは、これで60点が99点になりました。
「表示が遅い」と悩んでいる方は、まずは素材（動画・画像）の最適化から始めてみてください。
【Webアニメーション】の「調べる地獄」から解放！現役プロが教えるコーディング効率化の決定版マニュアル！2025年12月4日