ZenCache Proの設定とPC/Tab/スマホのキャッシュの分け方

WPプラグイン「ZenCache Pro」設定とPC/Tab/スマホのキャッシュ分け
 WorsPressの高速化プラグインで、キャッシュを使うZenCacheを使っているのですが、最近有料版のZenCache Proを使い始めました。一番大きな理由はPC/タブレット/スマホのキャッシュを分けられるからですが、設定にちょっとしたコツが必要でした。


ZenCache無料版からPro版へ


ZenCache無料版の欠点


ZenCache無料版の欠点

 WorsPressを高速化するために、Quick Cacheの時からその使いやすさに魅力を感じてずっと使ってきました。その後ZenCache無料版を使っていたのですが、スマホの表示がおかしいことに気がつきました。

 なんとスマホとタブレットだけ表示するはずの要素「スマホ用人気記事ランキング」が表示されていないではないですか!

 調べてみると、PHPで行っているPC、タブレット、スマホの判定には問題なく、ZenCache無料版を無効化した時や、キャッシュを削除した直後にランキングが表示されることから、ZenCache無料版が原因であることが判明。

 どうもPCに表示した時に、その内容をキャッシュして、そのままスマホにも表示しているようです。ブログ自体はCSSによるレスポンシブなので、それには影響しなくて、テンプレート内でPHPに端末判定させて表示している部分に影響するようです。
 要するにZenCache無料版では同じページに対しては1種類のキャッシュしか表示しません。そしてPHP判定後のタグをキャッシュして表示しているため、次にキャッシュを表示するときには、判定の部分は入らないということになります。


 しかしブラウザ側で判定する部分、例えばJavascriptによる表示端末の判定や、CSSによる画面幅での切り替えには影響しないと考えられます。

 ですので単純に人気記事ランキングをJavascriptに置き換えれば解決するのですが、これ自体はWordPressプラグインを使っていますのでPHPで動いていため、それを変更するのは困難です。正直PHPでタグを生成させてから表示をどうにかする方がめっちゃ楽です。

 つまりスマホとタブレット用に人気記事ランキングを表示したい場合、PC・タブレット・スマホの全てに表示させておいて、CSSで表示させたくない端末だけdisplay:none;としておけば解決します。



ZenCache Proへ


ZenCache公式サイト

ZenCache™ | An advanced WordPress cache plugin inspired by simplicity.

 前述の通り、無料版の問題は一応解決したのですが、今回はついでに前から興味があったPro版へ移行することにしました。有料版のZenCache Proを使うには、海外の公式サイトで課金してアカウントを作る必要があります。

 思いっきり英語サイトなので、ちょっとビビりつつカード番号を入力。なんとか無事にアカウントを設定してPro版をダウンロードに成功。プラグインを有効化しました。(その後あやしい課金はされていません)



ZenCache Proの設定


 基本的には設定はデフォルトのままで大丈夫です。あとで気になったところだけ変更すれば良いかと思います。

 PC/タブレット/スマホのキャッシュを切り替える、「Dynamic Version Salt」の設定だけ注意して下さい。



Enable/Disable


Enable/Disable

 ZenCacheのON/OFFを設定します。

 キャッシュを表示している場合、ページのhtmlを見ると下の方に、<!-- ZenCache fully functional :-) Cache file served for (https://news.7zz.jp/) in 0.00141 seconds, on: Sep 15th, 2015 @ 5:00 am UTC. -->などと表示されているのでわかります。



Plugin Deletion Safeguards


Plugin Deletion Safeguards

 ZenCache Proをアンインストールするときに、Yes,Uninstallを選択します。プラグインによって作成されたディレクトリやファイルを削除します。



Clearing the Cache


Clearing the Cache

 Clearボタンを押したときに、どの範囲のキャッシュまで削除するか選択できます。



Directory/Expiration Time


Directory/Expiration Time

 ZenCacheのキャッシュの保存場所とキャッシュの有効期間を設定します。



Client-Side Cache


Client-Side Cache

 ブラウザ側にキャッシュさせるかの選択です。もちろんキャッシュさせたほうがいいので、通常はデフォルトのYesを選択しましょう。



Logged-In Users


Logged-In Users

 ログインしているユーザーにもキャッシュを表示するかの選択です。記事を修正したりするので、常に最新の記事を表示させるため通常はNoを選択しましょう。



Get Requests


Get Requests

 記事のアドレスがhttp://◯◯◯.jp?key=valueのような形式以外はNoを推奨とのこと。通常はNoでいいでしょう。



404 Requests


404 Requests

 記事がないときに表示する404ページをキャッシュするかどうかの選択です。アクセスの多いサイト以外はNoで良いかと思います。



Rss,RDF,and Atom Feeds


Rss,RDF,and Atom Feeds

 RSSをキャッシュするかどうかの選択です。通常はNoで良いと思います。Google FeedburnerなどWebフィードマネジメントプロバイダーを使っている場合はYesとして下さい。



URI Exclusion Patterns


URI Exclusion Patterns

 キャッシュを除外するURIを登録します。http://www.example.com/post/example-post-123を除外する場合、exampleexample-*-123と登録します。いまは必要ないので空欄です。



HTTP Referrer Exclusion Patterns


HTTP Referrer Exclusion Patterns

 特定の参照元からのアクセスに対してキャッシュを除外します。特に必要ないので空欄です。



User-Agent Exclusion Patterns


User-Agent Exclusion Patterns

 特定のユーザーエージェントに対してキャッシュを除外します。w3c_validatorだけデフォルトで入力されています。これはXHTML構文チェックツールThe W3C Markup Validation Serviceのユーザーエージェントです。とりあえずそのままにしています。



Auto-Cache Engine


Auto-Cache Engine

 作成されたキャッシュを自動的に再作成してリフレッシュしていく機能のようです。

 とりあえずデフォルトでNoなので使っていませんが、また使い方を調べてみたいと思います。



HTML Compression


HTML Compression

 CSSやJavascriptをつなげてまとめたりして、ページの高速化を行う機能です。こういうのはJavascriptが上手く動かなくなる可能性が高いので、とりあえずデフォルトのままNoとしています。



GZIP Compression


GZIP Compression

 ブラウザに表示するためのデータ転送の際、その内容をgzip圧縮を使って転送量を減らし、表示速度を高速化します。

 gzip圧縮を使うためには、下記を.htaccessに追記します。また使い方を調べてみたいと思います。

[apache]


AddOutputFilterByType DEFLATE text/plain text/html
AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf


[/apache]



Static CDN Filters


Static CDN Filters

 CDN(Content Delivery Network)とは、画像、動画、Javascript、cssだけを別のサーバーにキャッシュして、webサイトやブログを表示する時に負荷を分散させ、表示を高速化させようというものです。

 ですが、実は別のプラグインJetpack for WordPressPhotonというCDN機能がありまして、現在そちらを使っています。

 その内、JetpackのPhotonと、ZenCache ProのCDNとどっちが速いかなど試してみたいですね。



Dynamic Version Salt


Dynamic Version Salt

 こちらの設定で、PC・タブレット・スマホにそれぞれ表示するキャッシュを分けることができます。

 例えばiPhoneで表示したときに、iPhone用のキャッシュを表示したいときは、((preg_match('/iPhone/i', $_SERVER['HTTP_USER_AGENT'])) ? 'iPhones' : '')と設定するとのことですので、タブレットとスマホ、どちらでもない場合はPCという風に書くと下記のようになります。

((preg_match("{iPad|Android(?!.*Mobile)|Kindle|Silk|PlayBook|RIM\sTablet}", $_SERVER["HTTP_USER_AGENT"])) ? "tablet" : ((preg_match("{Android.*Mobile|iPhone|iPod|Windows Phone|BlackBerry|Googlebot-Mobile}", $_SERVER["HTTP_USER_AGENT"])) ? "phone" : ""))

 こちらはウェブソクの設定ですが、アクセス解析を見るとほとんどiPhone、iPad、Androidですので、これでほとんど大丈夫ではないかと思います。

Google クローラ – Search Console ヘルプ

 Googleクローラのユーザーエージェントはこのようになっています。一応Googlebot-Mobileはスマホ表示としました。



Theme/Plugin Developers


Theme/Plugin Developers

 テーマや開発者向けのメッセージです。開発するときに$_SERVER['ZENCACHE_ALLOWED'] = FALSE; or define('ZENCACHE_ALLOWED', FALSE)を追記すれば、一時的にZenCacheを無効にできるそうです。



Import/Export Option


Import/Export Option

 ZenCache Proの設定ファイルのエクスポート/インポートができます。



まとめ


 やっぱりPro版にすることで、新しい機能がかなり増えました。新しい機能を使わない状態では、GTmetrixpingdomで測定してみましたが、ページの表示速度では無料版とPro版はさほど変わりませんでした。

 新しい機能では、Javascriptやcssを圧縮したり、ZenCache Pro独自のCDNサーバーを使えたりするようなので、徐々に勉強して使っていきたいと思っています。でも今は絶対上手く動かない予感がする機能があるので、ボチボチ使っていく感じで行きたいと思っています。

 まあ新しい機能に不具合があっても、割と頻繁にアップデートしているようなのですぐに不安も解消されるでしょう。その内全機能を存分に使ってWordPressが爆速化する日が待ち遠しいです。(遠い目)

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください