【開催中】Amazon 毎日お得なタイムセール

Cocoonでモバイルユーザビリティの問題が検出!解決策は?

ブログ運営

Coconn モバイルユーザビリティ エラー

サーチコンソールでインデックス登録するためURL検査で公開URLをテストしました。

するとモバイルユーザビリティに2つのエラーが表示されていた。

  • クリック可能な要素が近すぎます
  • コンテンツの幅が画面の幅を超えています

テーマはCocoonを利用させていただいています。

実は結構前からこのエラーは毎回出ていたのですが、問題なさそうなので放置していました。

しかし、放っておくのはやはり気持ち悪いので、今回本腰を入れて原因を調べてみたところ無事解決に至りました。

スポンサーリンク

モバイルユーザビリティのエラー

URLはGoogleに登録できますが、問題があります

サーチコンソールでURLを検査、公開URLをテストをすると「URLはGoogleに登録できますが、問題があります」と表示されます。

場所はモバイルユーザビリティで「このページはモバイルフレンドリーではありません」とのこと。

このページはモバイルフレンドリーではありません

詳細を確認すると、問題の件数に2つのエラー表示されていました。

  • クリック可能な要素が近すぎます
  • コンテンツの幅が画面の幅を超えています

はじめは、広告とか表とか画像がはみ出ているのかと勘ぐりましたが、どれも駄目。

このページはモバイルフレンドリーです

念の為、Googleのモバイルフレンドリーテストを実行すると「このページはモバイルフレンドリーです」と表示されます。

サーチコンソールの拡張にあるモバイルユーザビリティのエラーも0件です。しかし、URL検査でテストするとエラーが出るから不思議だ。

原因はCSS

わたしは2つのブログでCocoonのテーマを使用しています。

今回、もう片方のブログにはエラーが出ていませんでした。

そのことから2つのブログの設定を比較していくことで、原因を探りました。

WordPress CSSの追加

結論から先に言いますと、”CSSが原因“でした。

どうやら「CSSの読み込みが遅い」らしい。

  • CSSの読み込みが遅い
  • CSSを読み込むタイミングに問題がある

わたしのカスタムしたCSSは400行を超えていて、無駄な改行やらが多いからこれが原因だったのかも。

で、肝心な解決方法ですが、Cocoonの場合は超簡単。

解決方法

Cocoon 高速化でCSSを縮小化する

WordPressの「Cocoon設定」から「高速化」をクリック。

CSSを縮小化する」にチェックを入れるだけ。

モバイルユーザビリティ、このページはモバイルフレンドリーです

これでサーチコンソールの公開URLをテストしてみてください。

今度は問題なく「このページはモバイルフレンドリーです」と表示されるはず。

モバイルユーザビリティはCSSの縮小化で解決

試しに「CSSを縮小化する」のチェックを外して、もう一度テストしたら再びエラーが出たので、わたしの場合はCSSが原因で確定かと思います。

考察

素人考えですが、CSSを縮小化することによって、読み込みの遅さが解消したのではないかと思います。

このCocoonの高速化は、CSSの余分な改行や余白を整理することによってソースコードのサイズを減らしているらしいので、CSSを見直して整理すれば、縮小化しなくても解決するのかもしれない。

Cocoon以外のテーマでも、もしかしたらCSSの読み込みが原因の可能性があるかもしれません。CSSを大量にカスタマイズしたなど、心当たりがある方は確認してみてください。

タイトルとURLをコピーしました