이미지 처리 방식에서 Lazy load & Pre load

Lazy load & Pre load 간단 요약

Lazy load는 페이지를 읽는 시점에 당장 빠르게 보여주지 않아도 되는 이미지의 로드를 추후에 하는 기능이며 Pre load는 이미지를 미리 다운로드받아 클라이언트가 필요할 때 빠르게 이미지를 보여주는 기능이다.

 

Lazy load

1. 콘텐츠 전달 최적화

2. 사용자가 처음 열 때 웹 사이트 일부만 다운로드 하여 사용자에게 콘텐츠 더 빨리 제공

3. 콘텐츠가 지속적으로 사용자에게 공급되어 사용자가 웹사이트를 이탈할 확률을 늦춤.

4. 사용자가 한 번에 필요로 하는 경우에만 콘텐츠를 불러 리소스 비용을 낮춤.

 

Lazy load의 사용은 웹페이지의 하단 쪽에 새로운 리소스가 있다면 굳이 웹페이지가 시작될 때 보여주게 되면 렌더링 시간이 길어질 것이다. 그래서 아래 이미지는 나중에 사용자가 접근하게 되면 그 때 로드될 수 있게 한다.

 

Pre load

1. 특정 리소스를 빠르게 로딩하도록 우선순위를 부여

2. 렌더링 시간을 줄여 사용자에게 콘텐츠를 빠르게 제공

 

Pre load 실습

import { useEffect, useRef, useState } from "react";

export default function ImagePreloadPage() {
  // 오래 걸리는 이미지에다가 나중에 바로 로드하게끔 미리 프리로드해놓자
  const [loaded, setLoaded] = useState(false);
  const [imgTag, setImgTag] = useState<HTMLImageElement>();
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const img = new Image();
    img.src =
      "https://cdn.notefolio.net/img/d7/5b/d75bf02e2a35f76dba6ed5eeccde793c45d74edd83df838e31290603ceb5c5c9_v1.jpg";
    img.onload = () => {
      setImgTag(img);
    };
  }, []);

  const onClickImagePreLoad = () => {
    if (imgTag) divRef.current?.appendChild(imgTag);
  };

  const onClickImageLoad = () => {
    setLoaded(true);
  };

  return (
    <div>
      ================== 이미지 프리로드 ==================
      <div ref={divRef}></div>
      <button onClick={onClickImagePreLoad}>이미지 프리로드</button>
      ================== 이미지 일반로드 ==================
      {loaded && (
        <img src="https://cdn.notefolio.net/img/d7/5b/d75bf02e2a35f76dba6ed5eeccde793c45d74edd83df838e31290603ceb5c5c9_v1.jpg" />
      )}
      <button onClick={onClickImageLoad}>이미지 일반로드</button>
    </div>
  );
}

Preload는 useEffect를 활용하여 이미지 주소를 설정하고 이미지를 로드하게 한다. 그렇게 되면 이미지 프리로드 버튼을 눌렀을 때 이미지가 보여지게 되는데 이미지 일반로드에 비해서 빠르게 이미지를 볼 수 있다. 용량이 적은 경우에는 보여지는 시간의 차이가 없겠지만 이미지 용량이 커지면 커질수록 프리로드와 일반로드의 차이는 커질 수 밖에 없다.

 

 

 

*참고한 글

https://scarlett-dev.gitbook.io/all/it/lazy-loading

Lazy Loading 이란? - hello, scarlett ! enjoy your life