読者です 読者をやめる 読者になる 読者になる

Zバッファ

iPhoneやAndroidスマホなど家電ガジェット系レビュー記事中心。秘境スポットなどの旅行ネタやふるさと納税などの節約ネタ、投資ネタなど幅広く解説しているライフハックブログ。

WordPressの最適化プラグイン「Autoptimize」が原因でモバイルフレンドリーがNGに

スポンサーリンク

4月21日から始まったグーグルのモバイルフレンドリー優先対応の検索アルゴリズム変更。

WordPressサイトのモバイルフレンドリーに関するエラーが増加

これに関連して、WordPressで運営しているサイトの状況を一応確認しておくかということでグーグルのウェブマスターツールに久しぶりにログインして、モバイルフレンドリーからどうかチェックしている「モバイルユーザビリティ」をチェックしてみたら、なんと、1ヶ月前には殆どエラーがなかったモバイルユーザビリティでエラーが増殖中ではないですか!

グーグルウェブマスターツールでモバイルフレンドリーエラーが増加中

どういうこった?

WordPressのサイトはレスポンシブデザインで、数カ月前に4月21日から始まるグーグルのモバイルフレンドリー優先を見越して、対応を済ませていたはず。

取り敢えず、一旦落ち着いて、エラーになっているページをモバイルフレンドリーテストにかけてみます。

グーグルのモバイルフレンドリーテスト結果でモバイルフレンドリーではありません

モバイルフレンドリーではありませんとなっています。。

「コンテンツの幅が画面の幅を超えています」ということなので、なんか表とかテーブル要素がダメだったのかな~とエラーになっているページをスマホで見てみましたが、ぱっと見はコンテンツの幅が画面の幅を超えていませんし、リンク同士も近すぎたりはしていませんでした。

うーん (゜_゜)困った。

WordPressで原因不明の問題発生時はキャッシュ系プラグインを疑う

こういう時は、キャッシュ系のプラグインが怪しいことがあるので、利用しているW3 Total Cacheのキャッシュをクリアしてみるも結果変わらず。

先ほどのモバイルフレンドリーの結果をもう一度見てみると、Googlebotでアクセス出来ないリソースがあるということなので、何か間違ったものをブロックしてしまったかなと見てみると、javascriptやHTML,CSSを最適化してくれる「Autoptimize」というプラグインの名称がたくさん出てきました。

WordPressのAutoptimizeプラグインがモバイルフレンドリーに影響

robots.txtでワードプレスのプラグインフォルダやキャッシュフォルダはボットに対してブロックしているので、googlebotがアクセスできないのは当然な結果なのですが、気になったので、一旦「Autoptimize」を停止して、再度モバイルフレンドリーテストを実行してみると「問題ありません」になりました!

グーグルのモバイルフレンドリーテストで問題ありません。

AutoptimizeのCSS最適化がモバイルフレンドリーに悪影響

「Autoptimize」の全てが悪いのか、それとも一部なのか更に調査を進めます。

調査は、「Autoptimize」の最適化オプション設定を1つ1つon/offしてモバイルフレンドリーテストの結果が変わるかどうかで行いました。

まずは、HTMLの最適化をOFFにしてみます。

結果は変わらず。

次に、javascriptの最適化をOFFにしても結果は変わらず。

最後に、CSSの最適化をOFFにするとモバイルフレンドリーテストで問題なしとなったことから、CSSの最適化が影響していることが分かりました。

Autoptimizeの設定画面

AutoptimizeプラグインとWordPress人気テーマ Stinger5の相性問題

しかし、「Autoptimize」を使っている他のワードプレスのサイトについて、cssの最適化を行っているのにモバイルフレンドリーテストで問題なしとなるサイトもありました。

即ち、「Autoptimize」だけが悪いわけではありません。

CSSの最適化On/Offによって変わるということなので、これは、ワードプレスで利用してるテーマのデザイン設定と関係がありそうです。

因みに私が運営しているワードプレスのサイトで利用させてもらっているのは@enjiさん作成のレスポンシブデザインテーマStinger5

Stinger5とAutoptimizeの組み合わせがダメなのか、レスポンシブデザイン全般的にAutoptimizeとの相性がよくないのかは分かりませんが、謎のグーグルモバイルフレンドリーエラーに出くわした際には参考にしていただければと思います。