テクスチャの多いページが遅くなる理由
テクスチャは画像の重いコンテンツです。最適化されていないPNGで50のプレビューを表示するギャラリーは25〜50MBを転送する可能性があります。目標:初期ロード2MB未満で高品質プレビュー。
フォーマット選択:PNGよりWebP
WebPは同等品質でPNGより25〜35%小さいファイルを実現します。
遅延読み込みとレスポンシブ画像
loading=“lazy”属性は画像がビューポート近くになるまで読み込みを遅延します。srcsetでデバイスに適したサイズを配信。
CDNとキャッシュ
CDNから画像を配信し積極的なキャッシュヘッダーを使用。静的サムネイルにはCache-Control: public, max-age=31536000, immutable。
パフォーマンスの測定
LighthouseまたはWebPageTestでLCPとTBTを測定。Google Search ConsoleでCore Web Vitalsを監視。