ワードプレス(WordPress)エックスサーバー

【WordPressサイト爆速化】ロリポップからエックスサーバーへの移転+3つのチューニングで表示スコアが40点以下→88点に劇的向上しました

この記事は約5分で読めます。

WordPressの表示高速化に3つのチューニング「WordPressサイトが重くて、管理画面すらもっさりしている…」「サーバーを乗り換えたのに、PageSpeed Insightsのスコアが思うように伸びない…」これらはWeb担当者なら誰もが一度は頭を抱える「サイトの表示速度」問題です。
今回は、画像などのリッチコンテンツを多く扱うメディアサイトにて、サーバー移転と内部チューニングを組み合わせることで、劇的な高速化に成功した事例を共有します。結論から言うと、体感速度が遅かった旧サーバー時代(推定スコア40点以下)から、最終的にモバイルスコア88点まで改善しました。
ユーザーの体感速度に直結するLCP(最大視覚コンテンツの表示時間)は、2.9秒という「爆速」領域に到達しました。
どのような手順でここまでの改善を実現したのか、その全記録を公開します。

WordPressを高速化した対策を公開します

序章:ロリポップでは限界だった(推定スコア40点以下)

WEBサイトの表示高速化対策

もともと対象サイトは「ロリポップ!」のサーバーで運用していました。長年の運用で記事数も増加し約3000件になり、アクセス数も月間10万pv以上に達しました。
しかし、アクセス数の増加やコンテンツのリッチ化に伴い、以下のような課題に直面していました。

  • とにかく表示が遅い: スマホでページを開いても、画像がパラパラ…と時間をかけて表示される状態。

  • 管理画面が重い: 記事の更新作業すらストレスを感じるレベル。

当時のPageSpeed Insightsのデータは残っていませんが、体感速度や当時の重さから推測すると、モバイルスコアは間違いなく40点以下(赤点のどん底) だったと思われます。

そこでまず決断したのが、「エックスサーバー」への移転でした。

▼エックスサーバーの表示高速化機能について

Xアクセラレータ Ver.2 | レンタルサーバーならエックスサーバー
PHP最大20倍(WordPress最大10倍)を実現。「速さ」と「安定」を追求し続けるエックスサーバーだけが提供する高速・安定化機能「Xアクセラレータ Ver.2」についてご案内しています。

第1章:サーバー移転で「体感速度」は倍速に!しかし…

WEBサイトの表示高速化対策

ロリポップからエックスサーバー(スタンダードプラン)へ移転した直後、劇的な変化が起きました。

  • 表示速度が体感で2倍に: クリックした瞬間の反応が明らかに速くなりました。

  • 管理画面がサクサクに: 更新作業のストレスが激減しました。

「これで高速化は完了か?」と思われましたが、改めてGoogleのPageSpeed Insightsで計測してみると、現実は甘くありませんでした。

▼ サーバー移転直後のスコア(無対策)

  • モバイル総合スコア:57点(まだ「低速」判定)

  • FCP (最初の表示時間):7.6秒

  • LCP (表示完了時間):16.1秒

ページスピードインサイトの結果

サーバーの基礎体力は上がりましたが、Googleの評価は依然として厳しいままでした。

原因はサーバーの性能ではなく、「コンテンツそのものの重さ(画像サイズ)」や「読み込みの仕組み(レンダリングブロック)」にあったのです。

ここから、スコアを合格ラインに乗せるための「3つのチューニング」を実行しました。

施策①:画像の「WebP化」で容量60%削減

WEBサイトの表示高速化対策

最初に取り組んだのは、最も容量を食っていた「画像」の軽量化です。次世代フォーマットである「WebP(ウェッピー)」への変換を実施しました。

WordPressの画像表示を高速化するために画像圧縮プラグイン「EWWW Image Optimizer」を導入しました
「最近、サイトの表示が重たい気がする…」そんな悩みはありませんか?記事が増えるにつれて画像も蓄積し、どうしても読み込みが遅くなってしまいがちです。そこで今回は、画像を「WebP」という最新形式に変換し、ファイルサイズをギュッと縮小してサイトを高速化する作戦を実行しました。難しい作業はプラグインにお任せ。WordPressを使って既存の大量画像を​​一気に軽くする手順と、途中で直面した「画像が消える...

【実施したこと】

  • プラグイン「EWWW Image Optimizer」の導入

  • .htaccess を調整し、ブラウザに応じて自動でWebPを配信する設定を追加

  • 過去の画像も含めて一括最適化を実行

【結果】

効果はてきめんでした。記事内の主要画像のファイルサイズが軒並み 約60%削減 されました。

  • メイン画像: 116KB → 46KB

  • 工程画像: 115KB → 43KB

物理的な転送量が半分以下になり、身軽なサイトへと変貌しました。

施策②:サーバー機能でCSS/JSを「遅延読み込み」

WEBサイトの表示高速化対策

次に解消したのは「画面が真っ白な時間」です。

画像は軽くなりましたが、ページの頭で読み込まれる大量のCSSとJavaScriptが邪魔をして、画面描画が始まるまでに時間がかかっていました。

ここで役立ったのが、エックスサーバー独自の高速化機能です。

【実施したこと】

  • サーバーパネルで「XPageSpeed設定」を有効化

  • 特に 「CSS遅延読み込み」「JavaScript遅延読み込み」 をONに設定

XPageSpeed | レンタルサーバーならエックスサーバー
Webサイト表示におけるSEO(検索エンジン最適化)機能「XPageSpeed」についてご案内しています。

【結果】

これにより、画面描画をブロックしていた「詰まり」が解消されました。LCP(表示完了時間)は、当初の16.1秒から 3.8秒 まで一気に短縮!
この時点でスコアは 66点 まで上昇しました。

施策③:重たい広告スクリプトを「後回し」にする

広告表示を遅延するプラグイン

あと一歩、合格ラインに届きません。

ボトルネックになっていたのは、Google AdSenseなどの 「外部スクリプト(広告)」 でした。これらがスマホのCPU処理を占有し、操作可能になるまでの時間を悪化させていました。
※当サイトはアドセンスで広告を表示しておりそのことがサイト表示の高速化の弊害になっていました

【実施したこと】

  • プラグイン「Flying Scripts」の導入

  • AdSense等の重いスクリプトをキーワード指定

  • 「ユーザーが操作しないと読み込まない」設定を追加

Flying Scriptsというプラグインを使い、広告表示を止めたらWEBサイトの表示が早くなりました
Webサイトの表示速度改善、皆さん苦戦していませんか?特に「PageSpeed Insights」のモバイルスコアは、少し改善したと思ってもなかなか合格ラインに届かず、頭を抱える担当者も多いはずです。今回は、当サイトが直面していた「スコア50〜60点の壁」を突破するために行った「Flying Scripts」プラグインを活用した大胆な施策について紹介します。

▼実際の設定画面Flying Scripts settings

adsbygoogle
pagead2.googlesyndication.com
googleads.g.doubleclick.net

この3つのキーワードを含むスクリプトはユーザーが画面になんらかの操作をしないと動かない(Never)、という設定です。つまり、ページを閲覧しているユーザーがスクロールしたり画面をタップしない限り広告表示されません。
この設定はユーザー体験をよくすると同時にサイト表示の高速化にも役立ちました。

【結果】

これが最後の決定打となりました。
CPUの負荷を示す指標(TBT)が 560ms → 190ms へと激減し、スコアが一気に跳ね上がりました。

最終結果:ロリポップ時代からの劇的ビフォーアフター

サーバー移転と3つの施策を終えた、最終的な変化がこちらです。

項目 ロリポップ時代 (推定) エックスサーバー移転直後 最終結果 (チューニング後)
モバイルスコア 40点以下 57点 88点
体感速度 もっさり サクサク 爆速
LCP (表示完了) 計測不能 16.1秒 2.9秒

改善のポイント(3つのチューニング)

  1. 土台作り: ロリポップからエックスサーバーへの移転で、基礎的な応答速度を底上げ。

  2. ダイエット: 画像のWebP化で、通信量を大幅削減。

  3. 交通整理: CSS/JSと広告の遅延読み込みで、スムーズな描画を実現。

「サーバーを変えたのにスコアが上がらない」とお悩みの方は、サーバーの性能を活かしきれていない可能性があります。

今回ご紹介した「WebP化」や「読み込み遅延」を組み合わせることで、今のサーバーのまま、劇的な改善が見込めるかもしれません。ぜひお試しください。