이 도움말에서는 이미 사용자와 비즈니스에 긍정적인 영향을 미친 회사의 예를 살펴봄으로써 코어 웹 바이탈이 주요 비즈니스 측정항목과 어떤 관련이 있는지 이해하는 데 도움이 됩니다.
이해관계자에게 Core Web Vitals를 도입하도록 설득하는 데 어려움을 겪고 계신가요? 아니면 실제로 비즈니스에 도움이 되는지 궁금하신가요? 이 도움말에서는 이미 사용자와 비즈니스에 긍정적인 영향을 미친 기업의 예를 살펴봄으로써 Core Web Vitals가 주요 비즈니스 측정항목과 어떤 관련이 있는지 이해하는 데 도움이 됩니다.
동영상을 선호하는 경우 Google I/O에서 진행된 이 강연을 확인하세요.
코어 웹 바이탈이 사용자와 비즈니스에 중요한 이유
조직의 이해관계자마다 우선순위가 다를 수 있습니다. Core Web Vitals는 사용자 중심 측정항목과 그로 인한 비즈니스 성장을 최적화하는 데 중점을 두어 모든 측정항목을 한곳으로 모을 수 있습니다.
우수한 Core Web Vitals를 달성하기 위한 여정은 성능 여정의 위치와 사이트 디자인의 복잡도에 따라 사이트마다 다를 수 있습니다. 간단한 작업으로 의미 있는 결과를 얻는 것부터 어려운 문제를 해결하는 복잡한 솔루션을 구현하는 것까지 다양합니다. 소요 시간과 관계없이 의사 결정권자는 이를 비즈니스 성장을 위한 장기 투자로 간주해야 합니다. 빠르고 원활한 탐색 환경을 제공하면 사용자의 만족도를 높이고 충성도 높은 재구매 고객으로 전환하는 데 도움이 됩니다. 제품 관리자의 경우 성능은 새로운 제품 기능의 품질과 성공을 정의하는 중요한 기준이 되어야 합니다. 또한 제품 우수성과 흥미로운 과제에 도전하는 것은 개발자 만족도도 높입니다.
검색 순위 신호로서의 Core Web Vitals는 실적에 시간을 투자하도록 동기를 부여하지만, Core Web Vitals를 채택하면 순위 외에도 다른 많은 단기 및 장기적인 이점이 있습니다. 사용자 환경에 중점을 두고 핵심 웹 바이탈을 도입한 글로벌 및 현지 브랜드의 여러 사례를 살펴보겠습니다(순위에 영향을 주기 전).
우수사례
Vodafone
Vodafone (이탈리아)은 LCP를 31% 개선하여 8% 의 매출 증가를 달성했습니다.
기법
- 서버 측에서 중요한 HTML을 렌더링합니다.
- 렌더링을 차단하는 JavaScript를 줄입니다.
- 이미지 최적화 기법
- 히어로 이미지 크기 조절, 중요하지 않은 리소스 지연
주요 내용
- A/B 테스트는 의미 있는 영향을 측정하는 가장 좋은 방법입니다.
- A/B는 서버 측 A/B여야 합니다.
iCook
iCook은 CLS를 15% 개선하여 광고 수익을 10% 늘렸습니다.
기법
- 광고 단위 크기의 가변성이 적고 UI에 미리 할당된 고정 크기 광고 슬롯이 있습니다.
- 헤더 입찰에 우선순위를 두고 중요하지 않은 JS를 지연하도록 광고 스크립트 로드 로직을 최적화했습니다.
주요 내용
게재율이 영향을 받을 수 있지만 광고 조회가능성이 개선되면 결국 수익이 증가합니다.
Tokopedia
Tokopedia는 LCP를 55% 개선하고 평균 세션 시간을 23% 개선했습니다.
기법
- 서버 측 렌더링 (SSR) LCP 요소
- LCP 요소 미리 로드
- 이미지 최적화 (압축, WebP, 중요하지 않은 이미지 지연 로드)
주요 내용
- 여러 팀의 진행 상황과 영향을 모니터링하는 성능 모니터링 대시보드를 구축했습니다.
- 다양한 렌더링 기법(예: SSR LCP 요소, 스크롤 영역 위의 SSR 콘텐츠, 전체 클라이언트 측 렌더링)을 실험했습니다.
Redbus
핵심 성능 보고서 수정으로 Redbus의 전 세계 시장 속성에서 모바일 전환율 (mCVR)이 80~100% 증가하고 도메인 순위가 크게 상승했습니다.
기법
- 페이지 구성요소의 슬롯을 수정하고 최적화되지 않은 태그 삽입 스크립트를 삭제하여 CLS가 개선되었습니다.
- 서드 파티 스크립트를 최적화하고 단일 책임 원칙으로 마이크로서비스를 빌드하여 TTI와 TBT를 크게 줄였습니다.
주요 내용
- CLS를 1.65에서 0으로 낮춘 redBus는 전 세계적으로 도메인 순위가 크게 상승했습니다.
- TTI를 약 8초에서 약 4초로, TBT를 약 1,200밀리초에서 약 700밀리초로 줄이자 전 세계 속성의 mCVR이 80~100% 증가했습니다.
- RUM 도구를 사용하여 하위 등급 시장의 실제 실적 측정항목을 캡처할 수 있었습니다.
- 회귀를 방지하려면 성과 문화를 채택하는 것이 매우 중요합니다. 또한 최적화된 코드, 더 빠른 출시, 더 적은 프로덕션 문제를 통해 팀 생산성도 개선됩니다.
위의 사례 연구는 권장사항을 채택하고 빠른 실적을 올리면 많은 성과를 얻을 수 있음을 보여줍니다. 다음은 이 점을 보여주는 실제 사례입니다.
위의 결과는 다음과 같은 손쉬운 과제를 활용하여 얻었습니다.
이미지 최적화 | JavaScript 최적화 | 광고 및 동적 콘텐츠 |
---|---|---|
WebP 이미지 형식 사용 | 서드 파티 JS 지연 | 스크롤 없이 볼 수 있는 부분의 광고 공간 예약 |
이미지 CDN 사용 | 렌더링을 차단하고 사용되지 않는 JS 삭제 | 동적 콘텐츠의 높이 설정 |
압축 | 중요하지 않은 JS 지연 로드 | |
중요하지 않은 이미지 지연 | 중요한 JS 미리 로드 | |
히어로 이미지 미리 로드 | ||
가로세로 비율 지정 |
자세한 권장사항은 웹 중요도 안내를 참고하세요. PageSpeed Insights를 사용하여 웹사이트를 감사하고 즉시 실행 가능한 권장사항을 확인하세요.
코어 웹 바이탈에 투자하여 혜택을 본 글로벌 브랜드는 더 많습니다.
- Tencent Video는 Core Web Vitals를 통과하여 동영상의 CTR이 70% 개선되었습니다.
- Cdiscount는 블랙 프라이데이 할인 기간에 수익이 6% 증가하는 데 기여한 세 가지 측정항목을 모두 개선했습니다.
- Wix는 코어 웹 바이탈을 통과하는 모바일 출처를 전년 대비 250% 이상 늘렸습니다.
- Nykaa는 LCP를 40% 개선한 결과 T2/T3 도시에서 자연 트래픽이 28% 증가했다고 밝혔습니다.
- NIKKEI STYLE의 LCP가 18% 개선되어 세션당 페이지 조회수가 9% 증가했습니다.
- NDTV는 다른 제품 변경사항과 함께 LCP를 절반으로 줄인 후 이탈률이 50% 개선되었습니다.
- Agrofy Market의 LCP가 70% 개선되어 로드 포기율이 76% 감소했습니다.
- Flipkart는 Core Web Vitals 측정항목을 개선하여 이탈률을 2.6% 감소시켰습니다.
- Ameba Manga는 CLS 점수를 10배 개선하여 만화 읽기 횟수를 2~3배 늘렸습니다.
- Yahoo! 일본에서는 레이아웃 변경 횟수(CLS)를 수정하여 품질이 좋지 않은 페이지가 98% 감소하고 세션당 페이지 조회수가 15% 증가했습니다..
- AliExpress는 CLS를 10배, LCP를 2배 개선하여 이탈률을 15% 감소시켰습니다.
- GEDI의 CLS는 77% 감소하고 이탈률은 8% 감소했습니다.
지금 시작하려면 어떻게 해야 하나요?
1단계: 측정 시작
먼저 Real User Monitoring (RUM) 도구를 사용하여 사이트의 필드 데이터를 측정하세요. 이미 다양한 Google 및 서드 파티 (3P) RUM 도구를 사용할 수 있습니다.
Google RUM 도구
- Search Console
- PageSpeed Insights
- web-vitals JavaScript 라이브러리
- Chrome 사용자 환경 보고서 (CrUX)
서드 파티 RUM 도구
- Cloudflare
- New Relic
- Akamai
- Calibre
- Blue Triangle
- Sentry
- SpeedCurve
- Raygun
자신에게 가장 적합한 도구를 선택하세요. 한 단계 더 나아가 Google 애널리틱스 4와 통합하여 핵심 웹 바이탈을 비즈니스 측정항목과 연결할 수도 있습니다.
2단계: 이해관계자 설득하기
- 사용자 환경을 개선하기 위해 핵심 웹 바이탈을 채택하는 것이 얼마나 중요한지, 그리고 핵심 웹 바이탈이 회사의 비즈니스 측정항목과 어떤 관련이 있는지 이해관계자에게 안내합니다.
- 소규모 실험을 시작할 수 있도록 내부에서 스폰서를 찾습니다.
- 팀 전반에서 Core Web Vitals를 개선하기 위해 이해관계자 간에 공유 목표를 만듭니다.
3단계: 다음 도움말을 사용하여 성공적인 구현하기
- 우선순위 지정: 의미 있는 결과를 얻기 위해 트래픽 또는 전환이 많은 페이지 (예: 광고 방문 페이지, 전환 페이지 또는 인기 페이지)를 선택합니다.
- A/B 테스트: 서버 측 테스트를 사용하여 렌더링 비용을 방지합니다. 최적화된 버전과 최적화되지 않은 버전의 결과를 비교합니다.
- 모니터링: 지속적인 모니터링을 사용하여 회귀를 방지합니다.
마지막으로, 실적은 목적지가 아니라 여정이라고 생각합니다. 이 도움말은 최신 사례 연구의 주요 내용을 반영하여 계속 업데이트될 예정입니다. 또한 실적이 우수하여 이 도움말에 소개하고자 하는 경우 콘텐츠 제안서를 제출하세요.