【WordPress】「サイトの表示がおかしい!」キャッシュ系プラグインを入れたらサイトの表示がバグったお話

キャッシュ系プラグインを入れるきっかけ

サイトを運営しているとGoogleさんのアナリティクスやサーチコンソールなどのツールを使用する機会が多くあります
そういったツールを使用していると、Wordpressでサイトを運営している方の多くが「サイトの表示速度の改善」と言われることがあると思います
そこで、Wordpressでサイトの表示速度をあげるにはどーしたらいいの?っとGoogleで調べると必ず「キャッシュ系プラグインを入れる」という解決方法に行き当たります

「へぇー!じゃあやってみよっと」と軽い気持ちでキャッシュ系プラグイン「W3 Total Cache」をインストール&有効化、これが大変な事態への第一歩でした・・・
(※Wordpress + Simplicityでの出来事です)

サイトの表示がたまにバグる!!

キャッシュ系プラグインを入れてからというもの、サイトの表示速度は自分でもわかるぐらいに早くなりました
「こりゃいいや!」と普段通り更新作業をしていて、ふとサイトのトップを見たときに・・・

「なんじゃこりゃああああああああああああ」

なんとサイトのレイアウトが大幅に崩れていました
まるでスマホサイトをそのままPCで拡大表示したかのよう・・・
今から思えばこういった事態が起こった時に真っ先に疑うのはキャッシュ系プラグインなのですが、当時は全く原因がわからず・・・

必死で検索しますが「cssを見直しましょう」などの検索結果ばかり
もう駄目だ・・・と思っていましたが、急に「あ、そういえばキャッシュ系プラグインって問題が起こりやすいって書いてあったような」と思い出し調べてみると・・・

原因はモバイルサイトとPCサイトの判定がうまくされてないことだった!

なぜこんなことになったかと言うと、キャッシュの仕組みが問題だったようです

めちゃくちゃ簡単な図ですが、普通はこの図のようにユーザーのリクエストを受けWordpressサイトがデータベースを照合、必要なデータを返してもらいWordpressサイト内で組み立ててユーザーにサイトを表示します

WordPressは毎回サイトに訪問者が来るたびにこの手順でサイトを表示させています
つまり訪問者が来るたびに、その訪問者に対してのみの新規ページを作成し表示しているようなものです
そりゃ表示も遅くなりますよね

そこでキャッシュの出番です
キャッシュ系プラグインは、一度誰かに向けて表示されたWebサイトのデータを一時的に保存し、次に同じページに別の訪問者が来た時にはその一時保存されたデータを見せることでページ生成やデータベースへの照合時間等を短縮しています

さて、ここで問題になってくるのが「一度誰かに向けて表示されたWebサイトのデータを一時的に保存し、次に同じページに別の訪問者が来た時にはその一時保存されたデータを見せること」です
もし、この一時保存されたデータがスマホで表示されたWebサイトデータであり、次の訪問者がPCでの訪問者だった場合・・・

スマホ用ページがキャッシュされてPCでのアクセスでもスマホページが表示されてしまうのです

これが、サイトのレイアウトが崩れてしまった原因でした・・・

じゃあどうすればいいの?

PCでのアクセスの際にもスマホページのキャッシュを表示させてしまうということは、サイトに訪問者が来た瞬間に、その訪問者がスマホなのか?PCなのか?がちゃんと判定できていないと言うことです
そのため、キャッシュ系プラグインには正しい判定させる必要があります

ですが、キャッシュ系プラグイン「W3 Total Cache」での設定にその項目はあるにはありますが、どうやらSimplicityのスマホ or PC判定と嚙み合わないみたいです
そこで「W3 Total Cache」と「Simplicity」の判定を合わせるためには、function.phpに以下のコードを追加で書き込む必要があります。

※function.phpは更新に失敗するとサイトが真っ白になってしまったりするので、しっかりとバックアップを取ってから行うようにしてください

これでスマホ用のサイトがPCに表示されてしまうといったことが起きなくなりました

しかし、キャッシュ系プラグインを使うときは本当に注意が必要です
これ以外にも色々とキャッシュ系プラグインはバグったりするみたいですのであまり使いたくないなぁ・・・というのが本音です(笑

また今度記事に書きますが、スマホ向けの高速表示ならAMP対応という方法もありますし、個人的にはキャッシュ系プラグインに頼らなくても大丈夫なんじゃないかなぁっと思ってます
あ、AMP対応という方法を一応書きましたが、管理人はAMPページが大嫌いです!
その理由も含めて、また今度記事にさせて頂きたいと思いますので、宜しくお願いします

長々と書いてしまいましたが、お付き合いいただきありがとうございました!