next 이미지 최적화하기

오늘은 cloudy를 개발하면서 작성해 두었던 노션을 바탕으로 이미지 최적화 시도 경험을 작성해보려고 한다!

 

우선 당연히 이미지는 img 태그를 사용했었다. 와 근데 렌더링 속도가 너무 느렸다. 진짜 농담이 아니라 드드드득.. 한 2초 정도 걸렸던 것 같다. 

<img src={'/img/learning/1.png'} alt={item.title} className={styles.img} />

 

그래서 lighthouse를 통해서 분석해 봤는데

 

두둥,, 저 빨간색 글씨인 Largest Contentful Paint를 보면 약 8.3초가 걸린다고 나와있다. 너무 느리게 측정된 이유는 public안에 있는 이미지를 가져와서 그렇고 cdn이 설정된 이미지를 가져왔을 때는 2.4초로 측정되었다. 그래도 빨간색 글씨로 표시되었다!

 

LCP(Largest Contentful Paint)?

로딩 성능을 측정하는 지표로서, 페이지가 처음으로 로드를 시작한 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고한다

 

그래서 LCP와 속도를 줄이기 위해서 2가지 방법을 도입했다!

1. next/image 사용

2. sharp 사용

 

1. next/image 사용

이미지의 포맷 형식에는 jpg, png, webpg avif 등이 있다. 특히 webp 고품질의 이미지를 표현하면서도 png, jpg 등 기존의 포맷보다 파일의 크기가 작다. avif는 webp와 비교했을 때 20% 더 높은 압축률을 보여준다.

참고: next/image의 <Image>를 사용하연 Next가 알아서 webp 형식으로 이미지를 최적화해 준다.

 

하지만 avif를 사용하고 싶다면 next.config.js에서 따로 설정을 해줘야 한다.

  images: {
    formats: ['image/avif', 'image/webp'],
  },

 

모든 이미지가 avif 형식의 이미지로 불러와지고, 해당 설정이 없으면 모든 이미지를 알아서 webp 형식의 이미지로 불러온다.

오! LCP도 줄고 속도도 빨라지면서 총점수가 많이 올랐다.

2. sharp 사용

기본적으로 제공하는 squoosh와 비교하여 sharp를 사용하게 되면, webp 포맷으로 최적화할 때는 3~4배, avif 포맷으로 최적화할 때는 3~6배 정도의 성능 개선이 있다.

sharp 라이브러리를 설치하고 나면 별도로 설정할 필요 없이 next에서 자동으로 이미지를 최적화한다.

 

speed가 많이 줄어들었다!!

 

최적화 후

이런 수치적인 결과 말고도 정말 속도가 엄청나게 빨라졌음을 느꼈다. 지금은 두 가지의 방법만 사용했지만 좀 더 공부하다 보면 또 다른 방법으로 최적화시킬 방법이 있을 것 같다. 프로젝트 구현에만 집중했던 저번 프로젝트들과 달리 이번 프로젝트에서는 최적화에 대해서 고민하고 직접 적용해 볼 수 있어서 정말 의미 있었던 것 같다.