이미지 갤러리 최적화

해당 챕터에서 배우는 내용

이미지 지연 로딩
- Intersection Observer API가 아닌 npm에 등록되어 있는 라이브러리를 이용해 최적화를 진행합니다.
레이아웃 이동 피하기
- 화면상의 요소 변화로 인해 레이아웃이 밀리는 현상을 방지합니다.
병목 코드 최적화
- 메모이제이션 방법을 사용해 성능 문제를 해결해봅니다.

레이아웃 이동 피하기

이미지 갤러리에서는 이미지를 한번에 여러개를 불러옵니다. Performance 탭을 본다면 레이아웃이 렌더링된 순서대로 끊겨서 보이는 것을 알 수 있습니다.

레이아웃을 이동시키는 원인은 보통 다음과 같습니다.

사이즈가 미리 정의되지 않은 이미지 요소
사이즈가 미리 정의되지 않은 광고 요소
동적으로 삽입된 콘텐츠
웹 폰트(FOUT, FOIT 현상)

과거에는 다음과 같은 방법으로 방지했습니다.

const Component = () => {
  return (
    <div class="wrapper">
      <img class="image" src="..." />
    </div>
  )
}

.wrapper {
  position: relative;
  width: 160px;
  padding-top: 56.25% /* 16:9 비율 */
}

.image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

이렇게 할 경우 wrapper의 너비 160px의 56.25%만큼 높이 90px으로 설정됩니다. 이 상태에서 이미지를 absolute로 넣어줄 경우 동일하게 맞춰집니다.

이후 매번 padding-top과 같이 비율을 고려하여 %를 계산하기 어려웠기에 aspect-ratio라는 속성이 등장하였습니다.

.wrapper {
  width: 160px;
  aspect-ratio: 16 / 9;
}

.image {
  width: 100%;
  height: 100%;
}

이렇게 할 경우 매번 자식에 absolute를 적용할 필요도 없습니다. 하지만 호환성 문제가 있을수도 있어 잘 체크한 후 적용해야 합니다.

이미지 지연 로딩

이번에는 Intersection Observer API가 아닌 react-lazyload라는 라이브러리를 이용하여 빠르게 지연 로딩을 적용해봅니다.

$ npm install --save react-lazyload

사용법은 다음과 같이 감싸주기만 하면 됩니다.

import LazyLoad from 'react-lazyload';

function Component(){
  return (
    <div>
      <LazyLoad>
       <img src="이미지 주소" />
      </LazyLoad>
    </div>
  )
}

만약 offset=n 설정을 해준다면 보이기 n전 부터 해당 이미지를 로드하기 시작합니다.

return (
  <ImageWrap>
    <LazyLoad offset={1000}>
      <Image src={urls.small} alt={alt} />
    </LazyLoad>
  </ImageWrap>
);

병목 코드 최적화

현재 웹 페이지에서 모달이 띄워졌을 때 배경 색깔을 모달 내에 있는 이미지 색상의 평균값을 구해 보여주고 있습니다.

export function getAverageColorOfImage(imgElement) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext && canvas.getContext('2d');
  const averageColor = {
    r: 0,
    g: 0,
    b: 0,
  };

  if (!context) {
    return averageColor;
  }

  // 평균 값을 구하는 로직

  return averageColor;
}

현재는 위 코드와 같이 새로운 캔버스를 그리고 각 픽셀의 색상 값을 모두 더해 배경색을 그리고 있습니다. 하나씩 더해서 평균을 내고 있기 떄문에 느린 것입니다.

처음으로 개선이 가능한 부분은 바로 cache를 이용하는 것입니다.

const cache = new Map();

export function getAverageColorOfImage(imgElement) {
  if (cache.has(imgElement.src)) {
    return cache.get(imgElement.src);
  }
  
  // 평균 값을 구하는 로직

  cache.set(imgElement.src, averageColor);
}

이렇게 할 경우 처음과 달리 두번째 이후 불러올 때부터는 캐시를 통해 이미지를 불러오기 전보다 빠르게 로드할 수 있습니다.

두 번째로 개선 가능한 부분은 함수의 로직을 직접 수정하는 것입니다.

현재 모든 이미지 픽셀수만큼 가져와서 계산을 하고있습니다. 만약 이런 배경을 그리기 위해서 이미지 사이즈를 줄일수 있다면 반복되는 코드를 줄임으로써 함수의 진행속도가 빨라지게 됩니다.

Last modified: 10 November 2024