PageSpeed Insights の点数をよくするため、このサイトの改修を行っていたのですが、その中でいくら調整しても「タップ ターゲットのサイズや間隔は十分な大きさではありません。」の警告が消えないことがありました。結論から書くと content-visibility: auto; を設定したとき、 contain-intrinsic-size: 80px; と小さかったため、スクロールしていない状態では内部で要素が重なってレンダリングされていたようです。 contain-intrinsic-size: 300px; としたらエラーなしで 100 点に戻りました。その原因発見までの備忘録です。 2024 年 6 月のことです。
目次
デザインを変えていないのにユーザー補助で警告が出る
DOM の数を減らすべく HTML と CSS を改修し Grid レイアウトに変更して PageSpeed Insights で計測していたら、配置や色の変更は行っていないにも関わらず、 100 点だったユーザー補助が 92 点に下がってしまいました。
上図のように「ユーザー補助」の項目に「背景色と前景色には十分なコントラスト比がありません」と「タップ ターゲットのサイズや間隔は十分な大きさではありません。」警告が出るようになりました。
背景色と前景色には十分なコントラスト比がありません
Grid レイアウトを採用し HTML と CSS の改修をおこなったら「ユーザー補助」の項目に「背景色と前景色には十分なコントラスト比がありません。」と警告が出るようになっていまいました。指摘された要素を Chrome で確認してもコントラストの警告は出ていません。どうしていいのかわからないので、 Gemini に聞きながら、その要素そのものに背景色をつけたりしたり、 body の背景色を濃くしたり、テキストシャドーをつけたりして、コントラストで合格するよう CSS を修正しました。
タップ ターゲットのサイズや間隔は十分な大きさではありません。
しかしもう 1 つ出ていた「タップ ターゲットのサイズや間隔は十分な大きさではありません。」がいくら調整しても合格しません。 Gemini に聞いたりして padding や margin の調整を実践しても全然改善されずまた別の警告が出てきます。そしてサイトのデザインが崩れまくりました。本末転倒もよいところです。
Lighthouse でスクロールしながら計測したらユーザー補助が 100 点だった
そんなとき Chrome に Lighthouse という PageSpeed Insights をローカルで動かすような機能があるのを知りました。いちいち修正ファイルをサーバーに上げなくてもいいから楽に確認できます。そして Lighthouse で計測中に誤ってマウスをスクロールしてしまったら、なんとユーザー補助が 100 点になったのです。もうびっくりです。
ここから考えられうのはただひとつ。表示を早くしようと追加した content-visibility: auto; です。これは見えない部分のレンダリングをサボるプロパティです。必ず仮の高さを指定するように書いてあったので、 contain-intrinsic-size: 80px; としていました。 PageSpeed Insights や Lighthouse は contain-intrinsic-size のサイズを元にレンダリングするらしく、スクロールしていない状態では高さが足りず要素が重なっていると判断されたようです。 contain-intrinsic-size に設定する値は大きすぎるくらいでちょうどいいです。
contain-intrinsic-size の値が原因かの見分け方
contain-intrinsic-size の設定値が適切ではなくて警告が出ている場合の見分け方ですが、画面で見たとき要素が遠いのに同じ背景色の中でひとまとまりに表示されている場合は contain-intrinsic-size のサイズを大きくすれば解決します。
ユーザー補助が 100 点に戻った
修正を加えた CSS をバックアップから元に戻し、 contain-intrinsic-size を 80 px から 300 px にしたら、エラーなしで 100 点になりました。
Gemini によるとこのことは海外も含めどこにも情報が出ていないようです。まあここに書いたら、 AI に取り込まれるんでしょうけどね。
