質問: モバイルユーザビリティエラーが増えていて、原因がわかりません 3/12から、今まで無かったモバイルユーザビリティエラーが発生し、増え続けています。テキストが小さすぎて読めません。クリック可能な要素同士が近すぎます。以上の項目が0から17ベージ(4/10時点)に増えていますが、モバイルフレンドリーテストには合格します。 サイトのトップページがこのモバイルユーザビリティエラーに含まれているので、なるべく早く解決したいのですが、自分のモバイルでサイトを確認しても「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」などが見られず、困惑しています。モバイルユーザビリティエラーを無くすためには、どのような修正をすればよいのでしょうか。
回答: 同様の問題が発生して困っていたものです。いろいろな手段で解決できないのか試してみたのですが、原因としてはGoogle botがページのモバイルフレンドリーを判定する条件が、モバイルフレンドリーテストツールと異なっているために発生する問題だと考えられます(2019年6月時点で) 該当のエラーですが、CSSの読み込みにGoogle botが失敗しているために発生しているエラーと考えられます。 ページ全体の容量が大きいために、google botがCSSの読み込みに失敗しているのではと考え、私の場合ですが、コンテンツ内の画像に対して遅延して読み込みを行うJqueryのプラグインを使用することで問題を解決できました。画像の読み込みが後回しになることで、CSS、JavaScriptを優先して読み込ませるので、レイアウト崩れはとりあえず防ぐことができます。 jQuery Lazy Load ページの読み込みに容量がかかっている部分は、CSS、JavaScript、画像などいろいろあると思うので、それぞれを最適化することで解決できる場合もあるのではないかと思います。 中でも画像は容量が多きく、ネックになっている場合が多いのではないかと考えられるので、同様の手法で解決できるパターンもあるのではないかと思います。 同様の問題で困っている方の助けになれましたら幸いです。