느린 네트워크 환경에서 PhotoSwipe 이미지 로딩 속도 개선

상품 페이지에서 사용자가 상품 이미지를 클릭하면, PhotoSwipe 라이브러리를 통해 큰 사이즈의 이미지가 원본 크기로 표시된다. 네트워크 속도가 빠를 때는 문제가 없지만, 개발자 도구에서 네트워크를 느린 4G로 제한한 경우, PhotoSwipe가 초기화되고 이미지를 표시하기까지 지나치게 오랜 시간이 걸린다.

 

일반적인 상황에서는 PhotoSwipe이 빠르게 뜨지만, 느린 네트워크에서는 사용자가 이미지를 클릭한 후 아무 반응 없이 기다리는 시간이 길어지면서 사이트가 제대로 작동하지 않는 것처럼 보일 수 있다. PhotoSwipe가 뜨고 나서 이미지를 로딩하는 화면을 보여주면 사용자는 이미지가 로딩 중이라는 것을 인지할 수 있다. 그러나 현재는 이미지 클릭 후 PhotoSwipe 자체가 뜨기까지 긴 시간이 걸려 사용자가 지금 뭐가 어떻게 돌아가는지 알기 힘들 것이다.

원인 분석

PhotoSwipe는 이미지를 로드하기 전에 이미지 크기를 전달받아야 한다. PhotoSwipe는 미리 전달된 이미지 크기를 기준으로 이미지를 로딩하고 해당 영역에 이미지를 삽입합니다. 그래서 나 같은 경우는 외부의 이미지를 getImageSize() 함수로 이미지를 불러와 크기를 계산한 후 PhotoSwipe를 초기화한다.

const getImageSize = url => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve({ width: img.width, height: img.height });
    };
    img.onerror = reject;
    img.src = `${process.env.NEXT_PUBLIC_IMAGE_DOMAIN}/${url}`;
  });
};

export default getImageSize;

위 함수는 네트워크를 통해 외부 이미지를 다운로드하고 이미지의 크기를 측정하기 때문에 네트워크 속도에 많이 영향을 받는다. 그러면 photoSwipe 초기화 역시 지연이 된다.

 

아래 사진과 같이 getImageSize() 함수가 끝나야 포토스와이프에서 이미지를 가져온다. 네트워크에 제한이 없을 때는 괜찮지만 네트워크가 느려짐에 따라 이미지가 로딩이 되는 화면을 사용자가 보기까지 많은 시간이 걸린다

느린 4G

해결 방안 1: 페이지 렌더링 시 PhotoSwipe 미리 불러오기

페이지가 렌더링 될 때 PhotoSwipe를 미리 불러와 이미지를 클릭할 때 바로 PhotoSwipe가 뜨도록 하는 것이다. 이 방식은 클릭 시 PhotoSwipe 로딩 시간을 줄일 수 있지만, 그 대신 페이지 렌더링에 걸리는 시간이 길어진다. 즉, 페이지 자체의 성능 비용이 증가하는 단점이 있다.

해결 방안 2: 이미지 업로드 시 크기 정보 저장 - 채택

이미지 업로드 시 이미지의 크기를 DB에 저장하면 네트워크 요청 없이도 클라이언트 측에서 미리 이미지 크기를 알고 있으므로, 느린 네트워크 환경에서도 빠르게 PhotoSwipe를 초기화할 수 있다. 이 방법은 서버와의 통신을 최소화하므로 네트워크 성능에 좌우되지 않는다. 대신 클라이언트 측에서 이미지 크기를 계산하는 부담이 생긴다. 그러나 이 정도의 성능 비용은 대부분의 클라이언트 환경에서 충분히 감수할 수 있을 것이다.

성능 개선 결과

이전에는 느린 4G 환경에서 PhotoSwipe가 뜨고 이미지가 로딩되기까지 약 129초가 걸렸다. 이미지 크기를 DB에 저장하는 방식으로 개선한 후, 60초로 줄일 수 있었다.

그리고 60초 동안 사용자가 PhotoSwipe 화면을 보고 있으며, 이미지를 로딩하는 중이라는 피드백을 받을 수 있다.

느린 4G

 

좌) 개선 전 우) 개선 후