Web、モバイル(スマホ・格安SIM)、ソーシャルメディア活用術、フリーランスの働き方などを綴ります!

レンタルサーバーの速度向上!エックスサーバーのWordPress表示速度高速化!

18,438 view
更新日:2016年09月02日 投稿日 : 2014年11月17日
  • はてなブックマーク
  • facebook
  • twitter

エックスサーバーはご存じでしょうか?

2016年10月31日まで『独自ドメインプレゼントキャンペーン』中。更新費も無料。
全サーバープランで独自SSL無料・無制限で利用可能に!
月額1,000円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

エックスサーバーは、サーバーひとつで複数のドメインを設定でき、それぞれでWordPressサイトを開設できます。
高いPHP処理能力や高転送量(70GB/日)によるサイトの高速表示やサーバー接続の安定は、自分にもユーザーにも快適な閲覧環境を作れる他、SEOにも効果を発揮します。
また、データのバックアップ・セキュリティ対策・サポート体制に力を入れているレンタルサーバーなので、WordPressの管理画面やサイトが「遅い」「落ちる」「エラー」が起こる格安レンサバをご利用中の方に、サーバー移転(乗り換え)を声を大にして薦めたいコストパフォーマンスに優れたレンタルサーバーです。

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

当ブログは、167記事時点で月間86万PVを超えておりますが、高速化(検索クロールのページ読込高速化)などエックスサーバーのお蔭の要素もあると思います。

そのエックスサーバーから、2014年11月17日に魅力的な機能追加のお知らせがありました。

国内初!Webサイトのコンテンツを最適化し、表示速度(検索クロールのページ読込速度)を向上させる「mod_pagespeed設定」機能追加のお知らせ」との事。

私自身、エックスサーバーを利用し、複数のWebサイトを運営しており、普段から快適感を抱き、「おすすめのレンタルサーバーは何?」と聞かれたら必ずエックスサーバーを推しているのですが、今回更なる表示速度向上の技術に成功し、サービス提供を始められました。凄い!

Webサイトの表示速度(検索クロールのページ読込速度)は、検索エンジン対策(SEO)にも重要な要素となっているので、注視している人も多いと思います。

この新しい「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設定をオンに!

さて、当ブログを計測してみました。
フリーランスWebデザイナーの仕事

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という高速化機能が使えるのは、日本ではエックスサーバーだけ!

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

また、エックスサーバーは、これからWordPressを使ってWebサイトの複数運営やブログを立ち上げたいと考えている方々におすすめのレンタルサーバーです。
是非試してみて下さい♪
月額1,000円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

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

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

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

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

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

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

<link rel="stylesheet" href="http://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

当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

  • はてなブックマーク
  • facebook
  • twitter
18,438 view 2014年11月17日

webdesignerwork 著者

フリーランスWebデザイナーとして活動をはじめて18年。全国の私を必要としてくれる方々からWordPressでのWeb制作のご依頼を頂いております。

各地のコワーキングスペースやWordPressの勉強会(WordBench/WordCamp)などに顔を出し、様々な人達とご縁をいただき刺激を受け、学んだこと感じたことを、日々のお仕事や自社メディアへの開発・配信にと繋げております。妻、子、プードル2匹と里山暮らし。

当ブログで公開されているテキスト、画像、イラストなどに関する権利は、当方に帰属します。
著作者の許諾を得ることなく複製、改変、転載、販売、出版など著作権法そのほか法律に触れる行為は禁止されております。

運営者情報

© 2004 webdesignwork ALL COPYRIGHTS RESERVED.