[Revisit Project] 압축을 통해 이미지 최적화 해보기

1. 고민의 시작

코드 스플리팅으로 성능 개선을 이뤄냈지만 아직 더 개선해야하는 부분들이 보였다. 첫 번째로 Largest Contentful Paint에서 빨간불이 켜져 이 부분을 먼저 해결해보기로하였다.

2. 고민 해결의 과정

LCP(Largest Contentful Paint)는 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타낸다. 이와 관련하여 개선점을 말해준다.

확인해보니 이미지에 대한 이슈였다.

구글 공식 문서를 통해 확인해보면 3가지 방법을 제시한다. 페이로드 크기를 줄이려면 

 

1. 필요할 때 부르는 Lazy 방식을 쓴다.

2. 이미지 같은 소스들을 압축한다. 혹은 최적화한다.

3. 자주는 것은 캐싱해둔다.

 

아무래도 고화질 이미지가 업로드 된다는 것을 이미 알고 있기에 먼저 가장 시도한 것은 압축이었다. 

 

가장 대중적인 방법은 라이브러리 사용이었다. 나는 browser-image-compression을 사용했다. 다른 라이브러리도 있었으나 일단 가벼웠고 최근에 업데이트가 되었고 타입스크립트를 지원해서 선정했다.

 

 const handleImg = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    console.log(file);
    const options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 250,
      useWebWorker: true,
    };
    if (!file) return;
    const compressedFile = await imageCompression(file, options);
    console.log(compressedFile);
    const imgUrls = await handleFileSelect(compressedFile);
    if (!imgUrls) return;
    setPreviewImg(imgUrls?.previewUrl);
    setImgUrl(imgUrls?.url);
    event.target.value = '';
  };

 

파이어 베이스에 가기 전에 옵션값만 주면 된다.

 

위에는 압축 전 아래는 압축 후로 사이즈가 확연하게 차이가 난다.

3. 적용

여러 값을 maxWidth로 주면서 했는데 실제 보여지는 img 사이즈에 가깝게 해야 경고 문구가 사라지는 것을 확인했다. 그러나 이상하게도 성능 개선은 이루어지지 않았다.

 

압축 전

 이상하게도 성능이 떨어졌다.

압축 후

그래도 파이어베이스에서 오던 URL 카테고리 이미지 목록이 사라졌다.