webmobile 編集部
関連タグ:

WordPressをエックスサーバーで高速化しよう!

  • はてなブックマーク 2
  • facebook 0
  • twitter

エックスサーバーをご検討中でしょうか?

エックスサーバーは、Webサイトやブログを複数運営している個人や企業、ブロガー・アフィリエイター、WordPressユーザーから人気を得ている初心者でも使いやすい安心安全・高速・多機能なレンタルサーバーです。

私自身、エックスサーバーを長年利用し複数のWebサイトを運営しておりますが、普段から「おすすめのレンタルサーバーは何?」と聞かれたら必ずエックスサーバーと答えています。

webサイトの高速化はSEO対策のひとつですが、エックスサーバーには、WordPressで作ったwebサイトの高速化を図る機能がたくさん備わっています。

  • SSD RAID10構成
  • nginx
  • FastCGI
  • HTTP/2
  • 20コアCPU&192GBメモリ
  • 総計722Gbpsバックボーン
  • mod_pagespeed

当記事では、「mod_pagespeed設定」について、実際に自分の運営サイト・ブログで試してみたので、計測した数値を公開したいと思います。

エックスサーバーの導入、webサイトの高速化の参考になれば幸いです。

スポンサーリンク

mod_pagespeedとは

mod_pagespeedは、Googleにより開発されたWebサイトの表示速度(検索クロールのページ読込速度)を向上させるための拡張モジュールで、画像・キャッシュ・JS/CSSなどの最適化処理が行われ、サーバーとクライアント間の無駄な通信を削減し、Webサイトの表示速度をより高速化(検索クロールのページ読込高速化)することができます。
速度改善だけではなく、転送量(70GB/日)も抑える事ができます

日本の検索エンジン対策は、主にGoogleに対応すればいいので、Googleが開発した mod_pagespeedは、相性よく効果を出してくれるのでは思います。

Webサイト表示速度計測サイト GTmetrix

Webサイト表示速度計測サイトとして「GTmetrix」というWebサービスを利用します。
ブログ表示高速化などで、数多くのブロガーさんが計測に利用されております。
GTmetrix

Page Speed Grade は、Googleによるページ表示パフォーマンスのサイト評価
CYSlow Grade は、Yahooによるページ表示パフォーマンスのサイト評価

それぞれ評価する推奨ポイントに違いがあるようですが、数値が高ければ高いほど、ページ表示速度が速いと判断されます。

Page load time は、入力したURLのサイトをロードするのにかかったトータルの時間が表示されます。回線状況に影響を受け不安定なので繰り返し計測が必要。
Total page size は、サイトをブラウザが表示するのにダウンロードした画像やHTMLデータなど全ての合計値。
Total number of requests は、ブラウザとサーバーのやり取りの回数。

Webサイトの表示速度向上に導入していうるWordPressのプラグイン

私の運営するサイトやブログは全てWordPressを利用しており、高速化に対しプラグインを導入しております。

WordPressを高速化するプラグインは、「WP Super Cache」「DB Cache Reloaded Fix」「Quick Cache」「W3 Total Cache」が代表的ですが、私の運営サイトで大きく効果があったのは「W3 Total Cache」でした。
元々Webサイトの高速表示に定評のあるエックスサーバーを更に「W3 Total Cache」で高速化しております。
W3 Total Cache

EWWW Image Optimizerは、アップしている画像を画質を劣化させずに圧縮して表示するプラグインです。画像のデータ容量を減らす処理をして、サイト表示を速くする事ができます。
EWWW Image Optimizer

これらのプラグインと今回エックスサーバーが提供をはじめた「mod_pagespeed設定」機能を合わせたサイト表示の効果をご紹介します。

エックスサーバーのサーバーパネルから「mod_pagespeed設定」のオンオフ

speed00

mod_pagespeed設定」は、エックスサーバーのサーバーパネルよりオンオフの設定ができます。左下の対象ドメインを選択し、”ホームページ”の項に「mod_pagespeed設定」とあるので、クリックします。

speed00-01

簡単簡単、”mod_pagespeed設定”でオンにするだけです。

オンにしない理由が無い?!

フリーランスWebデザイナーの仕事のmod_pagespeed設定をオンに!

さて、当ブログを計測してみました。
webmobile

W3 Total Cache オフ × mod_pagespeed設定 オフ

speed01

「W3 Total Cache オフ × mod_pagespeed設定 オフ」の場合、そこまでランクは高くないです(汗)ページ表示スピードは、6.50秒です。

W3 Total Cache オフ × mod_pagespeed設定 オン

700x394xspeed031.jpg.pagespeed.ic.avx6FPiUqh

「W3 Total Cache オフ × mod_pagespeed設定 オン」にすると、ランクが大幅アップ!
ページ表示スピードが約1.40秒高速になりました!

W3 Total Cache オン × mod_pagespeed設定 オフ

speed03

「W3 Total Cache オン × mod_pagespeed設定 オフ」にすると、「W3 Total Cache オフ × mod_pagespeed設定 オン」の状態と同じランクが付きましたが、ページ表示スピードが随分遅くなりました…なんで?

W3 Total Cache オン × mod_pagespeed設定 オン

speed04

では、「mod_pagespeed設定 オン × W3 Total Cache オン」にしてみると…

Page Speed Grade・CYSlow Grade共に上昇!
ページ表示スピードは、倍増の4.24秒となりました。

Page load time(ページ表示時間)は、計測した時間帯のネット回線スピード状態やアクセス状況により変動するのであまり参考にはならないのですが、ランクの結果からして速くなった事は間違いないと思います!

この結果、「mod_pagespeed設定」があれば、別に「W3 Total Cache」プラグインを使わなくてもかなり速いって事が計測できましたw
しかし、もう少し計測を繰り返し、「W3 Total Cache」プラグインを外すか外さないか検討したいと思います。

コワーキングスペースレポートマガジンのmod_pagespeed設定をオンに!

他の運営サイトも計測してみましょう!

私が出張時に利用しているコワーキングスペースの情報サイトの高速化を計測。

700x394xspeed03.jpg.pagespeed.ic.XRqk4ue9Wn

「W3 Total Cache」プラグイン無しで、”mod_pagespeed設定”をオンに↓

700x394xspeed04.jpg.pagespeed.ic.Sk4bprqDZM

すると、Page Speed GradeとCYSlow Grade共に、1ランクアップになり、ページ表示スピードが約2秒縮まりましたw

日本全国フリーランスWebデザイナーHP集のmod_pagespeed設定をオンに!

フリーランスWebデザイナーを都道府県別に検索できるサイトを高速化!
日本全国フリーランスWebデザイナーHP集

speed05

「W3 Total Cache」プラグイン無しで、”mod_pagespeed設定”をオンに↓

speed06

すると、Page Speed GradeとCYSlow Grade共に、1ランクアップになり、ページ表示スピードが約3秒縮まりましたw

「mod_pagespeed設定」は高速化に大きく貢献!

いかがでしょうか?

エックスサーバーが新しく追加した「国内初!Webサイトのコンテンツを最適化し、表示速度を向上させる「mod_pagespeed設定」機能」、長いニュースタイトルの通り、かなりWebサイトの高速化実現に貢献できる機能です!

mod_pagespeedという高速化機能が使えるのは、日本ではエックスサーバーだけ!

エックスサーバーをご利用中の方は、ぜひ「mod_pagespeed設定」機能を試してみて下さい!

また、エックスサーバーは、これからWordPressを使ってWebサイトの複数運営やブログを立ち上げたいと考えている方々におすすめのレンタルサーバーです。
是非試してみて下さい♪

エックスサーバーについては下記で解説しています♪
初心者でも簡単!エックスサーバーでWordPressをインストールする方法

wpXレンタルサーバーについては下記で解説しています♪
wpXというWordPress専用レンタルサーバーに移転したよ

ロリ○ップやミニ○ードなど安過ぎるレンタルサーバーでWordPressを使っている人で、そこそこアクセスが増えてきたら「データが消えない」「接続が落ちない」安全・安定・高速のエックスサーバーに移転するのも更なるアクセスアップに効果的と思います。

修正してアップしたCSSが反映しない場合の対処法

運営サイトのCSSを編集してFTP経由でアップしたところ、新しいCSSが反映されない!?困りました。W3 Total Cacheを正しく消してもCSSが反映されない!

mod_pagespeed設定を一旦オフにして運営サイトをリロードすれば新しいCSSが反映されました。しかし、再びオンにするとCSSのキャッシュが残っているせいか反映されない(汗)

CSSを更新する時は、mod_pagespeed設定を一旦オフにしましょう。

そして、なかなかオンにしても新しく編集したCSSが反映されない場合は、CSSの読み込みタグを下記のように書き換えてみましょう。

<link rel="stylesheet" href="https://example.jp/wp-content/themes/wp_example/style.css?v=2014.01.01" type="text/css"/>

CSSファイルの後に「?v=2014.01.01」とか「?v=01.01」とか、更新日やバージョン数を入力すれば、すぐ反映されます。
CSSのファイル名を変更する必要はありません。CSSを変更したらHTMLの上記タグも変更しましょう。

後、mod_pagespeedとW3 total cacheの併用の事をエックスサーバーに問合せてみたのですが、「mod_pagespeedの要件をW3 total cacheが包含しているため、W3 total cacheを利用する場合、mod_pagespeed設定をご利用されないことをお勧めいたしますので、こちらもあわせてご覧いただけましたら幸いです。」との事です。W3 total cacheの方が重そうなので当方はW3 total cacheを削除しましたw

関連記事



運営者(登場人物)は、スマホ・ガジェットが大好きな実在する親子です♪

使い方・レビュー記事のアイテムは実際に買って長く使ってます♪

運営者情報&webライター募集中

気になる記事を検索

webmobile TOP