오픈마켓 프로젝트) 이미지 최적화

1. 라이트하우스 성능 분석

- 라이트 하우스 성능 분석을 했더니 이미지 관련 최적화를 할 필요성을 느꼈다.

- 이미지의 렌더링된 크기는 377*377 이었는데 실제 고유 크기는 1500px*1500px 이 넘었다. 

(이미지 요소를 클릭해서 개발자 도구에서 확인해보면 아래와 같이 나온다)

- 예제 - 
렌더링된 크기: 120 × 120 px
렌더링된 가로세로 비율: 1∶1
고유 크기: 1200 × 1200 px
기본 가로세로 비율: 1∶1
파일 크기: 175 kB
현재 소스:
https://images.unsplash.com/photo-1542435503-956c469947f6?w=1200&h=1200&q=80&fm=jpg&fit=crop

- 이 엄청 큰 사진(리소스) 들을 몇십개 불러온다고 생각해보자. 성능에 당연히 문제가 갈것이다.

 

상품 불러오기 1페이지 이미지 최적화적용 전에 완료시간(리소스의 다운로드 및 로딩이 완료된 시간)은 846ms 였다.

그리고 이미지 확장자도 png, jpeg 였다. 최적화 하기 위해서는 이미지 압축률이 좋은 webp 로 변경해야한다.(압축률이 좋다는 것은 같은 이미지라도 더 적은 용량을 차지한다는 것)

 

2. 이미지 CDN 사용

- 나는 외부 API 를 통해서 image url 을 받아오기에 image CDN 을 사용하려고 한다.

아래 Cloudinary 이미지 CDN 을 사용했다. 

https://console.cloudinary.com/console/c-739be1e3bd202569e932ae86ae213f

Cloudinary - Management Console Login

이미지 태그에 CDN 링크를 넣어주면 된다. 

https://res.cloudinary.com/나의 cloud 이름/image/fetch/c_scale,w_1000/f_auto/이미지 원본사진 링크

 <S.ProductImgBox>
          <img
            src={`https://res.cloudinary.com/dgwitjjjd/image/fetch/c_scale,w_1000/f_auto/q_auto/${productDetailData?.image}
            `}
            alt="상품 사진"
          />
        </S.ProductImgBox>

 

회원가입을 한 후에 

 

이미지 CDN 사용 후 로딩 완료시간이 591ms 로 846ms -> 591ms 로 줄일 수 있었다.