サイト速度のために画像を最適化する

画像が Core Web Vitals に与える影響

大きな画像は重要コンテンツの表示を遅らせ、LCP を悪化させます。サイズ指定のない画像はレイアウトシフトを引き起こし、CLS にも影響します。画像の重さと寸法を整えることは、体感性能を改善する最短ルートのひとつです。

• 画像を軽くすると LCP 改善に役立つ
• 正しい寸法を使うと無駄を防げる
• width/height や比率を指定して CLS を防ぐ

実践しやすい最適化チェックリスト

まずはファーストビューと高トラフィックページの画像から対応します。表示サイズに合わせてリサイズし、圧縮し、可能なら WebP を優先してください。装飾画像はできるだけ軽く保つのが重要です。

• 実際の表示サイズに合わせてリサイズ
• 転送量を減らすために圧縮
• 多くは WebP を優先
• ファーストビューから着手

繰り返し使えるシンプルな手順

レイアウトに合わせてサイズを調整し、容量を減らすために圧縮し、必要なら WebP に変換します。チーム運用ならヒーロー画像、本文画像、サムネイルの目標サイズを決めておくと安定します。