【WordPress高速化】9秒からあっという間に2秒台へ！使用したプラグインと設定方法を細かく解説します。
2014/11/16
今日は朝から神奈川まで行くので電車の中で記事を書いてますPITE.（@infoNumber333)です。現在7時。本当は昨日の夜に書き上げてしまおうと思ったのですが、集中力が続きませんでした。やっぱり朝は頭の回転の速度が違いますね。
「速度」と言えば、頭の回転も大事ですがそれと同じくらい僕達ブロガーに取っては大切なのが「ブログの表示速度」です。
ブログの読み込み速度が遅いのはSEO的にも良くないですし、何よりユーザーに取って使いづらいですからね。特にウチではモバイルの割合が多いのでなおさら。
今回WordPressに入れているプラグインの設定を見直して表示速度の大幅な高速化に成功したのでその方法をご紹介いたします。
Google先生に怒られた。
今回ブログの高速化を調べるきっかけになったのはGoogle Adsenseの管理画面でした。
通知が来ていて「やべっ何かしたかな」と焦って開いてみると、「サイトの読み込み時間が長過ぎますよ」という注意。ちょっと安心。
以前から薄々思ってはいたもののいい機会だったので、ブログの高速化に再度着手することに。
参考にしたのは「gori.me」！
「高速化」と考えて一番最初に思いついたのがgori.meの「Wordpressで読み込み速度1秒台を実現するために実施した5つの施策 | gori.me」という記事。「gori.me 一秒」で検索して教えを乞いました。
ここに書いてある中の、
・W3 Total Cacheの設定
・Cloudflareの導入
・MO cacheの導入
・DB Cache Reloaded Fixの導入
を行い、iPhone研究室さんの「WordPressで1秒切り！目を疑う高速表示の設定はこれだ！1時間で5万PVでも大丈夫 | iPhone 研究室」という記事に書いてあった、「001 Prime Strategy Translate Accelerator」というブラグインを入れてみることに。
そしてGTmetrixでサイトの速度を計ってみると、Page speedが「B」、YSlow Gladeが「D」だったものが…
一気に両方共「A」までぶち上がりました！！
こ、これは恐ろしいほどの効果。評価が高いってそれだけで気分が良くなりますね。
この二つの記事に目を通してもらうのが一番なのですが、採用した箇所としていない箇所があるので僕が設定した項目を以下に書いておきます。ページの高速化に興味がある方は参考にしてみて下さい。
W3 Total Cacheの設定
今回W3 Total Cacheに設定した項目は以下の4つです。
・Page Cacheの有効化
・Browser Cacheの有効化
・Cloud Flareとの連携
・ユーザーエージェントの設定
今までW3 Total Cacheは入れてはいたのですが、ちゃんと設定していなかったのでその実力も半分も使いこなせていませんでした。しっかり設定するとこんなにも違うんだなと実感。
プラグインの「新規追加」画面で名前を入力すれば出てきますのでインストールしましょう。
順番に各設定を説明していきます。
Page Cacheの設定
「インストール済みプラグイン」の中から「We Total Cache」の「Settings」をクリックして設定画面を開きます。まずその中の「Page Cache」にチェックマークを入れました。
これだけだと機能しないことが多いのでその場合は管理画面の上にこのような表示が出ます。これの「Empty the Page Cache」をクリックすればOK。
page cacheを有効にした途端一気に読み込み時間が速くなったのでこれはかなり効果が出てそうです。
Browser Cacheの設定
同じくBrowser Cacheも設定していきます。
Generalの画面でBrowser Cacheの「Enable」にチェックしたあとサイドバーの「Browser Cache」から以下の項目にチェックを入れます。
・Set expires header
・Set cache control header
・Set entity tag (eTag)
・Set W3 Total Cache header
・Enable HTTP (gzip) compression
・Prevent caching of objects after settings change
これも便利な機能で、データの圧縮転送やキャッシュ保持期間などを自動で設定してくれます。特に「YSlow Glade」の向上に効果がありました。
最初はこれ手動でやろうと思ったのですが、かなりややこしくて困っていたんですよね。それを1クリックでできちゃうのはありがたい。
Cloud Flareとの連携
画像や動画などの高容量データを別のサーバーから引っ張ってきてくれるCDNサービス「Cloud Flare」とW3 Total Cacheをリンクさせます。
・表示速度を劇的に向上する、無料のCDNサーバー「CloudFlare」は導入必須だ！！ | gori.me
Cloud Flareはサーバーの負荷をとんでもなく軽減してくれるので、導入することを強くオススメ致します。詳しくは上の記事をどうぞ。
W3 Total CacheのSettingsから「Network Performance & Security powered by Cloud Flare」という項目にチェックを入れます。設定内容は上の画像の通り。
Cloud Flare単体でも効果はありますが、W3 Total Cacheと紐付けることによってさらなるパフォーマンスを発揮してくれました。
スマホ対応は注意！
W3 Total Cacheはデフォルトの状態だとユーザーエージェント（何のデバイスを使っているのか判別する機能）がオフになってしまいスマホ用のテーマが表示されなくなってしまいます。これを解決する方法は以下の記事に書きましたので、参考にして下さい。
・意外と盲点。高速化キャッシュプラグイン「W3 Total Cache」をWPtouchやモバイル用テーマと併用する方法。 | iPhone・Macの情報発信ブログ〜Number333~
MO Cacheの導入
MO Cacheは言語ファイルをキャッシュしてくれるプラグイン。W3 Total Cacheと併用することによって効果があります。こちらはインストールするだけでOK。
プラグインの「新規追加」で検索すれば出てきます。
「DB Cache Reloaded Fix」と「001 Prime Strategy Translate Accelerator」の導入
続いてサイトの裏側、データベース部分をキャッシュしてくれるプラグインである「DB Cache Reloaded Fix」とWordPressの日本語翻訳を高速化してくれるプラグイン「001 Prime Strategy Translate Accelerator」の2つを導入しました。
どちらも管理画面からインストールできます。
「DB Cache Reloaded Fix」と「001 Prime Strategy Translate Accelerator」はインストール後に設定画面から有効化させるだけで機能してくれます。
「DB Cache Reloaded Fix」の方はキャッシュ系のプラグインの設定を変えるとすぐ止まってしまうので小まめにオンオフしてあげましょう。
なんと一気に2秒台の世界へ！
以上が今回僕が行った手順です。
これらの施策によって評価はダブルAまで上がり、肝心のPage Load time（読み込み時間）も9秒から一気に2秒台へ！これは素晴らしい！安定的に2〜3秒台の数値がでるようになりました。
体感的にもPC・スマホ両方でかなり表示が速くなったように思います。
あとは画像やスクリプトファイルの圧縮、HTMLの構文などをちゃんと見なおせば1秒台も夢ではなさそう！空いた時間に細かなところを直していこう。
PITE.はこう思う。
長らく抱えていた悩みがこれで一区切りつきそうです。
ここで紹介したプラグイン・サービスは全て元から入れていたのですが、設定を変えるだけでこんなに効果が出るとは驚きました。
サイトの表示が速いということはそれだけで嬉しいですね。今後もこの速度を維持して行ければいいな。
gori.meさん、iPhone 研究室さん本当にどうもありがとうございました(ﾉ*’ω’*)ﾉ！
PITE.（@infoNumber333)
