バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事は、Googleのサーチコンソールでモバイルユーザビリティの問題の未修正部分について対応したメモです。
ワードプレス使ってない人には特に参考にならないと思います(;^_^A
試行錯誤の過程を残しただけなので、まぁ参考程度に。
出ている問題
モバイル端末から見た場合の話なので、PCから見た場合は特に問題ないです。
コンテンツの幅が画面の幅を超えています
スマホやタブレットのブラウザの一画面だけでは表示されず、画面外まで表示されてる感じっぽい。
しかし実際にスマホとタブレットで見た場合は特に問題はありませんでした(・_・;)
クリック可能な要素同士が近すぎます
PCなら画面が広いけど、スマホみたいな小さい画面でリンク要素同士が近いと、誤クリックを誘発しちゃうのでダメっぽいです。
でもCocoonほぼデフォルトで使ってるから大丈夫だと思うけどなぁ。
スマホから見ても特に気になるところはない…。
けど、SNSのシェアボタンが密集してるのは気になるかな？
デフォルトだけども。
テキストが小さすぎて読めません
Googleが推奨するフォントサイズは16px以下みたい。
だけどこれもデフォルトで設定いじってないなので…。
これで引っかかるなら他のページも警告出ててもおかしくないけど、他のページでモバイルフレンドリーテストやった場合は大丈夫だった。謎。
応急処置：時間を置くと大丈夫だったり、記事を更新し直すと大丈夫だったりする
Googleのモバイルフレンドリーテストとかいうのがあるんだけど、これでモバイルユーザビリティの問題がないか確認できる。
これで「モバイルフレンドリーではありません」と出ても、時間を置いてやると「モバイルフレンドリーです」と表示されたり、記事を更新し直すと大丈夫になることが多い。
まさか毎回Googleの中の人が手動で判定していて、担当者によって見解が変わるなんてこともないだろうし(笑)。
めっちゃいい加減だなぁと思うけど、エラーが出てるとSEO的にも悪影響っぽいので対応します。
記事を更新し直したら速攻でモバイルフレンドリーになった！(笑)
最初は「モバイルフレンドリーではありません」だったのが、記事を更新しなおしたら速攻で「モバイルフレンドリーです」になった(笑)↓
キャッシュの問題かなぁ…？と思ったけど、キャッシュ削除しただけじゃダメっぽい。
うーんよくわからない…。
これで再審査リクエストを送れるけど、また後日同じ警告が届く(-_-;)
一応モバイルフレンドリーテストには合格しているので、サーチコンソールのモバイルユーザビリティエラーのページから再審査リクエストを送れます。
……でもこれ応急処置に過ぎないのか、また後日同じ警告が届く(-_-;)
一時的に合格しても、また同じページで警告が来たりとかね。
サーバーが軽い時間帯なら大丈夫でも、重い時間帯にクローラーが来るとダメなのかもしれない。
どうやらページが重すぎるとCSSの読み込みに失敗してタイムアウトしちゃうっぽい？
一番参考になったのはこのページの回答。
テキストが小さすぎて読めませんの原因がわかりません。 作成したページのCSSもhtmlも全て16px以上にしていますし、画像サイズも小さくしました。|Search Console Help
よくあるのは、サイトが重い時間にGooglebotが来て、CSS読む前にタイムアウトしちゃう…というケースです。エラーが出ているURLを昼間とかの軽い時間にモバイルフレンドリーテストにかけて、モバイルフレンドリーの判定が出れば大体これ。その場合、フォントサイズ修正よりもページの軽量化で解決できます。
ページが重いとタイムアウトしやすいっぽいです。
確かに夜はサーバーが混んでるのかサイトの表示が遅いかも…
昼間はサーバー安定してるからいいけど、夜間はサーバーが混んでてタイムアウトしがちっぽい？
確かにこのブログは最近、夜の時間帯は最近よく読み込みが遅くなるような…？クロール時間も夜間ですね。
読み込まれてないリソースもたくさんある(・_・;)
しかし昼間の時間帯にもう一回やってみたらモバイルフレンドリーと表示され、読み込めないリソースも1件だけだった。
ページに貼ってあるWebGLも、夜間は無茶苦茶重くなって読み込めなくなるし(-_-;)
unity playとか他のサーバーに上げたやつは普通に繋がるんだけど…。
まぁ確かに警告が出てるページを見てみたら、エラー出てるページは画像が多かったり、GIFの容量が重い傾向にはあった。
ほぼ文字だけのページだとエラー出てない。
地道にページを軽くするのが良いかも？
エックスサーバーの障害の問題もあるか…？
ちなみにこの問題が出始めたのはここ最近の話…それまではこんな警告出てなかった。
もしかしてエックスサーバーが重くなってるとか？新サーバーに移行したけど、最近エックスサーバーちょくちょくサーバーダウンしたり不具合あるしな…。
障害情報見たらかなり出てるっぽいけど……エックスサーバーって安定してるんじゃなかったのか…。
- サーバー停止を伴う緊急的なメンテナンス処理
- データベースでの著しい速度低下
- DDos攻撃
などなど物騒なワードが並んでいるのはなんとも(-_-;)
ロシア情勢でサーバーへの攻撃が増えてたりとかあるらしいけど。
あんまり酷いならサーバー変更も考えるけど、他もあんまり変わらないかな…？
エックスサーバー以外に良いサーバーはあるか？
よく名前が挙がるのは、
- コノハウイング
- ミックスホスト
- カラフルボックス
- さくらインターネット
あたり？
でもこれらのサーバーでもちょくちょくダウンすることはあるっぽい？です。
あとは最初は良かったけど、ユーザーが増えてから遅くなったりサポートが悪くなったりとか…？って評判も見た。
見たところ「このサーバーにしておけば絶対OK！」ってのはないっぽいので、別にあえて変えなくてもいいかな…？
移転に失敗するとアクセス数減ったりするし(・_・;)
Cocoonの高速化メニューの「CSS縮小」は既にやってある
これをやるとCSSのサイズを縮小してくれるみたいで、これをやると解決する場合が多いらしい。
けど既にやってあった(~_~;)
ほぼデフォルトで使ってるからCSSのカスタムとかもしてないんだけどな…。
WP-OptimizeのCSS縮小と併用したらブログカードが読み込まれなくなることはあった
モバイルユーザビリティエラーとは関係ないけど、いじってたらこういう不具合はあった。
矢印アイコンとかが読み込まれないページがあったりね…。
キャッシュ系プラグインとかもCocoonデフォルトのやつと競合する可能性があるので、不具合が起きてないか調べておくと良いかも。
とりあえずページを軽くして対応してみる
とりあえず地道にページを軽くすればいけるかも？
今のところ画像がほぼない、少ないページは警告来たことない気がするし。
対策1:画像をWebPにして軽くする
WebPとかいうGoogleが開発した画像フォーマットを使うと、大幅に画像を軽くできるらしい。
ただGIFアニメはWebPにすると静止画になってしまうようなので、jpegとかpngとかの静止画だけにしたほうがいい。
このプラグインはサイト内の画像を一括でWebPに変換できて評判が良かったので使ってみました。
変換前の画像は残るので、画像検索とかで404になることもなさそう。
プラグインを停止するだけで以前の状態に戻せるらしいです。
これやったら確かにGoogleのスピードテストの結果が10～20くらい改善しました。
対策2:GIFアニメを圧縮して軽くする
最近投稿した記事はかなり圧縮してアップロードするようにしてるけど、以前の記事のGIFアニメは結構重い(-_-;)
GIFアニメを軽くする方法は以前まとめたので、この通りにやって軽くします。
これやると1/10くらいの容量に削減できたりするｗ
どんだけ重かったんだ…。
GIFアニメはやめて動画にする手もあるけど…
MP4動画を自動再生音声オフにしてループ再生にしておけば、GIFアニメの代わりみたいに使えるっぽい。
Googleもページを軽くするために、GIFアニメよりもMP4とかの動画を推奨してるっぽい。
ScreenToGifもMP4出力できるけど、確かにGIFアニメより2～3分の1くらいの容量になる。
こちらの先輩のページによると、プラグイン使えばアイキャッチにも使えるみたい。
でもそんな短い動画をyoutubeにアップするのもな…。
ワードプレスの動画は以前使おうとしたけど、ちょくちょく埋め込みエラーになることがあって安定性がちょっと不安。
とりあえず圧縮すればGIFアニメもかなり軽くなるので、今のところGIFアニメのままでいいかな。
1MBを超えるようなGIFの場合はMP4にするとかすると良いかもしれない。
対策3:アイキャッチは軽い画像にする
モバイルフレンドリーテストをするとクローラーから見たスクリーンショットが見れるんだけど、画像が読み込まれてない感じになってる。
モバイル フレンドリー テスト – Google Search Console
特にページ前半、中でもアイキャッチが重いとそれ以降読み込まれないとか？かもしれない。
アイキャッチに重めのGIFを使っているページのほうが警告来ている率が高い気がする。
モバイルユーザビリティ判定のGooglebotはタイムアウト時間が短いっぽい？ので、できるだけ軽くしておいたほうがいいかもしれない。
アイキャッチにGIFを使いたいなら、最初の数～10フレームだけ抜き出すとかして軽いダイジェスト版のGIFを作るとかすると良いかも。
対策4:リンクにブログカードは極力使わずテキストリンクにする
サイト内リンクならまだ良いけど、外部ページにリンクしたブログカードだとレスポンスが遅くなるかもしれない。
Googleのページスピードインサイトの結果を見たら、BOOTHやunityアフィリエイトのリンクカードは外部読み込みだから遅くなってる警告が出ていた。
あとGithubへの外部リンクブログカードの表示がバグってリンク先に遷移できないページもあった(-_-;)
普通のテキストリンクなら問題ないので、極力テキストリンクにしたほうが良いかもしれない。
ちなみにこれが↓ブログカードで、
↓これがテキストリンクね。
どちらも私のブログのトップページにリンクされてるけど見た目が違う。
何気にテキストリンクのほうがクリック率高い？みたいな説も結構あるし、別にテキストリンクでもいいとは思う。
ブログカードの読み込みに時間がかかるとテキストが小さく、リンク要素同士が近くなりすぎる？
ここが読み込まれないと小さい文字で表示されてしまうようだから「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」に引っかかりやすくなる可能性があるかもしれない。
モバイルフレンドリーテストの結果のスクリーンショットを見ても、どうもこのブログカードのあたりでテキストが小さすぎて引っかかってる気がする。
貼るとしてもできるだけページ中盤～後半のほうがいいかな？
読み込みが終わった後なら多分大丈夫なんだろうけど、ページのファーストビューあたりに外部リンクのブログカードがあると読み込めずダメって判断されてそうな気がする。
今のところ、ページ上部のリンクブログカードをなくしたら警告無くなってその後も警告来ていないページが多いので、多分関係あるかも？
対策5: PHP8.1に変える
ちょうどこの記事を書いていたらエックスサーバーさんからメールが来て、PHP8.1に対応したらしい。
Cocoonはまだ正式に対応してないっぽい？けど…。
PHP8.1について | Cocoonテーマに関する質問 | Cocoon フォーラム (wp-cocoon.com)
切り替えて見たけど、とりあえずエラーは出てないっぽい。
7.4から変えたけど早くなったか？は不明ｗ 20%くらい早くなるって話も見たけど…。
不具合があればまたすぐ戻せるので、とりあえずこれで行ってみます。
【偶然？】もしかしてキャッシュ機能が原因？警告出始めた日に、エックスサーバーの高速化をONにして、WP Optimizeプラグインを導入していた
一応対策を行ったページはその後警告出なくなったけど、まだ対策してない他のページは相変わらず警告が届く(-_-;)
全ページやらないといけないってめんどくさいなぁと思ってちょっと調べてたら、警告が届き始めたのは6/18からみたい。
実は私は毎日タスクリスト日記をつけてるんだけど(笑)、記録を読み返していたらその日にエックスサーバーのキャッシュをONにして、WP optimizeプラグインを入れたりしていた。
このブログは最近夜読み込みが遅くなることがあり、なんとかならないかなぁと思って。
サーバーキャッシュ設定 | レンタルサーバーならエックスサーバー (xserver.ne.jp)
WP-Optimize – Cache, Clean, Compress. – WordPress プラグイン | WordPress.org 日本語
でも記録が残ってなかったけど、エックスサーバーのキャッシュはx2じゃないほうのx1はこれまでも使ってたかもしれない。
Cocoonテーマの高速化だけで十分か？
調べたらエックスサーバーのキャッシュは不具合が出る場合があるとか？
エックスサーバー Cocoonを使用する場合の注意点 おすすめ設定 | WORD BLOG (howtoweb.net)
Xサーバーの『 Xアクセラレータに関わる不具合』についての対応 | 要望 | Cocoon フォーラム (wp-cocoon.com)
↑は4年前の情報だけど、Cocoon作者のわいひらさんも競合する可能性があるからCocoonの高速化設定だけでも十分かもって言ってる…。
とりあえず
- エックスサーバーの高速化機能をオフにする
- エックスサーバーのサーバーキャッシュ、ブラウザキャッシュをオフにする
- WP optimizeプラグインを消す
で一旦様子を見てみます。
WP optimizeはリビジョンのクリーンアップとかで使ってるけど、それだけなら他のプラグインでもできるから一回消してみます。
その後サイトスピードテストの結果が目に見えて遅くなったので、エックスサーバーは設定戻した(・_・;)
「サーバーからの応答が遅すぎます」みたいな警告が出ていたため、まさかと思ってエックスサーバーのキャッシュ設定戻したら早くなった。
サイトスピードで20くらい早かったからこれはあったほうがいいかな…。
うーんこれが原因ではないのかな…？
【解決？】モバイルからのスケーリングをオフにしたら直った
どうもGoogleのモバイルフレンドリー判定のクローラーはせっかちすぎて、普通にスマホから見れるページでも、読み込みの初動が遅いと「このサイトはモバイルフレンドリーなんかじゃない！👿」と判断してるみたい。
CSSが読み込まれる前にモバイルからは一瞬レイアウトが崩れるみたいなので、そうならないようにモバイルからスケーリングしないようにしたら大丈夫だった。
こちらの優秀な先輩のページが参考になりました。
ありがとうございます(*^-^*)
cocoonのheader.phpを子テーマに移動させる方法はこちらの先輩が参考になりました。
これでやっと修正を検証が受理された！
これなら読み込み遅くてもレイアウトは崩れないと思うから多分大丈夫だと思うけど…。
とりあえずこれで様子を見てみる
一応ある程度原因が分かったみたいで良かった。
モバイルフレンドリーのクローラーとページをインデックスしてくれるクローラーは違うみたいなので、放っておけば解決することも多いらしいけど。
こう何度も警告が来るとちょっとね(・_・;)
また何かあれば追記します(*^-^*)
2022/07/28追記：合格！エラーが消えた！
メールが来ていて、やっとエラーが消えたようです(*^-^*)
ちゃんと合格になってますね。
ああ良かった(;^_^A
またエラーが出ることがあれば追記します(*^-^*)