2021년 4월 23일 금요일
2021년 3월 1일에 게시된 영어 원문을 번역한 글입니다.
아그로파이는 라틴 아메리카의 농업 비즈니스 시장을 위한 온라인 마켓플레이스입니다. 농기계, 토지, 장비 및 금융 서비스의 구매자와 판매자를 연결해줍니다. 2020년 3분기에 네 명으로 구성된 아그로파이 개발팀은 사이트 성능 향상이 이탈률 감소로 이어질 것이라는 가설을 세우고 한 달간 웹사이트 최적화 작업을 진행 했습니다. 특히 코어 웹 바이탈 요소 중 하나 인 LCP를 개선하는 데 집중했습니다. 이러한 성능 최적화를 통해 LCP가 70% 향상되었으며, 이는 로딩 포기율 76% 감소 (3.8%에서 0.9%로)와 관련이 있습니다.
70%
더 낮은 LCP
76%
로딩 포기율 감소량
문제 파악
아그로파이 개발팀은 비즈니스 지표를 살펴보다가 사이트 이탈률이 업계의 벤치 마크보다 더 높은 것을 파악했습니다. 뿐만 아니라 웹사이트 코드베이스에서 기술 부채도 증가했습니다.
해결
아그로파이팀은 경영진에 아래 내용을 발표하고 승인을 받았습니다.
- 더 이상 사용되지 않는 이전 프레임워크에서 적극적으로 지원되는 최신 프레임워크로 마이그레이션
- 신규 코드베이스의 로드 성능 최적화
두 달에 걸쳐 진행된 마이그레이션 작업에는 네 명의 개발팀 외에도 제품 및 UX 전문가와 소프트웨어 설계자가 참여했습니다.
최적화 프로젝트는 네 명의 개발팀이 한 달에 걸쳐 진행했습니다. LCP, CLS 및 FCP에 중점을 두었고, 구체적인 최적화 내용은 다음과 같습니다.
- Intersection Observer API를 사용하여 보이지 않는 모든 요소의 로딩을 지연
- 콘텐츠 전송 네트워크로 정적 리소스를 더 빠르게 제공
loading="lazy"로 이미지 지연 로딩- 주요 렌더링 경로 콘텐츠를 서버 사이드 렌더링(SSR)
- 핸드셰이크 시간을 최소화하기 위해 중요한 리소스에 preload와 preconnect사용
- 실제 사용자 모니터링 (RUM) 도구를 사용하여 누적 레이아웃 변경(CLS)이 많은 제품 세부 정보 페이지를 식별 한 후 코드베이스의 아키텍처를 조정
자세한 기술 정보는 Agrofy 엔지니어링 블로그 게시물을 확인하세요.
트래픽의 20%에 해당하는 부분에 대해 신규 코드베이스를 활성화 한 후 2020년 9월 초에 모든 방문자에게 새 사이트를 공개했습니다.
결과
최적화 작업은 다양한 측정 항목에서 향상된 결과를 보였습니다.
- LCP 70% 개선
- CLS 72% 개선
- JS 요청 차단은 100%, CSS 요청 차단은 80% 감소
- Long tasks 72% 감소
- First CPU Idle 25% 개선
동일한 기간 동안 실제 사용자 모니터링 데이터 (필드 데이터라고도 함)에서 제품 세부 정보 페이지의 로드 포기율이 3.8% 에서 0.9% 로 76% 감소한 것으로 나타났습니다.
