Lighthouse & PageSpeed Insightsへの対応

[shimopino]

結果

対象URL：https://shimopino.github.io/blog/crafting-tech-blog-with-zola/

デスクトップ

モバイル

対応項目

• Performance
  • Noto Sans JPを使っていない
  • 適切な画像サイズ：https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/?utm_source=lighthouse&utm_medium=lr
  • font-display：https://developer.chrome.com/docs/lighthouse/performance/font-display/?utm_source=lighthouse&utm_medium=lr
  • 静的ファイルのキャッシュ：https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr
• Accessibility
  • コントラスト比が不足（ <code> と背景で比較する ）
  • 文字の方のカラーを以下のサイトで調整すればいいかも
  • https://dequeuniversity.com/rules/axe/4.7/color-contrast
• SEO
  • TOCの文字サイズが小さすぎる。リンクなので 1rem でも良さそう
  • 項目が長くなりがちなので、モバイルの場合はトグル形式にするでも良い

[shimopino]

Accessibility

検証内容

コントラスト比較のサイトをもとに、下記のカラー設定を採用 https://dequeuniversity.com/rules/axe/4.7/color-contrast

• color: #E6E6E6
  • alpha: 0.9（少し明るいので調整）
• background-color: #2B2B2B

結果

デスクトップ

モバイル

[shimopino]

SEO

検証内容

• ひとまずフォントサイズを 1rem に修正する
• モバイル版では目次の表示切り替えを追加して、邪魔だと感じた場合は目次を閉じることができるように修正

結果（Performance修正後に実施）

モバイル

[shimopino]

Performance

Noto Sans JPを削除

font-display: swap も追加

結果

デスクトップ

モバイル

[shimopino]

不要なものは極力ダウンロードしないのが大切