本サイトはアフィリエイト広告を利用しております

PageSpeed Insightsスコア60→99!WordPress高速化でやったこと

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サイトに載せるには重すぎます。

そこで以下の処理を行いました。

  1. カット編集: 動画編集ソフトで「必要なシーンだけ」の10秒程度に短縮。
  2. 強力な圧縮: 圧縮ツールを使って、画質を保ちつつ3MB以下まで軽量化。
  3. 音声の削除: 背景動画に要らない音声はカット。

これで、サイトの読み込みデータ量がかなり減りました。

対策③:スマホユーザーへの配慮

動画を軽くしても、スマホ(4G回線)にとってはまだ重荷になることがあります。

そこで、コードを書き換えて一工夫しました。

対策④:画像の徹底的なリサイズ

最後に、基本中の基本である画像処理です。

PC用の巨大な画像(横幅2000px超えなど)を、そのままスマホで表示させると、読み込み時間が長くなります。

私はすべての画像を「表示サイズに合わせてリサイズ」し、無駄なピクセルを削ぎ落としました。

これをやるだけで表示速度の体感はかなり変わります。

結果:オールグリーンの爆速サイトへ

これらの対策(エラー修正・動画圧縮・スマホ最適化・画像リサイズ)を終えて、再計測した結果です。

パフォーマンススコア:99点

すべての項目が緑の評価になりました。

ちなみに、素材の最適化とは別に、サーバー側も表示の速さにかかわります。

ページの読み込みが遅くなる原因の一つに、サーバーの応答時間の遅さがあると、Googleの解説にも書かれています。

シンレンタルサーバーはPHPの高速化機能を搭載していて、独自ドメインも永久無料です。

WordPressだけを動かすなら、WordPress専用のサーバーもあります。

wpX Speedは、WordPress専用のクラウド型レンタルサーバーです。

料金は使った時間でかかり、一番小さいW1プランは1時間2.2円、月の上限は1,320円です(税込)。

アクセスが急に増えたときに、上のプランへ自動で切り替える機能もあります。

wpX Speedの料金とプランを見る

いまのサーバーの表示速度が気になっている方は、一度チェックしてみてください。

まとめ:WordPress高速化の極意

今回の改善で確信したのは、「高速化の鍵は、プラグインを入れる前にある」ということです。

  1. 動画や画像はアップロード前に「物理的に」小さくする。
  2. 見えないエラー(404など)を放置しない。
  3. スマホユーザーに無駄な通信をさせない設計にする。

制作中のサイトでは、これで60点が99点になりました。

「表示が遅い」と悩んでいる方は、まずは素材(動画・画像)の最適化から始めてみてください。

以上、PageSpeed Insightsのスコアを60点から99点にした、WordPress高速化の記録でした。

制作会社さまへ:デザインカンプからのコーディングをお受けしています。YUCREA(yucrea.com)

ホームページを1つ、無料で見ます。
LINEにURLを送ると、直すと良いところを3つ、3日以内にお返しします。
営業はしません。

関連記事

最近の投稿