dev-hpk 님의 블로그

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

Next.js는 사용자 경험과 개발자 생산성을 극대화하기 위해 설계된 React 프레임워크입니다. 그중에서도 Image 컴포넌트는 최적화된 이미지 관리를 위한 강력한 도구로, 성능 개선과 효율적인 이미지 처리를 제공합니다. 목차 1. Image 컴포넌트란? 2. Image 컴포넌트 사용법 3. Image 컴포넌트 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Image 컴포넌트란?next/image에서 제공하는 Image 컴포넌트는 브라우저와 디바이스에 따라 이미지를 최적화하고, 개발자가 별도의 설정 없이 성능을 향상할 수 있도록 설계된 컴포넌트입니다.  전통적인 HTML의 태그를 사용하는 것과 달리, Image 컴포넌트는 서버 사이드에서 자동으로 이미지 크기를 조정하고, 최적의 포..