성능 최적화를 위한 방법

한 페이지에 많은 양의 사진 또는 비디오를 가져와야 할때가 있습니다.

요즘 만들어지는 사진들은 용량이 크기 때문에 화면을 처음 로드할 때 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있습니다.

심지어 이렇게 로드되는 많은 사진들이 한 화면에 전부 보이는 일은 거의 없죠. 그래서 페이지네이션을 하거나 필요한 데이터만 짤라서 백에서 보내주거나, 또는 프론트에서 짤라서 가져와야 합니다.

화면에서 볼 수 있는 사진의 양은 한정적이기 때문에 로드해야 되는 사진의 개수는 눈에 띄게 줄어들게 될 것입니다.

결과적으로 처음 로드할 때 화면에 보여지는 이미지들만 로드를 해주고 나머지 사진들은 로드되는 것을 지연시켰다가 스크롤을 내리면서 나머지 사진들이 보이게 될 때 추가적인 로드를 해준다면 사용자에게 더 빠른 속도로 화면을 보여줄 수 있게 됩니다.

실제 코드를 기록하지는 못하지만, 간단한 예시 코드를 작성해 보겠습니다.

예시

'로딩' 속성을 지원하지 않는 브라우저(특히 이전 브라우저)의 경우 Intersection Observer API를 사용하여 동영상에 대한 지연 로딩을 구현할 수 있습니다. Intersection Observer API를 사용하면 요소가 뷰포트에 들어오거나 나가는 시점을 추적할 수 있으며, 이를 사용하여 비디오가 가시 영역 근처에 있을 때 비디오 로드를 트리거할 수 있습니다.

다음은 Intersection Observer API를 React와 함께 사용하는 방법에 대한 예입니다.

import React, { useEffect, useRef } from 'react';

const LazyVideo = ({ src, width, height }) => {
  const videoRef = useRef();

  useEffect(() => {
    const videoElement = videoRef.current;
    const options = {
      root: null, // Use the viewport as the root
      rootMargin: '0px', // Margin around the root
      threshold: 0.1, // When 10% of the video is visible, load it
    };

    const callback = (entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // Load the video when it enters the viewport
          videoElement.load();
          observer.unobserve(videoElement); // Stop observing once loaded
        }
      });
    };

    const observer = new IntersectionObserver(callback, options);
    observer.observe(videoElement);

    return () => {
      observer.disconnect(); // Clean up the observer when the component unmounts
    };
  }, []);

  return (
    <video
      ref={videoRef}
      src={src}
      width={width}
      height={height}
      controls
    ></video>
  );
};

export default LazyVideo;

Intersection Observer를 사용하여 비디오가 뷰포트에 들어갈 때 비디오를 로드하는 LazyVideo 구성 요소를 만듭니다. 'load' 메소드는 로드를 시작하기 위해 비디오 요소에서 호출됩니다.

지연 로드하려는 각 비디오에 대해 src, width 및 height 속성에 전달하여 애플리케이션에서 이 LazyVideo 구성 요소를 사용할 수 있습니다.

'loading' 속성과 Intersection Observer API를 사용하여 비디오에 대한 지연 로딩을 구현하면 특히 많은 수의 제품이나 미디어 자산을 처리할 때 웹 애플리케이션의 성능을 크게 향상시킬 수 있습니다.