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

2022년 8월 19일 | 기술 이야기

출처 : Photo by Hal Gatewood on Unsplash

 

안녕하세요. 와디즈 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 만큼 맞닿은 이미지에 대해서 프리로딩

 

개선 후 결과

성능 개선 후 다음과 같은 결과를 얻었습니다.

이미지 순차 로딩

이미지 지연 로딩 기술 개선 결과, 아래 이미지와 같이 스크롤 할 때의 화면에 걸친 이미지들이 순차적으로 로딩되는 것을 확인할 수 있었습니다.

이미지 로딩 예시입니다

이미지 로딩 예시

 

로딩 속도 개선: 40% 감소

지연 로딩 기술을 적용한 결과, 펀딩 상세 페이지 로딩 시간을 기존 대비 40% 정도 감소했습니다.

로딩 속도 개선 화면 입니다.

google analytics

 

이미지 다운로드 감소: 40-50% 비용 감소

화면에 보이는 이미지만 다운로드하도록 해, 기존 대비 CDN 사용량을 약 40~50% 정도 감소했습니다.

CDN 사용량 감소

 

앞으로의 과제

펀딩 상세 페이지 이미지 지연 로딩 적용을 시작으로 와디즈 서비스의 성능 개선 관련해 여러 작업을 순차적으로 진행하고 있어요.

  • 이미지 용량 축소: 용량이 큰 gif 이미지를 동일한 기능을 수행할 수 있는 webp, mp4 확장자 변경해서 용량 축소
  • 이미지 placeholder 기법: 실제 이미지의 주요한 색상 또는 저화질의 이미지로 placeholder 적용
  • 이미지 부드럽게 표시: 로딩 전에는 투명도 값을 조정

등등…

여러 성능 개선 작업이 완료되면 와디즈 서비스의 품질이 높아질 것으로 기대가 됩니다.
앞으로의 과제들을 수행하기 위해서는 더 많은 팀원이 필요해요. 과제를 함께 수행할 팀원들을 모집하고 있으니, 많은 관심 바랍니다!

👉 와디즈 테크 채용 사이트

 

와디즈

동료를 찾습니다!

 

마지막으로, 바쁜 와중에도 저를 항상 살펴주시는 와디즈 최강 FE개발팀 프로님들, 지연 로딩 기술 도입에 대해서 시작부터 향후 개선할 점까지 같이 고민해주신 개발팀 프로님들!
감사합니다. 도와주신 덕분에 와디즈 펀딩 서비스의 품질을 향상할 수 있었습니다 🥰

 

궁금한 내용이 남아 있나요? 👀

펀딩 상세페이지를 개선한 FE개발팀의 조직 문화가 궁금하다면? 👉 클릭

👇 태그를 클릭하면 같은 키워드의 글을 모아볼 수 있어요.

기술 이야기

기술 이야기

기술 조직

누구나 도전하고, 새로움을 경험할 수 있도록, 꼭 필요한 서비스를 만듭니다.