画像サイズを削減してサイトを高速化
ほとんどのウェブサイトでは、訪問者がダウンロードするバイトの大部分を画像が占めます。そのため画像の最適化は、ページ速度と Core Web Vitals のためにできる最も効果の高い施策になります。ここでは実践的なチェックリストを紹介します。
1. すべての画像を圧縮する
公開前に画像を圧縮ツールに通しましょう。適切に圧縮された画像は、見た目の違いなく元のサイズのごく一部にできます。CompressEasy はこれをブラウザ内でバッチ処理できるため、あらゆるワークフローに組み込めます。
2. 現代的な形式を使う
JPEG や PNG から WebP や AVIF に切り替えると、画像の容量を大幅に削減できます。これはパフォーマンス向上のための、最も簡単で効果の高い変更の一つです。
3. 表示サイズに合わせてリサイズする
800 ピクセルで表示するのに 4000 ピクセルの画像を送らないようにしましょう。画像の寸法を実際の表示に合わせ、高 DPI 画面のためにおおよそ 2 倍のソースを用意してください。
4. ファーストビュー外の画像を遅延読み込みする
ファーストビューより下の画像に loading="lazy" を付けると、ユーザーがスクロールしたときにのみブラウザがダウンロードします。これにより長いページでは初回読み込みが大幅に速くなります。
5. 幅と高さを設定する
画像には常に width と height 属性（または CSS の aspect-ratio）を指定し、ブラウザがスペースを確保できるようにしましょう。これによりレイアウトのずれを防ぎ、Cumulative Layout Shift の指標が改善します。
まずは最大の効果から
もし一つだけ行うなら、最も大きな画像を圧縮して WebP や AVIF に変換しましょう。速くて無料で、通常ページ容量を最も削減できます。まずはファイルを圧縮ツールにドロップして始めましょう。