13 September, 2025ステップ1：next/imageを使う
import Image from 'next/image';
<Image src="/hero.jpg" alt="ヒーロー" width={1280} height={720} />ポイント：幅と高さを指定してCLS（レイアウトずれ）を防止。
ベストマッチ
最短で課題解決する一冊
この記事の内容と高い親和性が確認できたベストマッチです。早めにチェックしておきましょう。
![情報処理教科書 プロジェクトマネージャ 2025年版 （EXAMPRESS） [ ITのプロ46 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1010/9784798191010_1_139.jpg)
ステップ2：ヒーローだけpriority + sizes
<Image
src="/hero.jpg"
alt="ヒーロー"
width={1280}
height={720}
priority
sizes="(max-width: 768px) 100vw, 1280px"
/>ポイント：最初に見える画像だけ priority。sizes で過剰ダウンロードを防ぐ。
さらに理解を深める参考書
関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。
![人月の神話 [ フレデリック・フィリップス・ブルックス ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/6089/9784621066089.jpg)
ステップ3：AVIF/WebPを自動配信
// next.config.js
module.exports = { images: { formats: ['image/avif', 'image/webp'] } };さらに理解を深める参考書
関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。
おまけ：計測を入れる（web-vitals）
npm i web-vitalsimport { onLCP } from 'web-vitals';
onLCP(m => navigator.sendBeacon('/api/metrics', JSON.stringify({ kind: 'LCP', value: m.value })));さらに理解を深める参考書
関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。
まとめ
この3手で多くのサイトはLCPが目に見えて改善します。残りは画像CDNやキャッシュ最適化で段階的に強化しましょう。
さらに理解を深める参考書
関連記事と相性の良い実践ガイドです。手元に置いて反復しながら進めてみてください。
![Linuxをマスターしたい人のための実践Ubuntu[第2版]](https://m.media-amazon.com/images/I/413EBjNISEL._SL500_.jpg)
この記事をシェア