LCP는 가장 큰 콘텐츠가 화면에 렌더링 되는 시간을 측정한 지표입니다. lighthouse로 측정한 결과 LCP(이미지)가 느림으로 측정되었습니다. LCP가 낮게 측정되었다는 것은 화면에 콘텐츠가 늦게 렌더링 된다는 얘기입니다. 이는 사용자 경험(UX)에 큰 영향을 줄 수 있고 이탈로까지 이어질 수 있습니다. Next.js에서 제공하는 Image 컴포넌트를 사용해 해당 이슈를 해결해 보겠습니다. 이슈를 해결하기 전에 html img 태그를 사용했을 때 결과를 먼저 측정해 보겠습니다. img 태그 (제약 없음, Slow 4G, 3G)50kB의 작은 용량임에도 이미지를 내려받는데 4G 환경에서는 3.5초, 3G 환경에서는 12초가 소요됩니다. 이는 사용자에게 부정적인 경험을 줄 수 있습니다.이제 Next..