先日メールで、以下のような報告をもらいました。
特定のページで時々PC向け記事がモバイル向け記事として表示される
これは、Wordpressプラグインにファイルを生成するタイプのものがありますが、そういったプラグインが悪さをしているということが考えられます。
逆の症状の、モバイル端末でPC向け記事が表示されるという記事もあります。
今回はその「simplicity」の スマホ対応レスポンシブが使えなかった件を どうやって解決したのか？ということをご紹介しちゃうよ！
解決方法：プラグイン「quick cache」を停止させた
Simplicityは正直、ファイルを生成するタイプの「キャッシュプラグイン」との相性が悪いです。今回はその理由を紹介します。
追記：以下の設定を行うとSimplicityとページキャッシュを両立して表示することができます。
ファイル生成キャッシュプラグインと相性が悪いわけ
それは、パソコンとモバイルで、それぞれスタイルを分けているからです。完全レスポンシブではなくスタイルを分けている（モバイルの時はmobile.cssが適用される）から、「ファイルを生成するキャッシュプラグイン」を使用していると、そのページのファーストビューの端末のキャッシュファイルが作成され、次からはそれが表示されてしまいます。
ではなぜ、完全レスポンシブデザインにせず、4つのスタイルからなる準レスポンシブになっているかというと、アドセンス広告を最適に表示するためです。
パソコン画面で比較的報酬効果の高い「記事下のダブルレクタングル」を行うには、完全なレスポンシブスタイルだと、モバイル場面では、レクタングルが縦に2つ表示されてしまい、アドセンスの規約違反になるからです。
それなら、レスポンシブ部分のスタイルシートでレクタングル1つを「display:none;」すればいいじゃないか、と思われるかもしれません。僕もそう思いました。が、Simplicity作成時に調べた感じでは、それもアドセンス規約違反になるっぽいです。
その理由は以下。
禁止されているコードの改変方法
AdSense コードについて、禁止されている改変方法は次のとおりです。
display:noneなどを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除きます）- (略）
一応、レスポンシブデザイン上で「レスポンシブ広告ユニット」を使用すれば、「display:none;」は許されています。ただ僕の場合、ユーザーが、必ずしも「レスポンシブ広告ユニット」を使用するかわからなかったので、「display:none;」は使用しませんでした。「レスポンシブ広告ユニット」の作成方法はこちら→レスポンシブ広告ユニットを作成する
その他の、「レスポンシブ広告ユニット」以外のアドセンス広告ではどうなのか？というと次のような記事があります。
そうです。display:noneで消したところで、しっかりアドセンス広告としてカウントされているのです。 display:noneしたところで、クライアントには４つアドセンスコードが吐き出されています。adsense管理側は、それを見て、広告数を判断しているのでしょう。
ですから、レスポンシブ・ウェブデザインで、メディア毎にadsense広告数を制御するなんてことは難しい、というかできないのではないでしょうか？今のところ、サーバ側で広告数を制御したほうが得策っぽいです。
「display:none;」で1つ広告ユニットを非表示にしていても、4つ設置されていては規約違反になります。パソコン画面でダブルレクタングルをしたい場合、「display:none;」で1つ非表示にしていても、広告ユニット1つとしてカウントされます。ですのでモバイルでは、2つまでしか表示できなくなってしまいます。これではせっかく3つある広告枠がもったいないです。
これによりSimplicityでは、wp_is_mobile()を使用して、アドセンスの広告表示をサーバーで制御する方法を採用しています。
あと、スタイルで非表示に関するものです。これは2012年でちょっと古いですが「AdSenseヘルプフォーラム」の質問へのGoogleの回答で以下のようなものもあります。
AdSense Pro Maiko
ご質問、ご回答いただきありがとうございます。
CSS の非表示を使った広告表示につきましては、以下のポリシーを参照していただけますと幸いです。
広告コード及び動作の変更: Google のプログラム ポリシーに記載されているとおり、いかなる方法でもお客様が Google 広告の動作を変更することは許可しておりません。AdSense アカウント ページで生成された広告コードは、表示されているとおりにサイトのソース コードに貼り付ける必要があります。
と、これはいろんな意味に取れるのですが、トピックの話の流れからしてダメなのかなと。
モバイル画面で縦に2つ表示されるわけではないので良いように思うんですけど、ユーザーのアドセンスカウントに何か問題が起きても困るので、Simplicityでは4つのスタイルからなる準レスポンシブスタイルを採用しています。
というわけで、「ファイル生成キャッシュプラグイン」との相性が悪いのは、仕様ということでご了承ください。
Simplicityの高速化
キャッシュプラグインが非推奨なのなら、どのようにサイトを高速化したらいいかというと、個人的には、「Wordpress＋ブラウザキャッシュ＋リソース圧縮＋画像の圧縮」で十分かと思います。
上記の方法を実行するだけで、以下のようにサイトが高速化されます。
設定前
設定後
以下は、高速化方法をまとめたものです。
以前、ブラウザキャッシュも何も設定してない状態でも、エックスサーバー＋Wordpressなら、1日4万PVアクセスがあっても大丈夫だったので、これだけやっておけば、かなりの負荷にも耐えれるのではないかと思います。
まとめ
ということで、Simplicityでキャッシュ系プラグインを使用している場合は、ブラウザキャッシュはOKだけど、ファイルを生成するタイプのキャッシュ機能はオフにしておくことを強く推奨します。
どうしても、ページキャシュを使いたい場合は、以下の方法なら動作確認済みです。
コメント
スマフォ表示が上手くいきません。
こんばんは、PCでの表示は自分が思ったようなスタイルになるのですが、スマフォで見ると、PCと同じ感じに見えて、皆さんのようなスマフォ表示にならないのです。
ブログ途中に過去記事を貼っているのですが、PCでは過去記事がはてなのように表示されますが、スマフォではURLだけ表示されます。
また、スマフォ画面では広告表示もされません。
何が原因でしょうか
こんにちは。
もう少し、詳細に現在の設定状態を書いていただけると助かります。
もし、以下のスタイルのことなら、これはプラグインのモバイル用表示機能によるものか何かだと思います。（おそらくJetpackか何かの機能だったような）
ただ、これだとPCと同じ表示とは言えないですし。
どういった設定で「PCと同じ表示」になっているかが、上の文からではちょっとわからないです。
この記事に書かれたということは、何かキャッシュプラグインを使用しているのでしょうか。
わいひら様
コメントありがとうございます。
説明が下手ですいませんでした。
Jetpackの設定を外せば上手く表現できました。
過去記事なんかも上手く連動しています。
お手数おかけしました。
あ、その設定のことことでよかったんですね。
僕はまた、モバイル表示がおかしかったので一時的にあえてプラグインで表示させているのかと思いました。