Webサービス&SEO

WordPress高速化で最も効果があったのはCloudFlare!共有レンサバでも1秒台で表示

cloudflare

結論から言うと、WordPressを高速化させようとして最も効果があったのはCDNのCloudFlareでした。もちろん他の設定やnginxの最適化などで高速化させることは可能でしょうが、簡単に共有レンタルサーバでも高速化させることができます。

本サイトはさくらのレンタルサーバ(共有)、WordPressで動いていますが、本サイトでもGT Metrixで表示1秒台がでました。(時間によって変わるでしょうが。。)

GoogleのPage SpeedでもY!SlowでもAランクです。

サイトの高速化はSEOにも効果があるとされており、CloudFlareは無料で利用でき(有料プランあり)簡単に設定できるのでオススメです。

その他施策も含めて紹介します。

WordPress高速化させる前の状態

gtmetrix_QC_before

WordPressは高機能ですが、基本的には重い(遅い)です。施策実施前の状態をGT Metrixで測定しました。

GT Metrix

キャッシュ系のプラグインも入れていない状態でした。キャッシュ系プラグインは余計な負荷がかかるものや相性の問題があって、最近は敬遠ぎみでした。。

施策前はランクCでロードタイムは5秒程度。まぁそんなもの・・という数字です。

Quick Cacheプラグインを入れる

QuickCacheプラグインはWordPressのキャッシュ系プラグインの中では比較的安定(他との競合が少ない)ような気がするので、入れました。

QuickCache

普通にインストールして、メニューから設定、「Enabled」にして有効化します。

モバイル系の場合はキャッシュさせない設定にするなら、「No-Cache User-Agent Patterns」という項目に以下を追加します。

w3c_validator
 iPhone
 Android
 BlackBerry
 DoCoMo
 KDDI
 SoftBank
 WILLCOM
 emobile
 Mobile
 iPod
 Playstation
 Nintendo
 PDA
 Windows CE
 mixi-mobile-converter
 UP.Browser
 Opera Mini
 Opera Mobi
 PalmOS

モバイルのみ広告表示している場合などは必須です。

あと、以下をWordPressを入れているフォルダ(ドメインでアクセスするフォルダ)の.htacessファイルに追記しました。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 10 minutes”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType image/jpg “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType text/html “access plus 2 minutes”
ExpiresByType text/css “access plus 1 weeks”
ExpiresByType text/javascript “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 3 days”
</IfModule>

ブラウザにファイルをキャッシュさせてねという設定です。数字は適宜変えて良いです。結構適当な数字なので。。。

上記施策実施後が以下のとおり。

gtmetrix_gzip

ランクは上がったけど、表示速度はそこまで上がっていないですね。。。

CloudFlareの設定

CloudFlareの登場です。CDNとはコンテンツデリバリーネットワークの略で適宜ググってください。。。

CloudFlareは簡単に言うと、通常ユーザがアクセスする場合、

ユーザ→ドメインサーバ(お名前.comなど)→レンタルサーバ(さくらインターネットなど)

という流れなのを、

ユーザ→ドメインサーバ(お名前.comなど)→CloudFlare→レンタルサーバ(さくらインターネットなど)

という流れに変えて、CloudFlareがサイトのファイルをキャッシュしておいて、可能な限りレンタルサーバにアクセスさせずに表示させるということです。WordPressのサーバを動かさずに表示するので高速になるということです。

CDNというよりは、リバースプロキシのような役割ですね。

まず、CloudFlareのサイトからサイトを登録します。

CloudFlare

基本的には新規登録から普通に進んでいけば問題ないかと。

cloudflare4

こんな感じです。途中、ドメイン設定を変更しろと言われるので、変更します。お名前.comならここですね。

onamae

それで簡単に設定が完了するのですが、ドメイン変更が浸透するまでに24〜72時間ほどかかる=CloudFlare経由になるまで時間がかかるので、待つ必要があります。

WordPressプラグインの「CloudFlare」

WordPressプラグインの「CloudFlare」を入れておきます。

CloudFlare

インストールして、メニューからメールアドレスとAPIキーを入れておきます。APIキーはCloudFlare管理画面、アカウントで確認できます。

CloudFlareの導入後とロケットローダー追加設定

CloudFlareを入れたあとのGT Metrixの数値がこちら。

gtmetrix_cloudflare

3.75秒。まぁちょっと早くなったし、WordPressならそんなものか?というような数値です。計測時間によっては、これくらいの差がでるよね?という感じです。

そこでロケットローダーという機能をオンにします。この子が凄いです。

ウェブサイトという項目のドメイン名右にある機能マークをマウスオーバーして、CloudFlare settingsを選択。

cloudflare2

パフォーマンスの設定からロケットローダーを「自動」にするだけです。

cloudflare3

その結果、、、

cloudflare

1.67秒!!!!!WordPressで共有サーバという条件では爆速です。iOSやAndroidでも確認したのですが、特になにも問題なさそうです。問題が起こったら教えて欲しいです。

CloudFlareは良いよね。

CloudFlareは高速化以外に、サイトが落ちているときでもキャッシュされたサイトを表示してくれたり、悪意のある攻撃をある程度防いでくれたりします。

現状デメリットがみつからないです。

他にも細かくいろいろ設定できるので、試してみると良いかもですね。JSの圧縮などは、いろいろと動かなくなる可能性があるので、今回は使っていません。。。

W3 Total Caheを入れているのであればプラグインなしでCDNの設定ができるようですが、W3 Total Caheはセキュリティの問題があるという話なのと、なにかと問題が起こるので、私は使いません。ということで、かなりオススメです。

コメント

  1. りんごくん より:

    なんでjavascriptの最適化(説明文)で一気に早くなるんでしょうね???不思議

  2. debate より:

    詳しく読んでないですが、Javascriptの読み込みを非同期するからですかね。
    先にHMTLとCSSなどを読み込んでJS系はあとで非同期で読み込むのか。

    なので、JS多用のサイトでは動作がおかしくなったりしました。

  3. さとうきび より:

    debateさんは今も、CloudFlare使ってらっしゃいますか?
    他のサイトで見るとサイトがよく落ちるようにになったなど
    書いてあるので気になっています。

    Jetpackはいまいち導入する気にならないので
    CloudFlare入れようか迷っています。

  4. debate より:

    さとうきびさん
    サイトが落ちるようにはならないと思いますが、CloudFlareが落ちるときはありますね。CloudFlareがスパムなどを弾いてくれるのと、キャッシュして返してくれるので。

    このサイトでは使っておりませんが、他のサイト複数で使っています。
    オススメだと思いますよ!

コメントを残す