실제 사용자 모니터링 도구를 사용하고 앱 리팩터링에서 Core Web Vitals를 개선하는 데 집중한 결과 CLS가 72% 향상되고 애플리케이션 응답성도 개선되었습니다.
Agrofy는 라틴 아메리카의 농업 경영 시장을 위한 온라인 마켓플레이스입니다. 농기계, 토지, 장비, 금융 서비스의 구매자와 판매자를 매칭합니다. 2020년 3분기에 4명으로 구성된 Agrofy 개발팀은 성능 향상이 이탈률 감소로 이어질 것이라는 가설을 세우고 웹사이트를 최적화하는 데 한 달을 투자했습니다. 특히 코어 웹 바이탈 중 하나인 LCP를 개선하는 데 중점을 두었습니다. 이러한 성능 최적화를 통해 LCP가 70% 개선되었으며, 이는 부하 포기를 76%(3.8% 에서 0.9%로) 감소시켰습니다.
70%
LCP 감소
76%
부하 이탈 감소
문제
비즈니스 측정항목을 연구하던 Agrofy의 개발팀은 이탈률이 업계 기준치보다 높아 보이는 것을 발견했습니다. 웹사이트 코드베이스의 기술 부채도 증가했습니다.
솔루션
Agrofy 팀은 경영진을 대상으로 피칭을 진행한 후 다음과 같은 의견을 얻었습니다.
- 지원 중단된 오래된 프레임워크에서 현재 지원되는 최신 프레임워크로 이전합니다.
- 새 코드베이스의 로드 성능을 최적화합니다.
이전하는 데 2개월이 걸렸습니다. 앞서 언급한 4명으로 구성된 개발팀 외에도 이 마이그레이션에는 제품 및 UX 전문가와 소프트웨어 설계자가 참여했습니다. 4명으로 구성된 개발팀이 최적화 프로젝트를 진행하는 데 한 달이 걸렸습니다. LCP, CLS (또 다른 코어 웹 바이탈 측정항목), FCP에 중점을 두었습니다. 구체적인 최적화는 다음과 같습니다.
- Intersection Observer API를 사용하여 보이지 않는 모든 요소를 지연 로드
- 콘텐츠 전송 네트워크로 정적 리소스를 더욱 빠르게 제공
loading="lazy"를 사용하여 이미지 지연 로드- 주요 렌더링 경로 콘텐츠의 서버 측 렌더링
- 중요한 리소스를 미리 로드 및 사전 연결하여 핸드셰이크 시간을 최소화합니다.
- 실제 사용자 모니터링 (RUM) 도구를 사용하여 레이아웃 변경이 많이 발생한 제품 세부정보 페이지를 식별하고 코드베이스의 아키텍처를 조정합니다.
자세한 기술 세부정보는 Agrofy Engineering 블로그 게시물을 참고하세요.
트래픽의 20% 에 새 코드베이스를 사용 설정한 후 2020년 9월 초에 모든 방문자에게 새 사이트를 출시했습니다.
결과
개발팀의 최적화로 인해 다양한 측정항목에서 측정 가능한 개선이 이루어졌습니다.
- LCP가 70% 개선되었습니다.
- CLS가 72% 개선되었습니다.
- JS 요청 차단이 100% 감소하고 CSS 요청 차단이 80% 감소했습니다.
- 장기 작업은 72% 감소했습니다.
- 첫 번째 CPU 유휴 상태가 25% 개선되었습니다.
같은 기간에 실제 사용자 모니터링 데이터 (필드 데이터라고도 함)에서 제품 세부정보 페이지의 로드 이탈률은 3.8%에서 0.9% 로 76% 감소했습니다.
