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