スマホ表示を崩さずにW3 Total CacheをSimplicityに導入する方法


今回は『W3 Total Cache』という、ワードプレスを高速化できるプラグインの導入方法を説明します。

これを使うと?

W3 Total Cacheはキャッシュプラグインの1つですが、難しい原理は置いといてこれを使うとどうなるかというと、ワードプレスを高速化することができ、ページ表示速度を速くすることができます。

ブログを運営する上でページの表示速度を上げるというのは重要な課題の1つです。

ページ表示速度が遅いというのは、デメリットしかありません。

クリックをしてからページが表示されるまでに時間がかかるとユーザーがストレスを感じてしまい、ブログから離脱しやすくなってしまいます。

逆に、ページ表示速度がサクサクならサイトを巡回しやすくなるのでユーザービリティが上がりますし、ユーザーが求めている情報を素早く提供できるということでGoogleからも好かれ、検索結果に上位表示されやすくなるといいことづくめです。

スピードテストの結果

実際、W3 Total Cacheを導入するとどのくらいスピードが速くなるのかということですが、これを測るためにスピードテストをしてみました。

環境はエックスサーバー、テーマはSimplicity2を利用しています。

スピードテストの結果は、ページ表示速度が大体1秒ほど早くなりました。

speed

また、Googleのスピードテストでも、

  • モバイルのスコアが48→67
  • パソコンのスコアが63→88

と大幅にスコアアップしました。

このスピードテストはW3 Total Cacheを有効化したかオフにしたかだけなのですが、たったこれだけで大きな効果があることが分かります。

※今回利用したスピードテストはこちら

GT Metrics

Google PageSpeed Insights

キャッシュプラグインの問題点

このように、ワードプレス高速化に非常に貢献してくれるW3 Total Cacheですが、キャッシュプラグインには1つ問題があります。

それは、使用しているプラグインやテーマによってはこれと干渉を起こし、不具合が起きることがあります。

実際、私が使っているSimplicityというテーマでは、スマホ表示がおかしくなるという問題が起こりました。

Simplicityは本来、レスポンシブ対応しているのでスマホで開くとスマホ用デザインで表示されるのですが、W3 Total Cacheが有効になっていると、スマホで開いてもPCデザインで表示されてしまい、字がありんこサイズで表示されてしまうという不具合が起こりました。

そこで、今回はこの問題に対応した設定方法を紹介していきます。

導入方法

それでは、W3 Total Cacheの導入方法について説明していきます。

英語のプラグインなので戸惑うかもしれませんが、やることはポチポチ数カ所チェックを入れるだけなので3分もあれば終わります。

1.General Settings

まず、W3 Total Cacheをインストールして有効化したら、サイドメニューに「Peformance」が表示されているので、その中から「General Settings」を選びます。

1

そしたら、

  • Page Cache
  • Datebase Cache
  • BrowserCache
  • Verify rewrite rules

にチェックを入れます。

a

b

c

dd

この他のチェックは外してしまって大丈夫ですし、あとのところは初期設定のまま何も触らなくて大丈夫です。

設定ができたら「Save all settings」を押して設定内容を保存します。

2.User Agent Groups

General Settingsが設定できたら、次は「User Agent Groups」を設定します。

2

ここで、

  • Group name: high
  • Group name: low

という2つの項目があるので、「Enable」という所に両方チェックを入れ、「Save all settings」をクリックすれば設定完了です。

3a

3b

ちなみに、Enableというのは”有効化”という意味です。

英語のプラグインにはよく出てくる単語なので、覚えておくと英語プラグインもなんとなく扱えるようになります。

3.キャッシュクリア

以上で設定は終わりですが、最後に念のため「Empty the page cache」を押してキャッシュを飛ばしておきましょう。

4

おわりに

この設定をすれば、ワードプレスを大幅に高速化することができ、ページ表示速度が早くなります。

しかも、Simplicityのレスポンシブ機能も問題なく動きますので、Simplicityを使っていてキャッシュプラグインに悩んでいたら今回の方法を試してみてください。