ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】ブログ高速化AA達成!6つのW3TotalとCloudFlare併用設定

高速のリニアモーターカー

「W3 Total Cache」はWordPressで作成されたブログの表示速度を高速化できるキャッシュ系プラグインの1つです。今回は他プラグインやスピードアップ対策との併用やスマホ対応などの設定方法を共有したいと思います。

前回の記事でも1秒台を達成したと書きました。表示速度の計測サービスGTmetrixでは、はじめての「AA」(ダブルエー)スコアも達成しました。

ゆめぴょん(@yume_pyon)です。こんちはっ!

今回の記事は「W3 Total Cache」プラグインを導入していることが前提です。「W3 Total Cache」の特徴、インストールや設定方法などについては下のリンクから参照してください。

W3 Total Cacheで1秒台達成!WordPress高速化の設定方法を詳しく解説W3 Total Cacheで1秒台達成!WordPress高速化の設定方法を詳しく解説45 shares

「W3 Total Cache」はブログの表示速度を高速化するキャッシュ系のプラ…

また今までの高速化の方法をまとめた記事も参考にしてください。

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

現在利用中の高速化対策とプラグイン一覧

私が現在(2013.08.12時点)、ブログ表示の高速化のために利用している技術やプラグインの一覧です。

「W3 Total Cache」と他キャッシュ系プラグインとの併用時の設定方法

まず「001 Prime Strategy Translate Accelerator」「WP Hyper Response」については通常設定で問題ありません。

ちなみに「MO Cache」も「001 Pri…」と同じ翻訳言語のキャッシュプラグインですが、オブジェクトキャッシュ「Wp File Cache」も併用する必要があります。私は最近の更新頻度から「001 Prime Strategy Translate Accelerator」を選択しました。

「DB Cache Reloaded Fix」については「W3 Total Cache」導入後に画面上部に赤字でエラーが出ました。キャッシュをクリアしたり有効期限を変えたりしたけどエラーのままです。

そこで「DB Cache Reloaded Fix」の設定画面(「設定」→「DB Cache Reloaded」)の一番下「詳細」の「ラッパーモード」を「有効」にしたらエラーはなくなりました。有効にするには一回キャッシュを無効にして有効に戻す必要があります。

ただしもしエラーが出てなければ「ラッパーモード」は無効のままの方がキャッシュ効率は上がります。

あと画像を後読みしてくれるプラグイン「lazy load」も私の環境では相性が悪かったので利用をやめました。画像の位置がずれたりしたら外した方がいいかも。画像もキャッシュで表示されるので、はずしても問題ないです。

スマホ対策方法/「WP touch」との併用

「W3 Total Cache」のページキャッシュ機能を利用すると、スマホでブログを見た時にもPCモードで表示されてしまいます。これはユーザーエージェント(アクセスした端末の種類)を判定する前にキャッシュを表示してしまうからです。

また「WP touch」プラグインを利用している場合にも同じ現象が起こるようです。ちなみに簡単にスマホ対応できるプラグイン「WP touch」についての記事も参考にしてくださいね。

Ktai Styleで携帯/ガラケー対応!スマホも考慮したWordPressプラグインKtai Styleで携帯/ガラケー対応!スマホも考慮したWordPressプラグイン

WordPressで作ったブログをスマートフォンや携帯(ガラケー)で見たことあり…

ではスマホ対策の設定方法です。「W3 Total Cache」の「ページキャッシュ/Page Cache」機能を利用している方は、WordPress管理画面の左メニューから「Performance」→「Page Cache」をクリックしてください。

「Advanced」設定の「Rejected user agents:」の入力欄に下の文字列をコピペしてください。わかる人は必要なものだけ選んでもいいと思います。最後に「Save all settings」クリックを忘れずに!

iphone
ipod
ipad
pre
pixi
iemobile
aspen
incognito
webmate
android
dream
cupcake
froyo
blackberry9500
blackberry9520
blackberry9530
blackberry9550
blackberry 9800
blackberry 9780
blackberry 9850
blackberry 9860
webos
s8000
bada

もし「W3 Total Cache」の「Minify」機能を利用している方は、そちらの「Rejected user agents:」にも同じ設定をしてください。私のようにCloudFlareを利用している人には関係ありませんが。

最後にWordPress管理画面の「Performance」の「User Agent Groups」をクリックして、「Group name」が「1.high」、「Enabled」にチェック、「Theme」が「Pass through」になってることも確認してください。

「CloudFlare」の「Rocket Loader」によるJavaScriptあと読み設定

前回「W3 Total Cache」の「CloudFlare」設定で「Rocket Loader」を「Automatic」に設定しました。「Rocket Loader」はブログで利用している全JavaScriptを後読み(遅延読込み)することにより表示速度を高速化します。

具体的には「複数のJavaScriptを結合したり」「JavaScriptを非同期であと読みしたり」を自動的に行なってくれるようです。実際の内部処理についての具体的な記述は見つからなかったので、私もそのくらいしか理解できてません。

しかしブログを表示してみてソースを確認すると、JavaScriptの読み込み時に「type=”text/rocketscript” 」になっているのが確認できます。ブラウザはrocketscriptなんてスルーするので、CloudFlare側でAjax処理してくれてるみたいです。

さてうれしいことばかりの「Rocket Loader」ですが、実はテーマやスクリプトの種類によっては不具合を起こすこともあるようです。スクリプトを使う処理で何かおかしければ「Rocket Loader」を疑いましょう。

設定の場所は「Performance」の「General Settings」の「Cloudflare」で検索すれば見つかります。下の方です。「Rocket Loader」を「Off」にして「Save」すればスクリプトは全て自動で元に戻ります。

または「Off」にせずに「Automatic」のままでも、指定したスクリプトだけ「rocketscript」にしない方法があります。スクリプト文に「<script data-cfasync=’false’ src=…」のように書けばいいです「Google Adsense」などで利用すればいいと思います。

あとこれは試してないので推測ですが「Manual」の場合は「data-cfasync=’true’」に設定したスクリプトのみ「rocketscript」に変換されるのではないでしょうか。知ってる人がいれば教えてください。

ちなみに以前ブログで紹介したソーシャルボタンのあと読み設定ですが、Rocket Loaderを導入したなら解除した方がいいかも。「あと読み」の「あと読み」になるので。

【Webサイト高速化】SNSソーシャルボタンをあと読み設定する方法とコードを紹介【Webサイト高速化】SNSソーシャルボタンをあと読み設定する方法とコードを紹介

ソーシャルボタンの読込みには時間も負荷もかかるため表示を後読みにしました。すると…

「Rocket Loader」については下の記事も参考にしました。感謝です。

ページの読み込み速度を劇的に改善!CloudFlareとW3 Total Cacheを組み合わせて高速化する方法

「CloudFlare」の「Minify」でコメントを削除しない方法

「W3 Total Cache」で「CloudFlare」の「Minify」を利用設定していると、HTML内の全てのコメントも削除してくれます。通常はこれで何も問題無いのですが、コメントを利用するサービスもあるので要注意です。

例えば「Zenback」を利用している場合、関連記事の精度を上げるために本文をコメントタグで囲みます。「Minify」機能はこのタグも削除してしまいます。

上のJavaScriptのように特定コメントだけ残す方法を探しましたが見つかりませんでした。もしご存知の方がいらっしゃれば、ぜひ教えてください。

ちなみに「W3 Total Cache」の「Minify」機能を利用している場合には特定コメントを残す方法があります。WordPress管理画面から「Performance」→「Minify」をクリックしてください。

2段目の「HTML & XML」の「Ignored comment stems:」の入力欄に例えば「zenback_body_begin」などと入力して「Save all setttings」ボタンを押せばOKです。「CloudFlare」の「Minify」を利用している方は無効なので要注意です。

テーマ編集でCSSが更新されない場合。キャッシュクリア方法

キャッシュ系プラグインを利用しはじめると、WordPressのテーマやスタイルシートやJavaScriptを編集したのに、すぐ更新されない場合がでてきます。「CloudFlare」を利用している場合の対処方法は次のとおりです。

CloudFlare Settingsにアクセスしてログインしてから、中段の「Purge single file」をクリックしてください。そしてクリアしたいファイル名を入力してください。

例えば「http://wispyon.com/****/style.css」のようにフルパスで入力してから、「Purge file」ボタンを押せばそのファイルのみキャッシュクリアできます。全キャッシュをクリアしたければ「Purge Cache」をクリックです。

もしそれでも更新できない場合は、「W3 Total Cache」のページキャッシュ、ブラウザキャッシュや他のキャッシュ系プラグインのキャッシュもクリアしていきながら確認していってください。

まとめ:今日のゆめぴょんの知恵

以上が「W3 Total Cache」と「CloudFlare」及び、その他キャッシュ系プラグインとの併用・共存環境の構築について注意すべき点でした。

WordPressブログの表示速度の高速化については、下のまとめ記事も参考にしてみてください。

WordPressサイト高速化でSEO対策!17の表示速度アップ術WordPressサイト高速化でSEO対策!17の表示速度アップ術17 shares

ブログ表示速度の高速化についてはいろいろ書いてきました。今後は表示速度が遅いとG…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも:次記事»
ページ
↑先頭
ホーム