[TIL] Image 컴포넌트 최적화

yeseul·2024년 8월 30일

<TIL>

목록 보기

38/43

* 이미지 컴포넌트 최적화하려는 이유

✔️LCP 최적화 필요성

→ 페이지 로드 지연에 대한 유저 피드백 수집
→ 상품 썸네일이 LCP 요소로 지정되어 상세페이지 로딩 시간 증가, 성능 저하 발생 파악

✔️썸네일 최적화

-> priority 속성 추가
-> Sharp 라이브러리 설치
-> Image CDN
-> Cloudinary 이용한 이미지 포맷 및 Size 조정
-> Cloudinary URL을 사용하여 Supabase에 저장된 썸네일 이미지를 Cloudinary를 통해 WebP 형식으로 변환

✔️전 후 비교

* 최적화 과정

1. 최적화 전 lighthouse 성능측정

Performance : 66
Largest Contentful Paint : 7.0s
Total Blocking Time : 250ms

2. Sharp 라이브러리 설치 + 썸네일 Image 컴포넌트에 Priority 추가

Sharp 라이브러리
→ Next.js에서 이미지 최적화를 최적의 성능으로 수행하려면 Sharp 라이브러리를 설치하는 것이 좋다. Sharp가 설치되어 있지 않으면, Next.js는 Sharp가 없는 환경에서도 기본적인 이미지 최적화를 제공하기 위해 자동으로 Squoosh를 사용하여 이미지 최적화를 수행하지만, 성능 면에서는 Sharp만큼 빠르지 않다.
- 저전력, 저메모리 사용 :
  -> Sharp는 기존의 이미지 처리 라이브러리들보다 적은 메모리와 CPU를 사용하여 이미지를 처리한다. 이는 서버 측에서 다수의 이미지를 동시에 처리할 때 효율적이다.
- 고성능 이미지 처리 :
  -> Node.js 환경에서 사용되는 이미지 처리 라이브러리로, 이미지의 크기 조정, 형식 변환, 압축 등의 작업을 매우 빠르고 효율적으로 수행한다.
- JPEG, PNG, WebP 등의 이미지 형식 지원
Priority 속성 적용
→ 상품 상세페이지 로드 시, 썸네일이 우선적으로 로드되도록 구현

Performance : 73
Largest Contentful Paint : 5.7s
Total Blocking Time : 150ms

3. Image CDN - Cloudinary, WebP 로 변경

CDN 이란?
: Content Delivery Network
-> 원본 데이터를 가지고 있는 오리진 서버와 사용자간의 물리적인 거리와 상관없이 빠르게 컨텐츠를 받아볼 수 있게 해주는 네트워크 시스템 또는 서버
-> CDN은 웹사이트의 콘텐츠(이미지, 동영상, CSS 파일, JavaScript 파일 등)를 여러 서버에 캐싱해두고, 사용자가 요청할 때 가장 가까운 서버에서 콘텐츠를 제공함으로써 로딩 시간을 단축시킨다.
Image CDN 이란?
-> 업로드되어 있는 이미지를 사용자 요청(URL API)에 따라 변형(resize, format, quality 등)하여 전달해주는 서버 및 서비스
- Image CDN의 주요 기능:
  - 이미지 압축 및 최적화: 이미지를 자동으로 압축하여 파일 크기를 줄이고, 품질을 유지하면서 로딩 속도를 향상.
  - 형식 변환: 브라우저나 기기에 따라 최적의 이미지 형식(예: WebP, JPEG)을 제공하여 성능을 극대화
  - 리사이징 및 크롭: 다양한 기기와 해상도에 맞게 이미지를 동적으로 리사이징하거나 크롭
  - 캐싱: 자주 요청되는 이미지를 캐싱하여 서버 부하를 줄이고 응답시간 단축

✔️ Cloudinary

1. URL Transformation 방식 (image/upload)
// 아래 Transformation URL 의 초록 부분이 이미지를 어떻게 변형할 지에 대한 쿼리
https://res.cloudinary.com/ID/image/upload/`w_500,h_200,c_fill,q_auto`/v1706662101/cat1_s8bmgr.jpg`
이미 Cloudinary에 업로드된 이미지에 대해 변환을 수행

2. Fetch 방식 (image/fetch)
https://res.cloudinary.com/ID/image/fetch/f_webp/${product.thumbnail_url};
Cloudinary에 업로드되지 않은, 외부에 있는 이미지를 가져와서 변환.
이 방식의 장점은 이미지를 Cloudinary에 미리 업로드할 필요 없이 외부에서 바로 가져와서 변환할 수 있다는 것이다.
위 URL에서 fetch/f_webp는 Cloudinary가 외부 URL로부터 이미지를 가져와서 WebP 형식으로 변환해 주는 역할.

이유: 왜 fetch 방식으로 사용했는지.

외부 이미지 소스 사용: Supabase에 저장된 이미지를 Cloudinary에 따로 업로드하지 않고, 외부 URL로부터 바로 가져와서 처리할 수 있기 때문에 더 간편하다.
실시간 변환: Supabase의 이미지 URL이 변할 가능성이 있을 때, 실시간으로 해당 이미지를 변환해 제공할 수 있다. 즉, Supabase에 저장된 원본 이미지를 변경할 필요 없이, Cloudinary를 통해 다양한 형식이나 크기로 변환된 이미지를 제공할 수 있다.
저장소 관리의 단순화: 이미지를 Cloudinary에 미리 업로드하고 관리하는 것보다, Supabase에서 이미지를 관리하면서 필요할 때만 Cloudinary로 가져와 변환해 사용할 수 있다.