아그로파이: LCP 70% 개선과 로딩 중도 포기율 76% 감소의 상관 관계

2021년 4월 23일 금요일

2021년 3월 1일에 게시된 영어 원문을 번역한 글입니다.

아그로파이는 라틴 아메리카의 농업 비즈니스 시장을 위한 온라인 마켓플레이스입니다. 농기계, 토지, 장비 및 금융 서비스의 구매자와 판매자를 연결해줍니다. 2020년 3분기에 네 명으로 구성된 아그로파이 개발팀은 사이트 성능 향상이 이탈률 감소로 이어질 것이라는 가설을 세우고 한 달간 웹사이트 최적화 작업을 진행 했습니다. 특히 코어 웹 바이탈 요소 중 하나 인 LCP를 개선하는 데 집중했습니다. 이러한 성능 최적화를 통해 LCP가 70% 향상되었으며, 이는 로딩 포기율 76% 감소 (3.8%에서 0.9%로)와 관련이 있습니다.

70%

더 낮은 LCP

76%

로딩 포기율 감소량

문제 파악

아그로파이 개발팀은 비즈니스 지표를 살펴보다가 사이트 이탈률이 업계의 벤치 마크보다 더 높은 것을 파악했습니다. 뿐만 아니라 웹사이트 코드베이스에서 기술 부채도 증가했습니다.

해결

아그로파이팀은 경영진에 아래 내용을 발표하고 승인을 받았습니다.

  • 더 이상 사용되지 않는 이전 프레임워크에서 적극적으로 지원되는 최신 프레임워크로 마이그레이션
  • 신규 코드베이스의 로드 성능 최적화

두 달에 걸쳐 진행된 마이그레이션 작업에는 네 명의 개발팀 외에도 제품 및 UX 전문가와 소프트웨어 설계자가 참여했습니다.

최적화 프로젝트는 네 명의 개발팀이 한 달에 걸쳐 진행했습니다. LCP, CLSFCP에 중점을 두었고, 구체적인 최적화 내용은 다음과 같습니다.

자세한 기술 정보는 Agrofy 엔지니어링 블로그 게시물을 확인하세요.

트래픽의 20%에 해당하는 부분에 대해 신규 코드베이스를 활성화 한 후 2020년 9월 초에 모든 방문자에게 새 사이트를 공개했습니다.

결과

최적화 작업은 다양한 측정 항목에서 향상된 결과를 보였습니다.

  • LCP 70% 개선
  • CLS 72% 개선
  • JS 요청 차단은 100%, CSS 요청 차단은 80% 감소
  • Long tasks 72% 감소
  • First CPU Idle 25% 개선

동일한 기간 동안 실제 사용자 모니터링 데이터 (필드 데이터라고도 함)에서 제품 세부 정보 페이지의 로드 포기율이 3.8% 에서 0.9% 로 76% 감소한 것으로 나타났습니다.

퍼포먼스 최적화 후 제품 세부 정보 페이지에서 로딩 포기율 76% 감소를 보여주는 그래프
제품 상세 페이지의 로딩 포기율 추세