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