Next Image를 사용한 이미치 최적화 및 속도 개선(feat 라이트하우스)#1

1. 속도 개선 시도 배경

: 프로젝트 결과물을 배포한 뒤, 제가 직접 들어가서 확인해봤습니다.
사용과정에서, 처음 페이지 로딩시간이 조금 길고, 어떤 페이지에 들어갈 때도 딜레이가 긴 것 같다는 생각이 들었습니다.
그래서 lighthouse를 이용해서 성능 측정을 해보니 아래와 같은 결과가 나왔습니다.
내용을 보면,몇 가지 문제가 있었고 가장 큰 문제는 이미지를 로드할 때 가장 딜레이가 길었습니다.

그래서 개선해보기 위해서 수정과정을 거쳐보았습니다.

2. Next Image 컴포넌트

: 개선 과정을 알아보기 개선의 핵심임 ,Next의 Image 컴포넌트에 대해 알아보겠습니다.

Next/Image 컴포넌트의 핵심 기능

• lazy loading
• 이미지 사이즈 최적화
• placeholder

1) lazy loading
lazy loading은 이미지를 로드하는 시점에 필요할 때까지 지연시키는 기술을 의미한다.

• Next Image에서는 자동으로 lazy loading이 적용이 된다.
• 해당 기능을 끌 수도 있는데, 그러기 위해서는 Image 컴포넌트의 priority 속성을 true로 설정하거나 ,loading 속성에 eager를 설정하면 된다.

2)이미지 사이즈 최적화
: Next Image는 디바이스 크기별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원해준다.
그리고 png,jpeg 등의 형식을 자동으로 용량이 작은 포맷인 webp로 변환해준다.

3) placeholder 제공
:placeholder는 이미지가 로드되기 전 , 영역의 높이가 0이었다가 이미지가 로드된 후 적용되는 것을 말합니다.
Next/Image의 placeholder는 빈 영역 또는 blur 이미지(리모드 이미지의 경우 base64ㄹ 인코딩된 data url)를 적용할 수 있다.

3. 코드 개선

이제 위의 next/Image 컴포넌트를 사용하여 , 개선해볼 것입니다.

개선 전 코드

<Image
  className="border-2 rounded-xl "
  src={`${imageURL}/api/image/background/${item?.C_IMAGE}`}
  alt={`${item?.C_IDX}`}
  width={270}
  height={100}
  unoptimized={true}
/>

개선 후 코드

<Image
  onClick={() => showModal(item.C_IDX)}
  className="w-[14rem] h-[12rem] border-4 rounded-2xl cursor-pointer"
  src={`${imageURL}/api/image/background/${item?.C_IMAGE}`}
  alt={`${item?.U_IDX}`}
  width={50}
  height={100}
/>

개선 과정에는 크게 고쳐야할 문제는 없었습니다.
개선 전 코드의 문제는 ' unoptimized={true} ' 였습니다.
이 옵션은 위에서 설명된 next/Image가 자동으로 적용시켜주는 기능을 OFF시켜주는 옵션이였습니다.
이전에 외부 이미지 사용 문제로 , 위 옵션을 넣어주면 가능하다기에 지금까지 넣어두고 사용해왔던 것이였습니다.

간단한 수정이였지만, 해당 옵션이 들어간 모든next/Image에 위 옵션을 없애주고 속도 측정을 해보니 , 어느 정도 개선이 된 것을 확인할 수 있었습니다.

개선 후 속도 측정

-> 점수가 70~80까지 왔다갔다합니다.

3.느낀점

간단한 옵션 하나 변경으로 속도를 크게 끌어올릴 수 있었습니다.
하지만 이 옵션은 이전에 처음 외부 이미지를 불러서 사용할 때 , 오류가 나서 어떻게 해야될 지 몰라서 찾다가 사용한 옵션이였는데, 이 때 설명에서 좋은 방법은 아니라고 적혀 있었던 것 같습니다.
그 당시에는 당장의 오류 해결이 목표였기에 그대로 넘어갔었습니다.
그리고 지금에 와서 수정하게 되었습니다.
앞으로는 어떤 오류가 발생하면 좀 더 디테일하게 방법을 알아보고 , 최대한 우회적인 방법이 아닌 조금 더 정확한 방법을 생각해보고 찾아보고 적용하도록 노력해야겠습니다.

(이제 남은 아래의 문제들을 개선시켜보기위해 추가적으로 수정해나가보겠습니다.)

참고 링크
[블로그 Image 소개]https://fe-developers.kakaoent.com/2022/220714-next-image/
[next/Image 공식문서]https://nextjs.org/docs/pages/api-reference/components/image