코어 웹 바이탈이 비즈니스에 미치는 영향

이 도움말에서는 사용자와 비즈니스에 이미 긍정적인 영향을 미치는 기업의 예를 살펴보고 코어 웹 바이탈이 주요 비즈니스 측정항목과 어떻게 연결되는지 알아봅니다.

사우라브 라즈팔
사우라브 라즈팔
X
스위타 고팔라크리슈난
스웨타 고팔라크리슈난
X

LCP, FID, CLS

이해관계자가 코어 웹 바이탈을 채택하도록 설득하는 데 어려움을 겪고 계신가요? 아니면 이것이 비즈니스에 실제로 도움이 되는지 궁금하신가요? 이 문서에서는 사용자와 비즈니스에 이미 긍정적인 영향을 미친 기업의 예를 탐색하여 코어 웹 바이탈이 주요 비즈니스 측정항목과 어떻게 연결되는지 알아봅니다.

동영상을 선호하신다면 Google I/O의 강연을 확인해 보세요.

코어 웹 바이탈이 사용자와 비즈니스에 중요한 이유

조직 내 이해관계자마다 우선순위가 다를 수 있습니다. 코어 웹 바이탈은 사용자 중심 측정항목과 그에 따른 비즈니스 성장에 중점을 두어 모두 같은 페이지에서 제공할 수 있습니다.

코어 웹 바이탈 고려 중

우수한 코어 웹 바이탈로 이어지는 경로는 실적 여정 중 어느 단계에 있는지와 사이트 디자인이 얼마나 복잡한지에 따라 사이트마다 다를 수 있습니다. 쉽게 달성할 수 있는 결과를 얻고 의미 있는 결과를 얻는 것부터 까다로운 문제를 해결하는 복잡한 솔루션을 구현하는 것까지 다양할 수 있습니다. 의사 결정권자는 소요 시간에 관계없이 이를 비즈니스 성장을 위한 장기 투자로 간주해야 합니다. 빠르고 원활한 탐색 환경을 제공하면 사용자의 만족도를 높이고 충성도 높은 재구매 고객으로 전환할 수 있습니다. 제품 관리자에게 있어 성능은 새로운 제품 기능의 품질과 성공을 정의하는 중요한 기준이 되어야 합니다. 또한 우수한 제품성과 흥미로운 도전과제를 해결하면 개발자의 만족도도 높아집니다.

순위 결정 신호로서의 코어 웹 바이탈은 성능에 시간을 투자하도록 하는 추가 동기를 제공하지만, 코어 웹 바이탈을 채택하면 순위 지정 외에도 여러 장단기적인 이점이 있습니다. 순위에 영향을 미치기 전인 코어 웹 바이탈을 사용자 경험에 중점을 두고 채택한 글로벌 및 현지 브랜드의 여러 우수사례를 살펴보겠습니다.

우수사례

Vodafone

Vodafone (이탈리아)은 LCP를 31% 개선하여 매출이 8% 증가했습니다.

판매량 8% 증가

기법

  • 서버 측은 중요한 HTML을 렌더링합니다.
  • 렌더링 차단 자바스크립트를 줄입니다.
  • 이미지 최적화 기법
  • 히어로 이미지 크기를 조절하고 중요하지 않은 리소스는 연기합니다.

핵심 내용

  • A/B 테스트는 유의미한 효과를 측정할 수 있는 가장 좋은 방법입니다.
  • A/B는 서버 측이어야 합니다.

iCook

iCook은 CLS를 15% 개선하여 10% 더 많은 광고 수익을 달성했습니다.

광고 수익 증가를 보여주는 차트

기법

  • UI에 사전 할당된 광고 단위 크기 및 고정 크기 광고 슬롯의 변동성이 적습니다.
  • 헤더 입찰의 우선순위를 지정하고 중요하지 않은 JS는 연기하도록 광고 스크립트 로딩 로직을 최적화했습니다.

핵심 내용

유효노출률이 영향을 받을 수 있지만 결국 광고 조회가능성이 개선되면 수익이 증가합니다.

Tokopedia

Tokopedia는 LCP를 55% 개선하고 평균 세션 시간을 23% 향상했습니다.

3.78초 이전, 1.72초 이후

기법

  • 서버 측 렌더링 (SSR) LCP 요소.
  • LCP 요소 미리 로드
  • 이미지 최적화 (압축, WebP, 중요하지 않은 이미지 지연 로드)

핵심 내용

  • 팀 전체의 진행 상황과 영향을 모니터링하기 위한 성능 모니터링 대시보드를 빌드했습니다.
  • 다양한 렌더링 기술(예: 스크롤 없이 볼 수 있는 콘텐츠인 SSR LCP 요소, 스크롤 없이 볼 수 있는 콘텐츠인 SSR, 전체 클라이언트 측 렌더링)로 실험했습니다.

Redbus

코어 웹 바이탈 수정을 통해 모바일 전환율 (mCVR)이 80~100% 증가했고 Redbus의 글로벌 마켓 속성에서 도메인 순위가 크게 상승했습니다.

컬럼비아에서 도메인 순위 192% 상승

기법

  • 페이지 구성요소의 슬롯을 수정하고 최적화되지 않은 태그 삽입 스크립트를 삭제하여 CLS를 개선했습니다.
  • 서드 파티 스크립트를 최적화하고 단일 책임 원칙에 따라 마이크로서비스를 빌드하여 TTI와 TBT가 크게 감소했습니다.

핵심 내용

  • CLS를 1.65에서 0으로 낮춘 결과 전 세계적으로 도메인 순위가 크게 상승했습니다.
  • TTI를 약 8초에서 약 4초로, TBT를 약 1,200밀리초에서 약 700밀리초로 줄임으로써 전 세계 속성에서 mCVR이 80~100% 증가하는 데 기여했습니다.
  • RUM 도구를 사용하여 하위 계층 시장에서 실제 성능 측정항목을 파악할 수 있었습니다.
  • 회귀를 방지하려면 성능 문화를 채택하는 것이 매우 중요합니다. 또한 최적화된 코드, 더 빠른 출시, 더 적은 프로덕션 문제 덕분에 팀 생산성이 향상됩니다.

위의 우수사례는 권장사항을 채택하고 빠른 성과를 구현하면 많은 것을 달성할 수 있음을 보여줍니다. 다음은 이러한 상황에 대한 몇 가지 실제 사례입니다.

Netzwellt는 광고 수익이 18%, Lazada는 모바일에서 LCP는 3배, 전환율은 16.9% 증가했으며, GYAO는 LCP는 3.1배, 클릭률은 108% 개선되었습니다.

위 결과는

이미지 최적화 JavaScript 최적화 광고 및 동적 콘텐츠
WebP 이미지 형식 사용 서드 파티 JS 지연 스크롤 없이 볼 수 있는 부분의 광고를 위한 공간 확보
이미지 CDN 사용 렌더링 차단 및 사용되지 않는 JS 삭제 동적 콘텐츠의 높이 설정
압축 중요하지 않은 JS 지연 로드
중요하지 않은 이미지 지연 중요한 JS 미리 로드
히어로 이미지 미리 로드
가로세로 비율 지정

추가 권장사항은 웹 바이탈 안내를 참고하세요. PageSpeed Insights를 사용해 웹사이트를 감사하고 실행 가능한 권장사항을 즉시 확인하세요.

코어 웹 바이탈에 대한 투자를 통해 이익을 얻은 글로벌 브랜드도 몇 군데 더 있습니다.

지금 시작하려면 어떻게 해야 하나요?

1단계: 측정 시작하기

먼저 Real User Monitoring (RUM) 도구를 사용하여 사이트의 필드 데이터를 측정하세요. 이미 다양한 Google 및 서드 파티 (3P) RUM 도구가 있습니다.

RUM 도구

Google RUM 도구

  • Search Console
  • PageSpeed Insights
  • web-vitals 자바스크립트 라이브러리
  • Chrome 사용자 환경 보고서 (CrUX)

서드 파티 RUM 도구

  • Cloudflare
  • New Relic
  • Akamai
  • 구경
  • 파란색 삼각형
  • 감시병
  • SpeedCurve
  • 레이건

가장 적합한 도구를 선택하세요. 한 단계 더 나아가 Google 애널리틱스 4와 통합하여 코어 웹 바이탈을 비즈니스 측정항목과 연결할 수 있습니다.

2단계: 이해관계자 설득하기

  • 이해관계자에게 코어 웹 바이탈 채택의 중요성 및 사용자 환경 및 회사의 비즈니스 측정항목과의 상관관계를 개선하도록 안내합니다.
  • 내부적으로 스폰서를 모집하여 소규모 실험을 시작합니다.
  • 팀 전반의 코어 웹 바이탈을 개선하기 위해 이해관계자 간의 공유 목표를 만듭니다.

3단계: 다음 팁을 사용하여 성공적인 구현 구현

  • 우선순위: 광고 방문 페이지, 전환 페이지, 인기 페이지 등 의미 있는 결과를 얻으려면 트래픽 또는 전환 중요도가 높은 페이지를 선택합니다.
  • A/B 테스트: 서버 측 테스트를 사용하여 렌더링 비용을 방지합니다. 최적화된 버전과 최적화되지 않은 버전의 결과를 비교합니다.
  • 모니터링: 지속적인 모니터링을 사용하여 회귀를 방지합니다.

마지막으로, Google은 성능은 목적지가 아닌 하나의 여정이라고 생각합니다. 이에 따라 최신 우수사례 주요 내용을 포함하여 이 도움말을 계속 업데이트할 계획입니다. 또한 비즈니스가 성공을 거두고 있으며 이 도움말에 언급되고 싶다면 콘텐츠 제안서를 제출하세요.