이 팀은 1,000만 건의 방문 페이지 방문에서 발생한 데이터를 분석한 결과, 최대 콘텐츠 페인트와 전환율 사이에 밀접한 상관관계가 있음을 발견했습니다.
Groupe Renault는 130개 이상의 국가에서 사업을 운영하는 프랑스의 다국적 자동차 제조업체입니다. Renault와 같은 자동차 그룹의 경우, 사용자 참여와 전환을 유도하는 성능이 우수한 브랜드 사이트를 통해 더 많은 비즈니스 기회를 얻을 수 있습니다. 모든 브랜드 사이트는 현지화된 사이트의 콘텐츠와 기능을 유연하게 유지하면서도 최고의 사용자 경험을 제공하는 것을 목표로 합니다. 이러한 맥락에서 성능 모니터링은 글로벌 플랫폼의 개발 및 유지관리를 담당하는 고객 경험팀의 핵심 요소입니다.
코어 웹 바이탈의 비즈니스 영향 측정
Google 애널리틱스의 측정
Renault는 fifty-Fi의 글로벌 데이터 파트너인 Renault와 협력하여 web-vitals 라이브러리를 설정했습니다. 이 라이브러리를 사용하면 Chrome에서 측정항목을 측정하고 다른 Google 도구에 보고하는 것과 정확하게 일치하는 방식으로 실제 사용자의 모든 웹 바이탈 측정항목을 Google 애널리틱스에 전송할 수 있습니다.
다음 분석은 2020년 12월부터 2021년 3월까지 4개월 동안 이러한 도구를 사용하여 캡처한 데이터 세트를 보여줍니다.
최적화된 LCP는 사용자 참여 및 비즈니스 측정항목과 밀접한 관련이 있습니다
팀은 아래의 그림과 같이 최대 콘텐츠 페인트 (LCP)가 낮은 경우와 유리한 이탈률 및 전환율 간에 특히 밀접한 상관관계가 있음을 확인했습니다.
이 데이터 세트는 4개월 동안 33개국에서 1,000만 회 이상의 방문을 캡처했으며, LCP가 낮아지면 다음과 같은 상관관계가 있음을 보여줍니다.
- 이탈률 감소
- 전환수 증가 (리드 양식 완료)
흥미롭게도 웹사이트는 단일 페이지 애플리케이션 (SPA)으로 실행되므로 이러한 모든 측정은 방문 페이지에서만 캡처됩니다. 데이터에 따르면 LCP가 1초 미만이 될 때까지 웹사이트를 최적화하는 것이 좋습니다. 그룹의 브랜드 사이트를 너무 최적화해서는 안 됩니다.
이 데이터 세트는 LCP와 비즈니스 측정항목 간의 음의 상관관계를 볼 수 있을 뿐만 아니라 실적이 가장 우수한 방문 페이지 간의 실적 불일치도 보여줍니다. 이 웹사이트의 맥락에서 LCP를 1초 미만으로 유지하면 전환수가 크게 증가하고 이탈이 줄어듭니다.
에자 라코토아리마나나, 컨설턴트, 55
LCP를 1초 개선하면 이탈률이 14퍼센트포인트 (ppt) 감소하고 전환수가 13% 증가할 수 있습니다.
| LCP 1초 개선 | 결과 |
|---|---|
| LCP 약 1초 | CVR 13% 증가 |
| 1.6초 미만의 LCP | -14ppt 이탈률 |
| LCP 1.6초 초과 | -5ppt 이탈률 |
코어 웹 바이탈을 대규모로 최적화하는 르노의 방식
2020년 초부터 브랜드의 상위 5개 유럽 시장에서 빠른 LCP (2.5초 미만)를 경험하는 방문자 수가 Renault 도메인의 경우 평균 22ppt (51% 에서 73%로) 증가했습니다.
그들의 접근 방식은 다음과 같습니다.
SPA의 중심 최적화
플랫폼 관점에서 볼 때 성능은 수년 동안 우선순위로 여겨져 왔으며 핵심 측정항목으로 코어 웹 바이탈을 포함하는 일은 순조롭게 진행되었습니다. 중앙팀은 포괄적인 모니터링 솔루션 (Google Lighthouse 및 Chrome UX Report API 사용)을 설정하고 조직 전반에 성능 문화를 조성했습니다. 단일 페이지 애플리케이션을 최적화하기 위한 몇 가지 전략이 있었습니다.
- SSR (서버 측 렌더링): 빠른 콘텐츠가 포함된 첫 페인트 (FCP)를 보장합니다.
- LCP 및 FID 개선을 위해 방문 페이지에 필요한 JS 및 CSS 청크만 제공하는 코드 분할
- 높은 수준의 리소스 캐싱이 있는 CDN (불필요한 쿼리 매개변수를 정렬하고 삭제하는 Lambda@Edge 포함) 이를 통해 SSR의 단점(서버 계산으로 인해 TTFB가 느림)을 피하고 최종 사용자에게 더 가까운 위치로 콘텐츠를 제공하여 TTFB와 LCP를 개선할 수 있었습니다.
- brotli로 압축을 최적화하여 코드 크기 줄이기
- HTTP2 - 요청 및 응답의 다중화를 사용 설정합니다.
- WebP 지원과
srcset및sizes속성이 포함된 반응형 이미지를 사용하여 사용자에게 가장 적합한 이미지 크기와 형식을 제공합니다. IntersectionObserver및 FPO (작은 1KB 썸네일)를 사용하여 이미지, 동영상, iframe을 지연 로드합니다.- 차단 스크립트를 삭제하고 브라우저 대상에 맞게 변환 컴파일을 조정하여 JS 파일 크기를 줄입니다 (불필요한 폴리필 방지).
- Google 태그 관리자 컨테이너의 크기를 줄여 필요한 곳에서만 서드 파티 스크립트를 로드합니다.
- 맞춤 글꼴 수를 줄이고, 유니코드 범위에 woff/woff2 형식을 사용하고, 맞춤 글꼴을 아직 사용할 수 없는 경우에도
font-display:swap글꼴 파일 크기를 줄이고 텍스트를 최대한 빨리 표시합니다. - 주로 LCP 요소인 히어로 이미지 미리 로드
팀에서는 다음과 같은 향후 개선을 위해 계속 노력하고 있습니다.
- 서버 푸시로 CSS를 더 빠르게 제공하여 FCP를 개선합니다. (AWS 지원 부족 및 지원 중단 제안으로 인해 대기 중입니다.
- FID 개선을 위한 점진적 수분 섭취
- ES6 모듈 지원: 최신 브라우저용 ES6 빌드를 사용하여 더 빠른 환경을 제공합니다.
SPA 접근 방식은 사용자가 여러 페이지를 탐색할 때 전체 페이지를 새로고침할 필요가 없으므로 성능 면에서 유용할 수 있습니다. 하지만 SPA의 현재 코어 웹 바이탈 측정 방법론은 경로 전환을 측정하지 않기 때문에 단점으로 인식될 수 있습니다. 따라서 UI 캐싱으로 인해 세션 내에서 비교적 빠른 페이지 로드가 고려되지 않습니다. 또한 코어 웹 바이탈을 멀티 페이지 애플리케이션 경쟁사 웹사이트와 비교하기도 어렵습니다. 웜 캐시는 사용자가 세션 중에 탐색하는 각 페이지의 측정값을 낮춥니다. 자세한 내용은 웹 바이탈 SPA FAQ를 참고하세요.
알려진 제한사항은 Chrome 제품팀에서 조사하고 있습니다. SPA 측정을 개선하기 위한 CLS 측정항목 업데이트가 이미 전송되었습니다.
다양한 기술팀이 성능에 영향을 미칠 수 있기 때문에 성능을 지속적으로 모니터링해야 합니다. SPA에서 측정하는 방식에는 한계가 있음에도 불구하고 코어 웹 바이탈을 사용하면 팀이 수행하는 작업의 영향을 추적할 수 있습니다. 경로 전환이 곧 고려되기를 바랍니다.
세드릭 바주로, Renault 기술 책임자
공동 책임으로 실적 최적화를 홍보하는 현지 가이드라인
성과는 전 세계적 책임과 지역적 책임으로 전달됩니다. 여러 팀은 현지 콘텐츠 소유자가 준수해야 할 일련의 권장사항을 마련해 두었습니다. 다음은 이 가이드라인의 몇 가지 예입니다.
- 로컬 Google 태그 관리자 컨테이너를 최적화하여 사이트 성능을 개선합니다. 예를 들어 특정 태그를 조건부로 트리거합니다.
- 내부 도구를 사용하여 압축하거나 YouTube와 같은 외부 플랫폼에서 호스팅하여 동영상 콘텐츠의 크기를 제한합니다.
- Google 태그 관리자를 통해 사진을 업로드하지 마세요.
브랜드 사이트를 지속적으로 최적화하려면 디지털 실적에 대한 깊이 있는 이해가 필수적입니다. Google 고객 경험팀의 접근 방식은 현지 팀의 비즈니스 성과에 긍정적인 영향을 미치는 글로벌 플랫폼을 제공하는 동시에 이러한 팀이 높은 수준의 실적을 유지할 수 있도록 가이드라인과 권장사항을 제공하는 것입니다.
알렉산드르 페루체, Renault 성능 부문 책임자
결론적으로, Renault는 항상 웹사이트 성능을 최우선으로 생각했으며 웹사이트 플랫폼은 지속적으로 최적화되고 있습니다. 비즈니스 측정항목과 함께 코어 웹 바이탈을 측정함으로써 이 주제를 전 세계적으로 공유하는 책임으로 홍보할 수 있었으며, 현지 가이드라인을 통해 팀이 이러한 유익한 노력에 참여할 수 있는 역량을 갖출 수 있게 되었습니다.