웹 바이탈을 개선하는 첫 번째 단계는 사이트의 웹 바이탈 데이터를 수집하는 것입니다. 포괄적인 분석을 위해서는 실제 환경과 실험실 환경에서 모두 성능 데이터를 수집해야 합니다. 웹 바이탈을 측정하려면 최소한의 코드 변경이 필요하며 무료 도구를 사용하여 측정할 수 있습니다.
RUM 데이터를 사용하여 웹 바이탈 측정
실제 사용자 모니터링 (RUM) 데이터는 필드 데이터라고도 하며 사이트의 실제 사용자가 경험하는 성능을 캡처합니다. Google은 RUM 데이터를 사용하여 사이트가 권장 Core Web Vitals 기준점을 충족하는지 확인합니다.
시작하기
RUM이 설정되어 있지 않은 경우 다음 도구를 사용하면 사이트의 실제 성능에 관한 데이터를 빠르게 확인할 수 있습니다. 이러한 도구는 모두 동일한 기본 데이터 세트(Chrome 사용자 환경 보고서)를 기반으로 하지만 사용 사례는 약간 다릅니다.
- Chrome DevTools는 Performance 패널의 실시간 측정항목 뷰에서 CrUX 데이터 세트와 통합됩니다. 로컬 환경을 동일한 페이지의 실제 사용자 환경과 비교하면 디버깅 작업의 중점을 어디에 둘지 더 정확한 정보를 바탕으로 결정할 수 있습니다. 사이트의 Core Web Vitals를 측정하고 개선하기 위해 취할 수 있는 단일 작업을 찾고 있다면 Chrome DevTools Performance 패널을 사용하는 것이 좋습니다.
- PageSpeed Insights(PSI)는 지난 28일 동안의 집계된 페이지 수준 및 출처 수준 실적을 보고합니다. 또한 성능을 개선하는 방법에 관한 제안도 제공합니다. PSI는 웹에서 API로 사용할 수 있습니다.
- Search Console은 페이지별로 실적 데이터를 보고합니다. 따라서 개선이 필요한 특정 페이지를 파악하는 데 적합합니다. PageSpeed Insights와 달리 Search Console 보고서에는 이전 실적 데이터가 포함됩니다. Search Console은 소유하고 있고 소유권을 인증한 사이트에서만 사용할 수 있습니다.
- CrUX 대시보드는 선택한 출처의 CrUX 데이터를 표시하는 사전 빌드된 대시보드입니다. Data Studio를 기반으로 하며 설정 프로세스는 1분 정도 걸립니다. PageSpeed Insights 및 Search Console에 비해 CrUX 대시보드 보고에는 더 많은 측정기준이 포함됩니다. 예를 들어 데이터를 기기 및 연결 유형별로 분류할 수 있습니다.
앞서 나열된 도구는 웹 바이탈 측정을 '시작'하는 데 적합하지만 다른 상황에서도 유용할 수 있습니다. 특히 CrUX와 PSI는 모두 API로 제공되며 대시보드 빌드 및 기타 보고에 사용할 수 있습니다.
RUM 데이터 수집
CrUX 기반 도구는 Core Web Vitals 성능을 조사하기 위한 좋은 출발점이지만 자체 RUM으로 보완하는 것이 좋습니다. 직접 수집한 RUM 데이터를 사용하면 사이트 실적에 대한 더 자세하고 즉각적인 피드백을 얻을 수 있습니다. 이렇게 하면 더 쉽게 문제를 파악하고 가능한 해결 방법을 테스트할 수 있습니다.
전용 RUM 제공업체를 사용하거나 자체 도구를 설정하여 자체 RUM 데이터를 수집할 수 있습니다.
전용 RUM 제공업체는 RUM 데이터 수집 및 보고에 특화되어 있습니다. 이러한 서비스에서 Core Web Vitals를 사용하려면 RUM 제공업체에 사이트의 Core Web Vitals 모니터링 사용 설정에 대해 문의하세요.
RUM 제공업체가 없는 경우 web-vitals JavaScript 라이브러리를 사용하여 기존 분석 설정을 보강하여 이러한 측정항목을 수집하고 보고할 수 있습니다. 이 방법은 다음에 자세히 설명합니다.
웹-비탈스 JavaScript 라이브러리
웹 성능 보고서용 자체 RUM 설정을 구현하는 경우 웹 성능 보고서 측정값을 수집하는 가장 쉬운 방법은 web-vitals JavaScript 라이브러리를 사용하는 것입니다. web-vitals는 필드 측정 가능 웹 바이탈 측정항목을 각각 수집하고 보고하는 데 편리한 API를 제공하는 작은 모듈식 라이브러리 (2KB 이하)입니다.
웹 바이탈을 구성하는 측정항목은 모두 브라우저의 내장 성능 API에 의해 직접 노출되는 것이 아니라 API를 기반으로 빌드됩니다. 예를 들어 레이아웃 변경 횟수 (CLS)는 Layout Instability API를 사용하여 구현됩니다. web-vitals를 사용하면 이러한 측정항목을 직접 구현하는 것에 대해 걱정할 필요가 없습니다. 또한 수집한 데이터가 각 측정항목의 방법론 및 권장사항과 일치하도록 보장합니다.
web-vitals 구현에 관한 자세한 내용은 문서 및 현장에서 Core Web Vitals를 측정하기 위한 권장사항 가이드를 참고하세요.
데이터 집계
web-vitals에서 수집한 측정값을 보고해야 합니다. 이 데이터가 측정되었지만 보고되지 않은 경우 보고서에 표시되지 않습니다. web-vitals 문서에는 데이터를 일반 API 엔드포인트, Google 애널리틱스 또는 Google 태그 관리자로 전송하는 방법을 보여주는 예시가 포함되어 있습니다.
이미 선호하는 보고 도구가 있다면 해당 도구를 사용하는 것이 좋습니다. 그렇지 않은 경우 Google 애널리틱스를 무료로 사용하여 이 목적을 달성할 수 있습니다.
사용할 도구를 고려할 때는 데이터에 액세스해야 하는 사용자를 생각해 보는 것이 좋습니다. 일반적으로 한 부서가 아닌 전체 회사가 실적 개선에 관심을 가질 때 가장 큰 실적 향상을 얻을 수 있습니다. 여러 부서의 지원을 얻는 방법을 알아보려면 기능 간 웹사이트 속도 개선을 참고하세요.
데이터 해석
실적 데이터를 분석할 때는 분포의 꼬리에 주의를 기울이는 것이 중요합니다. RUM 데이터는 성능이 크게 다르다는 것을 종종 보여줍니다. 일부 사용자는 빠른 환경을 경험하고 다른 사용자는 느린 환경을 경험합니다. 그러나 중앙값을 사용하여 데이터를 요약하면 이 동작을 마스킹할 수 있습니다.
Core Web Vitals와 관련하여 Google은 중앙값이나 평균과 같은 통계가 아닌 '좋음' 경험의 비율을 사용하여 사이트 또는 페이지가 권장 기준점을 충족하는지 판단합니다. 구체적으로 사이트 또는 페이지가 Core Web Vitals 기준점을 충족하는 것으로 간주되려면 페이지 방문의 75%가 각 측정항목의 '좋음' 기준점을 충족해야 합니다.
실험실 데이터를 사용하여 웹 바이탈 측정
합성 데이터라고도 하는 실험실 데이터는 실제 사용자가 아닌 통제된 환경에서 수집됩니다. RUM 데이터와 달리 실험실 데이터는 사전 프로덕션 환경에서 수집할 수 있으므로 개발자 워크플로 및 지속적 통합 프로세스에 통합할 수 있습니다. 합성 데이터를 수집하는 도구의 예로는 Lighthouse와 WebPageTest가 있습니다.
고려사항
RUM 데이터와 실습 데이터 간에는 항상 불일치가 발생합니다. 특히 실습 환경의 네트워크 조건, 기기 유형 또는 위치가 사용자의 네트워크 조건, 기기 유형 또는 위치와 크게 다른 경우 더욱 그렇습니다. 하지만 특히 Core Web Vitals 측정항목에 관한 실험실 데이터를 수집할 때는 몇 가지 구체적인 고려사항을 유의해야 합니다.
- 실험실 환경에서 측정되는 최대 콘텐츠 페인트 (LCP)는 페이지 로드 지연 (리디렉션, 서버 연결 지연 시간 또는 캐시되지 않은 데이터를 통해), 화면에 따라 다른 사용자에게 표시되는 다양한 콘텐츠 또는 기타 이유 (쿠키 배너, 맞춤설정 등)로 인해 RUM 데이터로 현장에서 측정된 수치와 다를 수 있습니다.
- 실험실 환경에서 측정된 누적 레이아웃 전환(CLS)은 RUM 데이터에서 관찰된 CLS보다 인위적으로 낮을 수 있습니다. 많은 실험실 도구는 페이지를 로드하기만 하고 페이지와 상호작용하지는 않습니다. 따라서 초기 페이지 로드 중에 발생하는 레이아웃 변경만 캡처합니다. 반면 RUM 도구로 측정된 CLS는 페이지의 전체 수명 동안 발생하는 예기치 않은 레이아웃 변경을 포착합니다.
- 다음 페인트까지의 상호작용(INP)은 페이지와의 사용자 상호작용이 필요하므로 실험실 환경에서 측정할 수 없습니다. 따라서 총 차단 시간(TBT)이 INP에 권장되는 실험실 프록시입니다. TBT는 '콘텐츠가 포함된 첫 페인트와 상호작용 시작 시간 사이의 총 시간으로, 이 시간 동안 페이지가 사용자 입력에 응답하지 못하도록 차단됩니다'. INP와 TBT는 다르게 계산되지만 둘 다 부트스트랩 프로세스 중에 차단된 기본 스레드를 반영합니다. 기본 스레드가 차단되면 브라우저의 사용자 상호작용에 대한 응답이 지연됩니다.
도구
다음 도구를 사용하여 웹 바이탈의 실험실 측정값을 수집할 수 있습니다.
- Chrome DevTools는 Performance 패널의 실시간 측정항목 뷰에서 특정 페이지의 Core Web Vitals를 측정하고 보고합니다. 이 뷰는 개발자가 코드를 변경할 때 실시간 성능 피드백을 제공합니다.
- Lighthouse Lighthouse는 LCP, CLS, TBT에 관한 보고서를 제공하고 가능한 성능 개선사항도 강조 표시합니다. Lighthouse는 Chrome DevTools에서 npm 패키지로 사용할 수 있으며 Lighthouse CI를 사용하여 지속적 통합 워크플로에 통합할 수도 있습니다.
- WebPageTest에는 표준 보고의 일부로 Web Vitals가 포함되어 있습니다. WebPageTest는 특정 기기 및 네트워크 조건에서 Web Vitals에 관한 정보를 수집하는 데 유용합니다.