もっともっと、もっと先へMore and more,
further and further.
お知らせ
Largest Contentful Paint (LCP)改善のための画像最適化テクニック
LCPは、ビューポート内で最も大きな要素（多くの場合、画像やテキストブロック）が表示されるまでの時間を測定する指標です。Googleは良好なユーザー体験のために2.5秒以下を推奨しています。
画像最適化の主要なテクニック
1. 適切な画像フォーマットの選択と最新フォーマットの活用
<picture>
<source type=”image/avif” srcset=”image.avif”>
<source type=”image/webp” srcset=”image.webp”>
<img src=”image.jpg” alt=”説明” loading=”eager” decoding=”async”>
</picture>
AVIFやWebPなどの最新フォーマットを優先的に使用
JPEGやPNGをフォールバックとして提供
画質と圧縮率のバランスを考慮（WebPの場合、品質75-85%が推奨）
2. レスポンシブ画像の最適化
<img
srcset=”
image-300.jpg 300w,
image-600.jpg 600w,
image-1200.jpg 1200w”
sizes=”(max-width: 768px) 100vw, 50vw”
src=”image-1200.jpg”
alt=”説明”
>
デバイスの画面サイズに応じた適切なサイズの画像を提供
不必要に大きな画像のダウンロードを防止
3. プリロードの活用
<link
rel=”preload”
as=”image”
href=”hero-image.jpg”
imagesrcset=”
hero-300.jpg 300w,
hero-600.jpg 600w,
hero-1200.jpg 1200w”
imagesizes=”(max-width: 768px) 100vw, 50vw”
>
LCP対象となる重要な画像を優先的に読み込み
ブラウザのリソース優先順位を最適化
4. CDNの効果的な活用
# Nginxの設定例
location /images/ {
proxy_cache images_cache;
proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;
proxy_cache_valid 200 24h;
add_header Cache-Control “public, max-age=86400″;
}
エッジサーバーからの高速配信
キャッシュ戦略の最適化
画像の自動最適化機能の活用
5. 遅延読み込みの適切な実装
<!– LCP対象の画像 –>
<img src=”hero.jpg” loading=”eager” decoding=”async”>
<!– LCP対象外の画像 –>
<img src=”secondary.jpg” loading=”lazy” decoding=”async”>
LCP対象の画像には`loading=”eager”`を使用
その他の画像には`loading=”lazy”`を適用
これらの最適化テクニックを組み合わせることで、LCPの大幅な改善が期待できます。実際のプロジェクトでは、サイトの特性や要件に応じて適切な手法を選択し、継続的な計測と改善を行うことが重要です。
一覧に戻る