Next.js Image
Next.js の Image コンポーネントはデフォルトで Lazy loading（画像が見える位置にスクロールされたら表示されるよう）になってますが、priority を true にするとそれを無効として優先的に表示できます。
なので、ファーストビューの画像は priority を true として優先的に表示し、その他の画像は placeholder を blur として画像を読み込んでるときはぼかし画像を表示するのが一般的です。その際に src が動的画像なら plaiceholder ライブラリを使って blurDataURL も指定する必要があります。
この記事が気に入ったらサポートをしてみませんか？