Lighthouse の Performance audits の対応方法を調べた（画像関連のみ）

前提

• Lighthouse の Performance audits の中で、画像関連のものの意味や対応方法を調べた
  • Optimize Cumulative Layout Shift の Modern best practice は Lighthouse でチェックされるが、今回は上記のリストのみを調査対象とした
• 各ブラウザの対応状況などは、2020 年 12 月時点のもの
• ちなみに Lighthouse のスコア計算に使われるのは Metrics のみである
  • https://web.dev/performance-scoring/
  • ただ Opportunities や Diagnostics を改善すると結果的に Metrics も改善されるので、対応するのが良い

対応

次世代フォーマットを使う

• https://web.dev/uses-webp-images/
• 次世代フォーマットは画像の圧縮率が高い
• JPEG や PNG ではなく Webp などにする
• Webp は 2020 年 9 月に Safari, iOS Safari が対応したので、現在の非対応は実質 Internet Explorer 11 のみ
  • https://caniuse.com/#feat=webp
  • ※ ただし Safari は macOS 11 Big Sur 以降が必要

適切な大きさにする

• https://web.dev/uses-responsive-images/
• 実際のレンダリングサイズが、画像のサイズより一定以上小さい場合に指摘される
  • 例：100×100 の画像を 50×50 で表示している場合
• 複数の画像を用意する、画像特化の CDN を使って複数のサイズを生成する、SVG を使うなどの対応方法がある

画像の品質を最適化する

• https://web.dev/uses-optimized-images/
• JPEG や BMP には 1〜100 の圧縮レベルがあるが、85 を最適としている
  • 圧縮レベル 85 にしたものと元のものを比較し、4kib 以上の差がある場合に指摘される
• Squoosh などを使い、品質を 85 にする

ファーストビューに入っていない画像は読み込みを遅延させる

• https://web.dev/offscreen-images/
• いわゆる Lazy load で対応する
• 現在は JavaScript でやっているサイトが多いが、img タグの loading="lazy" でもできる
  • https://web.dev/browser-level-image-lazy-loading/
  • しかし loading="lazy" は Safari と Internet Explorer 11 が非対応なので注意
    • https://caniuse.com/#feat=loading-lazy-attr

キャッシュポリシーを適切に設定する

• https://web.dev/uses-long-cache-ttl/
• キャッシュ可能でない画像がある場合、指摘される
• キャッシュ可能とみなされる条件は以下
  • HTTP status code が 200, 203, 206 のいずれかである
  • Cache-Control: no-cache が指定されていない
• 可能ならキャッシュの有効期間を 1 年以上にすると良いというニュアンスの書き方がされている