「タップ ターゲットのサイズが適切に設定されていません」と言われるとき

PageSpeed Insights の仕様がまた変わっていたので，新しいPageSpeed Insights 対策．
新たに「ユーザー補助」「おすすめの方法」「SEO」の項目が現れた．

その中の SEO の中に「タップ ターゲットのサイズが適切に設定されていません 56% でタップ ターゲットが適切なサイズに設定されています」などのように警告が表示されるようになった．

下の説明文には
「ページをスマホ対応にして、ピンチ操作や拡大操作なしでコンテンツを読めるようにします。」
とある．
「詳細」のリンクをたどると
「48 px × 48 px よりも小さいか間隔が 8 px 未満であるターゲットは、この監査に失敗します。」
と書いてある．
なので，スマホの時はリンクの間隔を 8px 以上に開ける必要がある．

タップ ターゲットのサイズを適切なものにするには

タップターゲットのサイズが適切でないのページに対策方法が書いてある．

具体的には

• タップ(クリック)できるターゲットのサイズを大きくするために padding を大きくする方法
• ターゲットの間隔を広げるために margin を大きくする方法

である．
ただし，8px 以上開けていてもどうも警告が消えないケースがある．
「少なくとも」と書いてあるので絶対ではないらしい．
少しずつ大きくしていって警告が出ないサイズまで大きくする．

このサイトの場合は上部にある「パンくずリスト」と下にある「タグクラウド」で警告を受けた．
まあ，確かに小さいと言えば小さいので素直に修正すると警告は消えた．

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• テキスト圧縮の有効化
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• 背景色と前景色には十分なコントラスト比がありません
• リンクに識別可能な名前が指定されていません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした
• 「INP の問題」の改善方法