React LCP 성능 개선하기

 

React 이미지 최적화를 통한 성능 개선하기

 

이전 글에서 이미지 최적화를 통한 성능 개선을 시도했지만 결과적으로 LCP시간이 증가하게 되었다. 그래서 이번에는 배경 이미지가 로딩되기 전에 기본 배경으로 하고 로딩되는 동안 다른 tweet 화면은 보여주도록 하는 코드를 수정해 보았다. 

 

const [isImageLoaded, setIsImageLoaded] = useState<boolean>(false);

  useEffect(() => {
    // 이미지가 로드될 때까지 상태를 false로 유지합니다.
    setIsImageLoaded(false);

    // 이미지 로드를 시도합니다.
    const image = new Image();
    image.onload = () => {
      // 이미지 로드가 완료되면 상태를 true로 업데이트합니다.
      setIsImageLoaded(true);
    };
    image.src = "http://localhost:8080/assets/1.1.jpg";
  }, []);

  // 이미지 로드 상태에 따라 배경 스타일을 동적으로 설정합니다.
  const bgImageStyle = isImageLoaded
    ? {
        backgroundImage: `url(http://localhost:8080/assets/1.1.jpg)`,
        backgroundSize: "cover", // 배경 이미지가 로드된 경우에만 추가합니다.
        width: "100vw",
        height: "100vh",
      }
    : {
        backgroundColor: "#0a1527", // 이미지 로드 전에는 기본 배경색을 사용합니다.
        width: "100vw",
        height: "100vh",
      };

  return (
    <>
      <div className="flex " style={bgImageStyle}>

 

배경이미지 로딩 상태를 나타내는 isImageLoaded state를 만들고 로딩되기 전에는 기본 배경을 로딩된 후에는 이미지를 보여주는 코드로 변경하니 배경이미지가 로딩될때까지 기다릴 필요없이 필요한 화면을 빠르게 보여졌다.

 

즉 이미지 로딩 전에 배경색을 설정하여 사용자에게 빠른 초기화면 표시를 제공했고 이미지 로딩후에 배경 이미지를 교체하였다. 사용자가 페이지를 방문했을때 모든 자원을 로드하는 대신 필요한 자원을 먼저 로드되어 LCP 시간과 성능이 향상되었다.