多くの検索エンジンは、モバイル フレンドリーかどうかに基づいてページをランク付けしています。12 ピクセル未満のフォントサイズはモバイル デバイスでは読みにくいことが多く、見やすいサイズでテキストを表示するためには拡大が必要になることがあります。
Lighthouse のフォントサイズの監査が失敗する仕組み
Lighthouse では、フォントサイズが小さすぎてモバイルで読みにくいページを報告します。
Lighthouse では、テキストの 40% 以上でフォントサイズが 12 ピクセルより小さいページが検出されます。ページの監査で不合格だった場合、Lighthouse では次の 4 つの列に結果が一覧で表示されます。
| ソース | 判読できないテキストが表示される CSS ルールセットのソースの場所。 |
| セレクタ | ルールセットのセレクタ。 |
| ページテキストの割合 | ルールセットの影響を受けるページ上のテキストの割合。 |
| フォントサイズ | 計算されたテキストのサイズ。 |
判読できないフォントを修正する方法
CSS のフォントサイズを確認します。ページ上のテキストの少なくとも 60% で、フォントサイズが 12 ピクセル以上になるようにしましょう。
ビューポートの設定の欠落を修正する方法
Lighthouse で Text is illegible because of a missing viewport config が報告された場合は、ドキュメントの <head> に <meta name="viewport" content="width=device-width, initial-scale=1"> タグを追加します。
詳しくは、width または initial-scale の <meta name="viewport"> タグがないをご覧ください。