W3 Total Cacheをレスポンシブデザインのテーマで使用する時の注意ポイント!!【WordPress】

最近WordPressの表示速度の高速化について結構考えているのですが、表示速度向上においてかなり重要になってくるのが「キャッシュ」という仕組みです。

キャッシュは、1回目の訪問時にページ内の情報を幾つかパソコン内に保存しておいて2回目以降の閲覧時に表示スピードを上げる仕組みの事を言うのですが、その設定ができる有名なWordPressのプラグインが「W3 Total Cache」です。

W3 Total Cacheで問題が…

僕も試してみようと思い、W3 Total Cacheをこのブログに入れてみました。
その後、プラグインの導入によって何か問題が起きていないか確認をして回りました。

PCの方は大丈夫だったので、今度はスマホの表示に切り替えて確認してみると所々表示がおかしい。「あれ？スマホの方表示おかしいな」と思って再読込みしてみたのですが、表示はおかしいままでした。
そして、何気なしにPC表示に戻してみるとPC表示もおかしな事に…

ただこの表示で何が起こっているのか理解できました。この状態って実はモバイルのキャッシュが残ってしまっている状態なんですね。このブログはレスポンシブデザインになっていて、その上PHPでデバイスごとにHTMLの出力を切り替えているのです。

それなのにスマホとPCで同じキャッシュを使ってしまっているので、キャッシュがこんがらがってしまって本来であればPCで表示されるはずのないスマホの表示が出てきてしまったり、スマホではPCの表示が反映されてしまって表示崩れが起きてしまっていたのです。

要はPCもスマホも同じキャッシュを生成しようとしてしまっていて、表示がモバイルとPC合体させたような状態になってしまっていたのです。

ですから、PCとスマホで別々のキャッシュを生成するように設定をし直したら解決するんじゃないか？と思い、設定し直してみました。

まずそもそも僕が行っていたW3 Total Cacheの設定ですが、バズ部のW3 Total Cache のおすすめの設定方法を参考にして設定していました。（CDNの設定はしていません）

この設定をした上で、[General Settings]を開いて[Object Cache]のEnableチェックマークを外します。

Object Cacheがオンになっているとページのキャッシュが先にアクセスした端末の表示になってしまうみたいです。先程説明した同じキャッシュを使ってしまっている状態になってしまうのでレスポンシブデザインの場合はオフにするようにしておきましょう。

[User Agent Groups]というページへ移動します。このページではユーザーエージェントをグループに分類してそれぞれのグループごとにキャッシュを作成する事ができるようになります。

既にデフォルトで「high」と「low」というグループが作成されているので「high」というグループの方の「Enabled」にチェックを入れて保存します。

ちなみに「low」の方は古い昔の携帯電話用のキャッシュになります。チェックは付けても付けなくてもどちらでも大丈夫です。