WordPressを高速化!格安サーバでもスコアアップできる5つの大改善策【詳細版】

WordPressを使っていると、どうしてもアクセスした時に遅いなと感じることがあると思います。コンテンツをデータベースからSQLで引張って来て、コンテンツ生成もPHPが都度動いているので、静的HTMLやMovableTypeと比較するとどうしても遅くなりがちです。

それでも、動的にコンテンツ生成できてカスタマイズが自由自在なWordPressを使いたい人は多いと思います。そこで、WordPressを劇的とまではいかずとも、最大限に速くするための改善策を試してみたので、ご紹介したいと思います。

特に、ロリポップやさくらレンタルサーバのように、ワンコインで借りられる格安レンタルサーバを使ってWordPressを動かしている方には役立つ内容になっています。

ちなみに当ブログでは元々ロリポップで運営していたのですが、リニューアルに伴い現在はXServerを使っています。

ロリポップ時代に培ったノウハウを公開したく、今回の記事を書きました。

現時点でのサイトパフォーマンスを測る

改善を図ると言っても、定量的な指標がなければ本当に改善されたのかどうか分かりません。基本的にはWebサイトの表示速度を速くするのが目的なので、アクセスして表示し終わるまでの時間を計るだけでも良いのですが、ここでは便利なツールがあるので利用したいと思います。

Googleが提供しているDevelopersツールで、PageSpeed Insightsというのがあります。これは、入力したサイトの表示速度や問題点、改善方法を提案してくれるGoogleのサービスです。100点満点で表示されますので、ここでの結果を改善の指標にしたいと思います。

Google PageSpeed Insightsキャプチャ

で、時機到来(jikitourai.net)を計測した結果がこちらです。

Google PageSpeed Insightsキャプチャ2

Google PageSpeed Insightsキャプチャ4

モバイル:46点、パソコン:59点と、散々な結果が出てしまいましたorz

モバイル・パソコンともに落第点並の速度です。GoogleWebコンテンツ開発者のPaul Lewis氏の話によれば、PageSpeed Insightsでのスコアは、大体目安として、

  • モバイル : 85点以上
  • パソコン : 90点以上
  • ユーザーエクスペリエンス : 100点

が望ましいそうです。

PageSpeed Insightsの点数目標の設定

ユーザーエクスペリエンスは96点と、100点にかなり近いスコアを出せているので良いですが、速度に関しては大幅な改善が必要な状況です。ただ、国内のサイトやブログを見ていると、指標となるスコアをクリアしているところはあまりありませんでした。

色々なブログを計測してみた結果、目安としてはモバイル:60点、パソコン:70点が一つの基準になりそうです。これが、平均値としてクリアしておかなければいけない壁だと、私は考えます。これをクリアするべく、改善を試みていきます。

Google PageSpeed Insightsからの指摘事項

修正が必要と言われたのが4点。

  • ブラウザのキャッシュを活用する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  • サーバーの応答時間を短縮する
  • 圧縮を有効にする

3つめはロリポップなどのワンコインレンタルサーバでは難しいのですが(汗)、頑張っていきたいと思います!




改善効果が大きい「画像の最適化」

まず手を付けたのは画像の最適化です。一般的に、Webページを構成するデータのうち、平均63%が画像ファイルだと言われています。実際に(旧)時機到来のTOPページでも、下記のように圧縮によって198KBも削減できるとの指摘をPageSpeed Insightsから受けています。

Google PageSpeed Insightsの画像最適化の指摘

また圧縮だけでなく、CDN(Contents Delivery Network)を使うことによっても、画像の表示スピードを上げることが可能です。この2点で対応したいと思います。

『EWWW Image Optimizer』を使う

Simplicityの作者でもあるわいひらさんのブログでも紹介されているWordPressプラグイン『EWWW Image Optimizer』を利用して、既にアップロードされている画像の最適化を行いたいと思います。

参考記事 画像を最適化(ロスレス圧縮)してWordPressブログを高速化する方法 | 寝ログ

EWWW Image Optimizerの設定

「設定」→「EWWW Image Optimizer」から設定画面を表示させます。デフォルトではありますが、「Basic Settings」のタブになっているかを確認し、その中の項目である「Remove metadata」にチェックを入れます。

EWWW Image Optimizer設定画面

これによって、画像に付加されているExif情報などが除去されることになります。細かい小さなデータではありますが、特に付加しておく必要もないので、除去しちゃいましょう。

他にも詳細な設定をすることが可能ですが、今回は上記以外はデフォルトの設定で動作させることとします。ちなみに、EWWW Image Optimizer導入後はデフォルトで自動圧縮されるようになるので、自動圧縮に関しては特に設定する必要はありません。

EWWW Image Optimizerで一括圧縮

それでは、今までアップロードされている画像類を一括で圧縮する作業を行います。

メディアの画像を一括で圧縮するには「メディア」→「Bulk Optimize」に移動します

EWWW Image Optimizer実行画面

Start optimizingボタンを押すと、画像の最適化が始まります。

EWWW Image Optimizerによる画像最適化

ここでの処理時間は、アップロードしていた画像の数に比例しますので、最適化が終わるまではゆっくり待つことにします。最適化の処理にサーバはリソースを使っていますので、ヘタに他の作業とかはしない方が良いです。

現在までに290画像をアップロードしていたようですが、WordPressでは同時に設定していたサイズのサムネイルを作ります。そのため、合計で2252ファイルの画像を最適化したようです。

290 images in the Media Library have been selected (290 unoptimized), with 2252 resizes (2252 unoptimized).

途中放置していたので正確な時間は計っていませんが、だいたい1時間くらい掛かりました。全てのステータスバーが進捗したら、メディアライブラリーの最適化は完了です。

JetpackのCDN機能を有効化

次に、JetpackのCDN機能の利用を始めることにします。

CDNとは、コンテンツデリバリネットワークの略で、画像やなどのファイルサイズの大きいデジタルコンテンツを、自分のサイトとは別のサーバから配信するための仕組みです。画像はCDNから呼び出して、HTMLはサイトのサーバーから呼び出すというように、呼び出し先を分けることで負荷を分散して表示速度改善を図ります。

Jetpack by WordPress.comというプラグインでは、数多くの機能を備えていますが、そのうちの一つ「Photon」を利用します。

Jetpack by WordPress.comキャプチャ

有効化はとっても簡単で、「Jetpack by WordPress.com」をインストールして、WordPress.comのアカウントで認証をします。(アカウントは簡単に取得できます)そうすると、『Jetpack』というメニューが管理画面に現れますので、そちらをクリック。

その中で機能の一覧が現れますので、左上にある『Photon』の有効化ボタンを押すだけです。

※『Photon』を使うと、一部アフィリエイトタグなどで正常に画像が表示されないことを確認しました。そのような場合には、「Photon』の機能を無効にしてみてください。もしかしたら、『Photon』ではなく『CloudFlare』なら上手くいくのかもしれませんが、まだ試していないので、分かり次第追記します。

おまけ:楽天モーションウィジェットを外す

ここまでやって、モバイルのスコアは46→52、59→62とアップしたものの、画像の圧縮量がいまいち少ない。198KB削減できると当初言われましたが、まだ114.2KB削減できると言われています。

何が指摘されているのか見てみると、楽天モーションウィジェットでしたorz

画像最適化の注意

モバイルだけ外すというのも手でしたが、パソコンの方でも指摘されていたので、ここはユーザーエクスペリエンスの方がまずは大事!ということで、ウィジェットそのものを外すことにしました。楽天モーションウィジェットは割とアフィリエイトの中では効果がある印象があったのですが、画像をいくつも読み込んでいるせいか重かったようです。

画像最適化の結果

結果は上々、モバイルのスコアは46→54へ、パソコンは59→67と両方とも大きく改善しました。ついでにモバイルの方は、「画像圧縮を有効にする修正をしなさい」というのが消えました。パソコンの方は、アイコンが赤くなってましたがこちらは黄色に変わりました。

Google PageSpeed Insightsキャプチャ5

Google PageSpeed Insightsキャプチャ6




.htaccessの設定を変更する

ブラウザのキャッシュを活用する

次にブラウザのキャッシュの活用をするための対応をしたいと思います。ここでも、Simplicity作者のわいひらさんのブログで紹介されている方法を参考にしました。

参考記事 ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法 | 寝ログ

Apacheを使っている環境では、Webサーバの動作を.htaccessというファイルで定義することができます。今回はそのファイルを修正することで、ファイル種別毎にキャッシュする有効期限を設定したいと思います。

ファイル種別毎に設定しますので、下記の記述を追加することとします。

ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

コンテンツの圧縮を有効にする

また、テキスト情報を含めて読み込まれるファイルを圧縮する設定も追加で入れることにします。Apacheのmod_deflateというモジュールを使って、コンテンツ圧縮をする設定になります。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

WordPressを使っていて、且つパーマリンクの設定をいじっていると、Apacheのmod_rewriteというモジュールを動かすことになります。そのため、特に設定したつもりはない場合でも、mod_rewriteの記述が入っているはずです。

そこの記述を変えてしまうと、パーマリンクが想定通りに動かずにヘタするとサイトが表示されないことになりますので、それは決していじらずに上記の記述を追加します。

.htaccessの記述内容まとめ

当サイトではこんな感じになりました。上記に加えてメディア定義も追加しています。そのまま.htaccessに追記しても使えるので、ご参考までに。(# BEGIN WordPress~# END WordPressはそのままにした方がよいので、記述からは抜いてあります)

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

#ブラウザキャッシュの設定
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

#フォント
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

#圧縮の設定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

#フォント圧縮
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ブラウザキャッシュとコンテンツ圧縮を有効にした結果

ブラウザキャッシュを有効化した結果も上々で、モバイルのスコアは54→62、パソコンは67→76まで伸びました。

Google PageSpeed Insightsキャプチャ7

Google PageSpeed Insightsキャプチャ8

JavaScript/CSSの最適化

続いて、JavaScriptとCSSファイルの最適化を行います。WordPressの場合、『Autoptimize』というプラグインが効果的なので、これを利用したいと思います。設定はとっても簡単です。

Autoptimize設定画面

インストールして有効化したら、メニューの設定に『Autoptimize』が現れます。アクセスすると設定画面が表示されますので、「JavaScript Options」と「CSS Options」にチェックを入れるだけです。

これでスコアはモバイル:64点、パソコン:71点になりました。


※パソコンのスコアが落ちています・・・が、理由は後述します。

※ちなみに、同じようなプラグインで『Head Cleaner』があります。これも非常に便利なのですが、上記と被る部分がありますので導入はしていません。当ブログで試しに導入してみたところ、かえって遅くなってしまいました。(設定が不完全だったのかもしれませんが、競合してそうだったので外しました)

※「JavaScriptの圧縮」は有効なのですが、外部サービスを呼び出すコードを埋め込むような記事を書く方は、JavaScriptは圧縮しないようにしてください。なぜかと言うと、「広告やアフィリエイトタグ」や「食べログなどの外部サービスを読み込むタグ」が上手く動かないことがあります。




キャッシュ系プラグインの導入・・・はしない!!

WordPressには、有名なキャッシュ系プラグインがあります。それらは非常に効果的で、多くのブログで紹介されています。『W3 Total Cache』や『Super Cache』、『DB Cache Reloaded Fix』、『Zen Cache』など様々なものがあります。

しかし、非力なレンタルサーバでこれらのキャッシュ系プラグインを入れると、かえって遅くなる場合があります実際、当ブログでも色々と試して入れてみましたが、サーバの応答時間が軒並み遅くなりました。

おそらく、キャッシュする分データベース(MySQL)へのクエリは減ったものの、溜め込んだキャッシュを返さなければいけないため、非力なWebサーバがより多く処理をすることになって、結果として応答速度が遅くなったのではないかと推測します。

ロリポップでは、WebサーバとDBサーバ(MySQL)は分離されています。DBサーバも他のユーザと共用ではありますが、もしかしたらWebサーバよりはリソースの食い合いをしていないのかもしれません。あるいは、Webサーバと比較してそこそこ性能が良いとか・・・?

キャッシュ系プラグインはくせ者!?

他にもキャッシュ系プラグインを利用した場合に、画面が崩れてしまったなどのケースもあるようなので、キャッシュ系プラグインはご利用のサーバ環境に合わせて使うのが良いと思います。

参考記事 ちょっと待て!素人がWordPressのキャッシュ系プラグインをわけわからずに使うと悲惨な目に遭うぞ! | ENJILOG

ということで、キャッシュ系プラグインの安易な利用は止めましょう!また、格安レンタルサーバの場合は、逆効果で遅くなることもありますので、導入には気を付けましょう。

WordPress表示速度の改善策の実施結果

ここまでで、下記の対策を行ってきました。

  • 画像の最適化
  • CDN(コンテンツデリバリーネットワークの活用)
  • ブラウザキャッシュの活用
  • http通信時の圧縮設定
  • JavaScript/CSSの最適化

これによって、どれだけWordPressの高速化に効果があったか、結果を発表します。

Google PageSpeed Insightsの点数

Google PageSpeed Insightsキャプチャ9

Google PageSpeed Insightsキャプチャ10

対策前と対策後の比較です。

対策前 対策後 差分 改善率
モバイル 46 68 +22 147.8%
パソコン 59 73 +14 123.7%

目標のモバイル:60点、パソコン:70点をクリアすることができました!




WordPressのサイト高速化:まとめ

Webサイトとして充分に速いかと言われれば、まだまだ改善の余地が残る結果ではありますが、ワンコインの格安レンタルサーバを使っていてもなかなかの高速化を図ることができたのではないかと思います。

もちろん、WordPressを使っている場合には、使用しているテーマや、コンテンツの画像の多さや外部コンテンツ/アフィリエイトの読み込み量などでも、Webサイトの表示時間は大きく変わってきます。

利用されているサーバでも効果は大きく変わってきますので、これを1つの例として参考にして頂ければと思います。

ちなみに、改善策を施したのに点数が下がってしまったのは、レンタルサーバは他のユーザさんと共用なために、リソースが食われてサーバの応答時間が遅くなってしまったことに起因します。ロリポップなどのレンタルサーバをご利用の方は、ご注意ください。

※クリック型広告やアフィリエイトを埋め込まれているサイトでは、画像が表示されなかったり画面崩れが起きたりすることがあるので、導入時は一つ一つ確認しながら進めて頂ければと思います。