IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / Google / モバイル ユーザビリティちょっとだけ解消

モバイル ユーザビリティちょっとだけ解消

2019/11/27 Google, はてなブログ

前記事:

www.imuza.com

  • 概要
  • Javascript は CSSOM 構築をブロックする
  • モバイルユーザビリティは何を見ているのか?
  • Javascript の最適化
    • 記事ページ
    • トップページ

概要

Google Search Console からモバイルユーザビリティのエラー警告が出てからかれこれ1ヶ月、いろいろ修正してはいるのですが、一度「修正を確認しました」となっても、またエラーが出たりしています。

いろいろググって原因を探っているのですが、今のところ、ネット上に解決方法は見つかりません。

エラー表示は次の3つなんですが、

  • クリック可能な要素同士が近すぎます
  • テキストが小さすぎて読めません
  • コンテンツの幅が画面の幅を超えています

おそらく CSSが適用される前にモバイルユーザビリティのチェックが入るのだろうと推測しています。もしそうなら放っておいても良くなることはありませんので、必死の原因究明です。

Javascript は CSSOM 構築をブロックする

DOM はそれなりに理解しているつもりですが、同じように CSSOM という CSS の DOM 版のようなもので、要素ごとツリー状に構築されたオブジェクトデータというものがあり、これが完全に構築されないとレンダリングが始まらないということをやっと理解しました(涙)。

techblog.raccoon.ne.jp

こちらの記事がとてもわかり易く参考にさせていただきました。

ということで、この CSSOM の構築をブロックしているものがあるんじゃないかという推測のもとに、多分それは Javascript だろうということで Javascript の最適化を試みています。

モバイルユーザビリティは何を見ているのか?

現在のモバイルユーザビリティのエラー表示は次のとおりです。

ひとつは「修正を確認しました」となっており、ふたつに「修正を検証」を送ってありますので「開始」となっています。一日ほどで結果が表示されます。

「修正が確認しました」となっている「テキストが小さすぎて読めません」の合格した2ページを表示してみます。

たった2ページで判断するんですね。

実はこれまでいろいろやってきた中で、一度「修正を確認しました」となったのに、翌日にはまたエラーに変わったことがあります。その時の合格は1ページだけで、その他は「保留」のままでした。

ということは、Google Search Console はエラー表示を出す原因を特定しているということじゃないかと思います。なぜそのログを見せてくれないんでしょうね。「テキストが小さすぎて読めません」じゃ、どこがダメなのかわかりません(笑)。

Javascript の最適化

記事ページ

問題のサイトはかなり DOM 操作をやっていますので、おそらくその Javascript が CSSOM 構築をブロックしているのだと思います。記事ページはそれほどでもありませんが、トップページは デザイン > カスタマイズ > タイトル下(#top-editarea)に「最新記事」「おすすめ映画」「注目記事」「AboutUs」の最初の記事の画像を拾ってきて一覧表示にし、そのタイトル位置へリンクさせるということをやっています。

で、上に書きました、一度「修正を確認しました」となったのに、翌日にはまたエラーに変わったというのは、それまで デザイン > カスタマイズ > フッタ(html, javascript を書ける に近い #bottom-editarea)に即時関数で書いていたものを DOMContentLoaded に変更したことから、割と軽めの記事ページでは CSSOM 構築が可能になったのではないかと想像しています。

たしかにその時「合格」となった1ページは記事ページであり、その後再びエラーとなったのはトップページでした。

これが現在の状態で、トップページついて鋭意努力中ということです。

トップページ

トップページで問題になっているのではないかと推測している箇所は上に書いた #top-editarea の画像の一覧表示です。そのうちの「注目記事」というのは、デザイン > カスタマイズ > サイドバー > 注目記事モジュールで、HTML は次のようになっています。

<div class="hatena-module hatena-module-entries-access-ranking"
  data-count="6"
  data-source="access"
  data-enable_customize_format="0"


  data-display_entry_category="0"
  data-display_entry_image="1"
  data-display_entry_image_size_width="100"
  data-display_entry_image_size_height="100"
  data-display_entry_body_length="0"
  data-display_entry_date="1"
  data-display_entry_title_length="20"
  data-restrict_entry_title_length="0"
  data-display_bookmark_count="0"


>
  <div class="hatena-module-title">
    
      注目記事
    
  </div>
  <div class="hatena-module-body">
    
  </div>
</div>

つまり、XMLHttpRequest を使ったサーバーとの通信によりリアルタイムにデータを表示しているということです。

で、この注目記事の画像を取り出そうと思いますと、この通信完了を待たなくてはいけません。当初は、setTimeout() をつかって画像が表示されるのを待っていたんですが、あるいはこれがまずいのかなあとか、いや非同期だから問題ないはずと考えていても埒が明きませんので、現在は、load イベントを使ってどうなるか「修正を検証」を送ったところです。

でも、Ajax は非同期だからなあ…。

と、疑問が次から次へとやってくる毎日です(涙)。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

  • 作者: 久保田光則
  • 出版社/メーカー: 技術評論社
  • 発売日: 2017/05/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
クリック可能な要素同士が近すぎます(未解決)
モバイル ユーザビリティのエラー続報
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com