モバイルユーザビリティエラーやっと解消

2020.03.24 ITインフラ, ネットワーク

Search Console のモバイルユーザビリティにエラーが出始めて約4ヶ月、やっと解消しました。ただし原因はこれ！と特定できたわけではありません。

当該サイトはこちらです。

そんなには褒めないよ。映画評

過去の関連記事
現状
まとめと試したこと
終わりはなさそう…

01過去の関連記事

02現状

「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」「コンテンツの幅が画面の幅を超えています」の3つともに「合格」と表示され、エラーページが「0」となっています。

で、これまでの経緯を記しておこうと思いますが、ずばりこれというものはありません。実際、上の3つのエラーが本当にその問題があることからのエラーかどうかも定かではありません。一体 Search Console が何を見て判断しているかもよくわかりません。以下はその記録です。

03まとめと試したこと

「モバイルユーザビリティエラー」などでググってヒットする対策法はほとんど役に立ちません。というより、モバイル実機でサイトを見てみて問題があれば誰でもわかります。どこに問題があるかわからないときには役に立たないという意味です。

また、次の場合はあまり心配することはなく、時間とともに解消するだろうという John Mueller（Senior Google Webmaster Trends Analyst）さんの発言があります。

モバイル実機で問題がない場合
他のページの大部分がモバイルフレンドリーである場合

こうした場合の多くはライブテストではモバイルフレンドリーと評価されるはずです。次のサイトを参照してください。

結局、原因がわからない場合は、cssのレンダリングが間に合っていないということのようで、もしそれに何らかの思い当たることがあればそれは解消するよう修正すべきということです。

Javascript の読み込みタイミング

cssのレンダリングが間に合わない理由のひとつには、Javascriptが DOMや CSSOM構築をブロックしている場合があるようです。当該サイトは DOM操作をいろいろやっており、それを外部ファイルとして読み込んでいるのですが、はてなブログの場合は htmlを書けるところであればどこにでも Javascriptを書くことができ、一番 </body> に近いところということでフッタに書くことが多いのではないかと思います。

当初は即時関数で書いたスクリプトをそのまま読み込んでいたんですが、それですとそのスクリプトの実行が完了するまで DOM構築も CSSOM構築も停止してしまうようです。

async, defer 属性

script要素に async属性があることは Google AdSense のコードなどで知っていたのですが、どういうものか理解していませんでした。

async属性は、外部スクリプトの読み込みが非同期になり、完了し次第実行する、defer属性は、読み込みは非同期で同じですが、実行タイミングが DOMContentLoadedイベントの直前、つまり DOM構築は完了しているということになります。どちらも実行中は DOM、CSSOM構築ともにブロックしてしまいます。

上でリンクした記事にも書かれていますが、こちらが簡単でわかりやすいです。

現在は async属性をつけて読み込んでいます。