성능 최적화 (1)

김동하·2024년 1월 13일

이미지 레이지 로딩

이미지와 동영상이 랜딩 화면에 나오는 웹페이지가 있다고 가정하자. 웹 브라우저가 이미지와 동영상을 어떻게 가져오는지 먼저 살펴보면

용량이 큰 영상을 펜딩걸고 이미지를 먼저 다운로드 받는 것을 확인할 수 있다. 즉, 이미지가 다 다운 받을 때까지 사용자는 영상이 아닌 빈 화면을 보는 것이다.

문제가 해결하기 위해서는 2가지 방법이 있다.

이미지를 더 빨리 다운로드 받는다
이미지는 당장 보여줘야할 필요가 없으므로 나중에 다운로드 되게 한다.

첫 번째 방법은 근본적인 해결 방법이 아니므로 두 번째 방법, 즉 lazy loading으로 해결할 수 있다. 그렇다면 스크롤이 이미지에 닿는 순간에 이미지를 불러오도록 수정해보자.

  const option = {};
    const cb = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    };
    const observer = new IntersectionObserver(cb, option);
    observer.observe(imgRef.current);

... 중략

<img data-src={src} />

IntersectionObserver와 data-set을 활용하여 뷰포트 내 이미지 요소가 들어오면 이미지를 로드하도록 한다.

비디오를 먼저 다운로드 받고 그 뒤 스크롤을 내리면 이미지를 다운 받는 것을 확인할 수 있다.

이미지 사이즈 최적화

이번에는 이미지를 빠르게 다운 받기 위해 사이즈를 줄여보자.

webp는 png, jpeg보다 용량이 낮아 이미지 사이즈를 고려한다면 좋은 선택지다(그만큼 화질이 깨질 순 있음) 하지만, 꽤 최신 확장자이기에 브라우저가 이를 인식할 수 있는지에 분기처리를 해줘야 한다.

   <picture>
        <source srcset="logo.webp" type="image/webp" />
        <img data-src={props.image} ref={imgRef} />
   </picture>

이런 식으로 picture 태그를 활용하여 wepb를 먼저 쓸 수 있는지 확인하고 없다면 기존의 src를 사용하는 식으로 webp를 로드할 수 있다,

동영상 최적화

동영상도 동일하게 webm이란 효율 좋은 확장자가 있다. 이미지와 동일하게 브라우저가 webm을 지원하지 않을 수도 있으니, source 태그를 활용하여 분기를 해준다.

    <div className="absolute h-screen w-full left-1/2">
        <video
          src={video}
          className="absolute translateX--1/2 h-screen max-w-none min-w-screen -z-1 bg-black min-w-full min-h-screen"
          autoPlay
          loop
          muted
        />
        <source src="something.webm" type="video/webm" />
        <source src="something.mp4" type="video/mp4" />
      </div>