Next で画像の初期表示を早める方法はありますか？

Question

実現したいこと

以下の様に Top 画面の背景画像を設定していますが、こちらの初期表示が遅いです。
2回目からはキャッシュが効くため早く表示されますが、初期表示が遅いという問題があります。
画像サイズは 200KB ほどになります。 top ページということもあり最初にアクセスされるからか他の画像よりも読み込みに時間がかかっている？様に見えます。

それが原因であれば top ページの画像の読み込みを早くしたいというケースは多そうなので何か方法がありそうですが、良いものが見つからずこの辺り詳しい方ご教示いただけますと非常に助かります。

export default function Home() {
  return (
      <Image
        src="/top_bg.jpeg"
        alt="top_bg"
        className=""
        layout="fill"
        objectFit="cover"
      />

---------------以下追記です------------
追加で以下も試しましたが読み込みは変わらずでした。

export default function Home() {
  return (
      <Image
        src="/top_bg.jpeg"
        alt="top_bg"
        className=""
        layout="fill"
        objectFit="cover"
        priority={true}
      />

全体を載せると以下の様にしていて一部 framer-motion を transition={{ duration: 1 }} で使っています。一応画像の方には関係ない認識ですが載せておきます。画像の表示は duration 1 の Linkより遅いです。

<main className={`${inter.className}`}>
      <Image
        src="/top_bg.jpeg"
        alt="top_bg"
        className=""
        layout="fill"
        objectFit="cover"
        priority={true}
      />
      <motion.div
        initial={{ opacity: 0, scale: 1 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 1 }}
      >
        <div className="flex justify-center absolute top-1/2 w-full">
          <Link
            href="/test"            
          >
            link
          </Link>
        </div>
      </motion.div>
    </main>

Comments

[miyabi_pudding]

> 初期表示が遅いという問題

どの環境で遅いのか、も記載した方がいいかと思います。
開発環境にて、localhost:3000 上でなのか、
それとも、ビルド後、どこかのサーバーに上げた際に、
ネットワーク上での表示が遅いのかなどです。

また、何ミリ秒くらいかかっているのか、も何かしろの計測を行い、記載したほうがいいかと。

Answer 1

next/image の Image コンポーネントには priority Prop があり、デフォルト値は false (つまり遅延読み込みされる)です。

eager に画像を読み込む場合には、priority を true に設定する必要があります。

https://nextjs.org/docs/pages/api-reference/components/image#priority

Comments

[Hayato1201]

ご回答ありがとうございます。 追記に記載しましたがpriority={true}を追加しても状況変わりませんでした。何かこちらの認識違いでなければ何が問題ですかね。。。

[honey32]

すみません、 priority 以外の原因は思いつかないので、これ以上はわからないです。お力になれずすみません。

ただ、「他の画像よりも読み込みに時間がかかっている」だけでは、いまいち起こっていることがハッキリしないので、もっと詳しく問題点を洗い出して提示するほうが良いと思います。

他のどなたかが良い回答をするにも必要不可欠になると思います。

- 実際にダウンロードされる画像のサイズ（バイト数）はどうか？
- ソースコードに含めた画像そのままでなく、適宜最適化してサイズを圧縮したものをダウンロードしている可能性がある
- DevTools の Network タブを使って、画像ファイルのダウンロード情報を確認する
- DevTools の Elements タブを使って、実際に描画されている img タグの様子 (src とか srcset は 手動で指定した値そのままではなく、next/image が自動で変換します)
- 「ほかの画像よりも遅い」とは考えられない
- どう考えても priority=true な画像よりも先に priority=false な画像が読み込まれるワケがない
- これも、DevTools の Network, Elements で確認できる

"Lighthouse" というツールを使えば、ある程度キレイに問題点を切り分けて指摘してくれます。