펀딩하기 상세 페이지 성능 개선하기

9 min readJan 27, 2022

안녕하세요. 와디즈 FE개발팀 홍승아입니다. 작년 한 해 동안 펀딩 상세 페이지 성능 개선 업무를 진행하면서 겪었던 경험들과 사용한 기술들에 대해 공유하고자 합니다. 현재 비슷한 문제를 경험 중인 분들이 있다면 블로그 내용을 통해서 조금이나마 도움이 됐으면 합니다.

펀딩 상세 페이지

들어가기에 앞서 설명에 대한 이해를 돕기 위해 성능 개선 작업을 한 펀딩 상세 페이지에 대해서 간략하게 설명하겠습니다.

펀딩 상세 페이지는 메이커의 창의적인 아이디어를 바탕으로 한 프로젝트를 소개하는 페이지로서, 브랜드 철학 및 제품 스토리를 전하여 가치 투자를 지향하는 서포터와 소통하기 위한 용도의 서비스를 제공하는 페이지입니다.

중요한 역할을 담당하는 상세페이지가 시간이 지나면서 많은 기능들이 추가되었고, 조금씩 로딩 속도가 느려지고 있었습니다.

성능개선 업무에 대해서 관심을 가지고 있던 내가 상세페이지 개선해보겠다는 생각으로 팀에 일감을 제안했고, 작년초부터 성능개선 업무를 시작하게 되었습니다.

성능 문제 발견

그렇다면 펀딩 상세페이지는 ‘과연 얼마나 느릴까?’라는 호기심에 GA(Google Analytics), WebPageTest 도구를 사용해서 측정을 해 봤습니다.

측정한 결과 펀딩 상세 페이지 로딩 시간이 평균적으로 10초 정도 걸리고 있었습니다.

특히, 상세 페이지 로딩에 대부분에 시간은 이미지 로딩 시 사용 되고 있음을 알게 되었고, ‘과연 어떤 문제가 있는 것일까?’라는 생각에 문제가 되는 원인을 찾아보게 되었습니다.

문제 원인 파악

상세페이지 기능 중 제품을 소개하는 스토리 영역이 이미지 로딩 시 화면에 보이는 이미지만 다운로드 하지 않고, 전체 영역에 대해서 다운로드 하는 문제점을 알게 되었습니다.

그로 인해서 상세페이지 로딩 시간이 증가하게 되었으며, 서비스의 품질과 사용자 경험을 저하시키는 이슈가 발생하고 있었습니다.

성능 개선

보이는 화면에 필요한 이미지만 다운로드하자! 즉, 이미지를 지연 로딩하자!

지연 로딩이란?

개선 사항을 소개하기 전 이미지 지연 로딩 기술에 대해서 설명하겠습니다.

페이지(화면) 안에 이미지가 화면에 보여질 필요가 있을 때 로딩할 수 있는 기술을 뜻합니다.
지연 로딩을 통해서 불필요한 이미지 수를 줄일 수 있으며, 네트워크를 통해서 이미지를 다운을 덜 받음으로서 비용을 감소시킬 수 있습니다.

펀딩 상세 페이지 적용한 이미지 지연 로딩 기술

이미지가 화면에 위치할 경우 로딩

이미지 지연로딩 기술은 3가지의 방법으로 적용이 가능합니다.

브라우저 이벤트를 이용한 지연로딩: scroll, resize, orientationchange 이벤트를 이용한 로딩
이미지 태그의 data-src 속성에 URL 값을 얻어와서 src 속성에 넣어줌으로써, 이미지 자체를 지연로딩
브라우저 API 이용한 지연로딩: Intersection Observer API를 사용해서 이미지가 뷰포트에 위치한 경우 로딩
Google Native 이용한 지연로딩: 크롬브라우저 자체적으로 img, iframe 태그가 뷰포트에 위치한 경우 로딩

이 중에서 펀딩 상세 페이지는 구형 브라우저 지원에 용이한 브라우저 이벤트를 이용한 지연로딩 기술을 선택 하였고, 해당 기술에 대해서 가장 널리 사용되는 lazysizes 라이브러리를 사용하였습니다.

# 개선 전
<img src=”https://www.sample.png" />
#개선 후
<img data-src=”https://www.sample.png" src=”https://www.sample.png" />

콘텐츠 리플로우 방지

개선 사항을 소개하기에 전에 콘텐츠 리플로우에 대해서도 소개하겠습니다.

콘텐츠 리플로우란?

브라우저는 이미지가 로딩 되기 전까지는 콘텐츠의 공간을 가지고 있지 않아서 0x0 픽셀로 존재하게 됩니다.

추후에 이미지가 로딩되면 브라우저는 해당 이미지의 크기에 맞게 콘텐츠의 공간을 리사이즈 하는 동작을 콘텐츠 리플로우라고 합니다.

지연로딩 기술 적용 후에 사용성 테스트 해보는데, 펀딩 상세 페이지도 페이지 로딩 시 이미지 높이를 지정하지 않아서 사용자가 스크롤을 빠르게 할 경우 컨텐츠 공간이 리사이즈 되면서 스크롤이 갑자기 이동하거나, 버벅이는 문제가 발생하였습니다.

이슈 해결을 위해서 이미지 로딩 전 컨텐츠의 높이를 지정해주는 방식인 콘텐츠 리플로우 방지 기능을 사용하게 되었습니다.

펀딩 상세페이지 적용한 내용은 아래와 같습니다.

HTML 생성 시 이미지 태그의 실제 너비/높이값을 데이터 속성에 추가(data-width, data-height)
페이지 로딩 시 이미지 태그의 데이터 속성에 너비/높이 값을 통해서 이미지 높이값 지정(padding)

# 개선 전
<img data-src=”https://www.sample.png" />
# 개선 후
<img data-src=”https://www.sample.png"
data-width=”800"
data-height=”450"
style=”padding-bottom: 56.25%”
/>
# javascript
const image = document.querySelector(‘img[data-src]’);
image.style.setProperty(‘padding-bottom’, (100 / (width / height)) + ‘%’);

화면보다 넓은 범위의 이미지 프리로딩

지연로딩 개발을 완료 했다고 자부하던 그 시점에 또 다른 문제가 발생하였습니다.

사용자가 스크롤을 빠르게 내릴 경우 간혹가다가 이미지 로딩이 오래 걸리는 이슈를 발견하였고,

해당 이슈의 원인을 파악해보니 스크롤 이벤트 성능 이슈로 인해서 Throttling Delay가 발생 해서 이미지 로딩이 지연되는 문제점을 알게 되었습니다.

이슈 해결을 위해서 이미지 위치와 뷰포트 위치의 간격을 체크에 지연로딩 하는 대신에 어느 정도(350px) 임계값을 추가해서 더 넓은 범위의 이미지 프리로딩을 적용하여 해결하였습니다.

# 개선 전
const image = document.querySelector(‘img[data-src]’);
image.offsetTop >= window.scrollTop + window.clientHeight;
# 개선 후
const expandHeight = 350;
const image = document.querySelector(‘img[data-src]’);
image.offsetTop >= window.scrollTop + window.clientHeight + expandHeight;
// 뷰포트 영역외에 350px 만큼 맞닿은 이미지에 대해서 프리로딩