[트러블 슈팅] Next.js에서 이미지 최적화로 FCP 및 LCP 성능 개선하기: 이미지 압축을 통한 로딩 속도 향상

 

 

lighthouse를 통해 성능을 측정했을 때 이미지 파일이 커서 초기 로딩 성능이 저하되는 문제가 있어서 이미지 파일을 압축해 로딩 속도를 개선한 내용을 공유하려고 합니다.

 

발생한 오류 🔥

성능 측정

 

이미지 사이즈가 큰 콘텐츠를 렌더링 할 때 `Lighthouse`를 통해 성능을 측정해 보니 `FCP`와 `LCP`가 지연돼 페이지의 초기 렌더링이 느리다는 문제를 확인했습니다.

 

성능 지표

 

`FCP (First Contentful Paint)`: 사용자가 처음 콘텐츠를 확인할 수 있는 시점

`LCP (Largest Contentful Paint)`: 페이지에서 가장 큰 요소가 표시되는 시점

 

❗이 두 지표는 사용자가 페이지를 빠르게 인식할 수 있도록 하는 중요한 요소입니다.

 

해결 과정 🔎

Next.js의 `<Image />`는 최적화된 이미지 렌더링 기능을 제공하지만 원본 이미지 파일이 큰 경우 렌더링 시 브라우저가 많은 데이터를 처리해야 하기 때문에 로딩 시간이 길어질 수 있습니다.

 

해결 방법 ✨

이미지 압축

 

 

Online Image Сompressor

 

이미지 압축기를 통해 용량을 줄어도 시각적인 품질을 유지할 수 있도록 했습니다.

 

이미지 압축

 

기존 `1.6MB` 대비 `-65%` 이미지 용량을 감소 시켰습니다!

 

 

성능 개선 결과

 

이미지 용량을 줄인 후 Lighthouse로 성능을 재측정한 결과, `FCP``LCP`지표가 모두 개선이 되었습니다. 

이미지 파일의 크기를 줄이면서 로딩 시간도 함께 줄어들어 사용자 경험을 향상할 수 있었습니다!

개선

 

 

 

 

회고 🧐

이번 최적화를 통해 `FCP`와 `LCP` 지표를 개선시키면서 이미지 용량을 관리해 성능을 향상시키는 것이 중요함을 깨닫게 되었습니다!

 

사실 그렇게 큰 변화는 아니지만 이런 변화들이 쌓인다면 큰 차이를 만들 수 있다고 생각합니다!