[Next.js]Next.js의 ASSET 최적화 했을 때와 안했을 때의 time difference

1. Asset 최적화를 했을 때 

import Image from "next/image";

 

<Image

              className="rounded-sm object-scale-down"

              width={80}

              height={80}

              src={product.images}

              alt={product.title}

            />

Nextconfig 내 remotePatterns등의 설정 

/** @type {import('next').NextConfig} */

const nextConfig = {

  reactStrictMode: false,

  images: {

    remotePatterns: [

      {

        protocol: "https",

        hostname: "fakestoreapi.com",

        pathname: "/**",

      },

    ],

    formats: ["image/avif", "image/webp"],

  },

};

export default nextConfig;

최초 캐시가 없는 상태에서 20~40 밀리초를 보여준다. 

 

 

2. Asset 최적화를 하지 않았을 때 - 그냥 평상 img태그 사용

차이가 생각보다 꽤 난다.

실제 사용자 입장에서는 눈으로 가시적으로 보여지는 차이가 어느정도 있다.