Lighthouse | 適切なサイズの画像を表示する

2021-06-03Lighthouse,SEO

Lighthouse | 適切なサイズの画像を表示する

LighthouseのSEO診断で、「Best Practices」の項目で表示される修正案「Displays images with inappropriate(不適切なサイズの画像を表示)」というものがあります。

「Displays images with incorrect aspect ratio(不適切なアスペクト比の画像を表示)」とは別

Lighthouseのメッセージで詳細として表示されるリンク先の説明を見ると「レンダリングされたアスペクト比が本来の画像のアスペクト比と5%以上異なる画像サイズで表示されている場合にこのメッセージが表示される」とありす。

が、このリンク先はよく見ると「Displays images with incorrect aspect ratio(不適切なアスペクト比の画像を表示)」の表示なんですよね。

Lighthouseにおいて、「Displays images with inappropriate(不適切なサイズの画像を表示)」「Displays images with incorrect aspect ratio(不適切なアスペクト比の画像を表示)」は別物です。

これに騙されて、当方みたいに問題ないハズなんだけどなーってなる人も多いと思います。

Lighthouseのバグの可能性もある

また、検索すると英語圏のQ&AではLighthouseのバグなのでは?といった内容のページがいくつかトップに表示されます。

昨年末には解決済みとあったりしていますが、当方はGoogle Chromeの拡張機能版で試しているのでバージョンアップのタイミングが違うのかもしれません。

少なくとも、表示自体はなんら問題ない状況のはずなので、クリアする条件が厳格すぎる可能性はありそうです。

また、Lighthouseのサイト内で「Displays images with inappropriate(不適切なサイズの画像を表示)」についての詳細ページは見つかりませんでした(2020年6月現在)。

Displays images with inappropriate(不適切なサイズの画像を表示)が表示される原因

アスペクト比は別であるので、この注意メッセージはそのまま画像サイズを指すものと思われます。

また、横幅の方が大きく親要素のサイズまたは画面サイズの横幅より大きいサイズの画像を表示している画像などの一部が「Displays images with inappropriate(不適切なサイズの画像を表示)」の対象となっていると思われます。

WordPressでいうと、アイキャッチ画像や大きめの画像をレスポンシブで表示していると、それらを対象にこのメッセージが表示されることがあるようです。

親要素の横幅といっても、Lighthouseはモバイルのウィンドウサイズでレイアウト表示しているはずなので、Lighthouseのレンタリングエンジンの要件を調べる必要があるかもしれません。

2020年現在Lighthouseが利用しているレンタリングエミュレータはモトローラーのMoto G4とのこと。
調べたところMoto G4は360×640だったのでそのあたりを境目にして検証すれば良いのかな。

解決策

色々検証してはみましたが、この問題の完全な解決策は当方では調べきれていません。

単純に大きな画像をmax-whidthなどを使ってレスポンシブするというだけでは、引っかからなかったりしますが、CSSが影響している可能性もあります。

Lighthouse,SEO

Posted by Yousuke.U