웹 바이탈 측정 시작하기

케이티 헴페니우스
Katie Hempenius
X

웹 바이탈을 개선하기 위한 첫 단계는 사이트의 웹 바이탈 데이터를 수집하는 것입니다. 포괄적인 분석을 통해 실제 환경과 실험실 환경 모두에서 성능 데이터를 수집합니다. 웹 바이탈을 측정하려면 최소한의 코드만 변경하면 되며 무료 도구를 사용하여 측정할 수 있습니다.

RUM 데이터를 사용하여 웹 바이탈 측정

필드 데이터라고도 하는 실제 사용자 모니터링 (RUM) 데이터는 사이트의 실제 사용자가 경험하는 성능을 캡처합니다. Google에서는 RUM 데이터를 사용하여 사이트가 권장 코어 웹 바이탈 기준점을 충족하는지 확인합니다.

시작하기

RUM을 설정하지 않은 경우 다음 도구를 사용하면 사이트의 실제 성능에 대한 데이터를 빠르게 확인할 수 있습니다. 이 도구들은 모두 동일한 기본 데이터 세트 (Chrome 사용자 환경 보고서)를 기반으로 하지만 다음과 같이 사용 사례가 약간 다릅니다.

  • PageSpeed Insights (PSI): PageSpeed Insights는 지난 28일 동안 집계된 페이지 수준 및 출처 수준의 실적을 보고합니다. 실적 개선 방법에 관한 제안사항도 제공됩니다. 사이트의 웹 바이탈을 측정하고 개선하기 위해 해야 할 단일 작업을 찾고 있다면 PSI를 사용하여 사이트를 검사하는 것이 좋습니다. PSI는 웹에서 API로 사용할 수 있습니다.
  • Search Console: Search Console은 페이지별로 실적 데이터를 보고합니다. 따라서 개선이 필요한 특정 페이지를 식별하는 데 적합합니다. PageSpeed Insights와 달리 Search Console 보고서에는 이전 실적 데이터가 포함됩니다. Search Console은 내가 소유하고 소유권이 확인된 사이트에서만 사용할 수 있습니다.
  • CrUX 대시보드: CrUX 대시보드는 선택한 출처의 CrUX 데이터를 표시하는 사전 빌드된 대시보드입니다. 데이터 스튜디오를 기반으로 구축되며 설정 과정은 1분 정도 걸립니다. PageSpeed Insights 및 Search Console과 비교할 때 CrUX 대시보드 보고서에는 더 많은 측정기준이 포함되어 있습니다. 예를 들어 데이터를 기기 및 연결 유형별로 분류할 수 있습니다.

위에 나열된 도구는 웹 바이탈 측정을 '시작'하는 데 적합하지만 다른 상황에서도 유용할 수 있습니다. 특히 CrUX와 PSI는 모두 API로 제공되며 대시보드 작성 및 기타 보고에 사용할 수 있습니다.

RUM 데이터 수집

CrUX 기반 도구는 웹 바이탈 성능을 조사하는 데 좋은 출발점이기는 하지만 자체 RUM으로 보완하는 것이 좋습니다. 직접 수집하는 RUM 데이터는 사이트 실적에 대한 상세하고 즉각적인 피드백을 제공합니다. 이렇게 하면 더 쉽게 문제를 파악하고 가능한 솔루션을 테스트할 수 있습니다.

전용 RUM 제공업체를 사용하거나 자체 도구를 설정하여 자체 RUM 데이터를 수집할 수 있습니다.

전용 RUM 제공업체는 RUM 데이터를 수집하고 보고하는 데 특화되어 있습니다. 이러한 서비스와 함께 코어 웹 바이탈을 사용하려면 RUM 제공업체에 사이트의 코어 웹 바이탈 모니터링 사용 설정에 관해 문의하세요.

RUM 제공업체가 없는 경우 web-vitals JavaScript 라이브러리를 사용하여 이러한 측정항목을 수집하고 보고하도록 기존 분석 설정을 보강할 수 있습니다. 이 방법은 아래에 자세히 설명되어 있습니다.

web-vitals JavaScript 라이브러리

웹 바이탈의 자체 RUM 설정을 구현하는 경우 웹 바이탈 측정을 수집하는 가장 쉬운 방법은 web-vitals 자바스크립트 라이브러리를 사용하는 것입니다. web-vitals는 필드 측정 가능한 각 웹 바이탈 측정항목을 수집하고 보고하는 데 편리한 API를 제공하는 작은 모듈식 라이브러리 (약 1KB)입니다.

웹 바이탈을 구성하는 측정항목은 모두 브라우저의 기본 제공 성능 API에 의해 직접 노출되는 것이 아니라 그 위에 구축됩니다. 예를 들어 레이아웃 변경 횟수 (CLS)는 Layout Instability API를 사용하여 구현됩니다. web-vitals를 사용하면 이러한 측정항목을 직접 구현할 필요가 없습니다. 또한 수집하는 데이터가 각 측정항목의 방법 및 권장사항과 일치하도록 할 수 있습니다.

web-vitals 구현에 관한 자세한 내용은 문서 및 필드의 웹 바이탈 측정 권장사항 가이드를 참고하세요.

데이터 집계

web-vitals에서 수집한 측정값을 보고해야 합니다. 이 데이터가 측정되었지만 보고되지 않으면 표시되지 않습니다. web-vitals 문서에는 일반 API 엔드포인트, Google 애널리틱스 또는 Google 태그 관리자에 데이터를 전송하는 방법을 보여주는 예시가 포함되어 있습니다.

이미 즐겨 사용하는 신고 도구가 있다면 해당 도구를 사용해 보세요. 그렇지 않은 경우 Google 애널리틱스는 무료이며 이러한 용도로 사용할 수 있습니다.

사용할 도구를 고려할 때는 누가 데이터에 액세스할 수 있는지 생각하는 것이 좋습니다. 일반적으로 단일 부서가 아니라 회사 전체가 실적 개선에 관심을 가질 때 기업은 가장 큰 성과를 달성합니다. 여러 부서의 동의를 얻는 방법을 알아보려면 여러 부서의 웹사이트 속도 문제 해결을 참고하세요.

데이터 해석

실적 데이터를 분석할 때는 분포의 꼬리에 주의를 기울이는 것이 중요합니다. RUM 데이터는 종종 성능이 크게 달라진다는 것을 보여줍니다. 어떤 사용자는 빠른 경험을 하고 다른 사용자는 느린 경험을 합니다. 그러나 중앙값을 사용하여 데이터를 요약하면 이러한 동작을 쉽게 감출 수 있습니다.

웹 바이탈과 관련하여 Google에서는 중앙값이나 평균과 같은 통계 대신 '우수한' 경험의 비율을 사용하여 사이트나 페이지가 권장 기준점을 충족하는지 확인합니다. 특히 사이트 또는 페이지가 코어 웹 바이탈 기준점을 충족하는 것으로 간주되려면 페이지 방문수의 75% 가 각 측정항목의 '양호' 기준점을 충족해야 합니다.

실험실 데이터를 사용하여 웹 바이탈 측정

합성 데이터라고도 하는 실험실 데이터는 실제 사용자가 아닌 통제된 환경에서 수집됩니다. RUM 데이터와 달리 실험실 데이터는 사전 프로덕션 환경에서 수집되어 개발자 워크플로 및 지속적 통합 프로세스에 통합할 수 있습니다. 합성 데이터를 수집하는 도구의 예로는 Lighthouse와 WebPageTest가 있습니다.

고려사항

RUM 데이터와 실습 데이터 간에는 항상 불일치가 발생합니다. 특히 실습 환경의 네트워크 조건, 기기 유형 또는 위치가 사용자의 데이터와 크게 다른 경우 차이가 있습니다. 하지만 특히 웹 바이탈 측정항목에 관한 실습 데이터를 수집할 때 유의해야 할 몇 가지 구체적인 고려사항이 있습니다.

  • 누적 레이아웃 변경 (CLS): 실험실 환경에서 측정된 레이아웃 변경 횟수는 RUM 데이터에서 관찰된 CLS보다 인위적으로 낮을 수 있습니다. CLS는 '페이지의 전체 수명 기간 동안 발생하는 모든 예상치 못한 레이아웃 변경에 관한 모든 개별 레이아웃 변경 점수의 합계'로 정의됩니다. 그러나 페이지의 수명은 일반적으로 페이지가 실제 사용자에 의해 로드되는지 아니면 합성된 성능 측정 도구에 의해 로드되는지에 따라 매우 다릅니다. 많은 실험실 도구는 페이지만 로드하며 페이지와 상호작용하지 않습니다. 따라서 초기 페이지 로드 중에 발생하는 레이아웃 변경만 캡처합니다. 반대로 RUM 도구에서 측정한 CLS는 페이지의 전체 수명 동안 발생하는 예상치 못한 레이아웃 변경을 캡처합니다.
  • 최초 입력 반응 시간 (FID): 최초 입력 반응 시간은 사용자와 페이지 상호작용이 필요하므로 실험실 환경에서는 측정할 수 없습니다. 따라서 총 차단 시간 (TBT)이 FID에 권장되는 실습 프록시입니다. TBT는 '콘텐츠가 포함된 첫 페인트와 상호작용까지의 총 시간 사이에 페이지가 사용자 입력에 응답하지 못하도록 차단된 시간'을 측정합니다. FID와 TBT는 다르게 계산되지만 둘 다 부트스트랩 프로세스 중에 차단된 기본 스레드를 반영한 것입니다. 기본 스레드가 차단되면 브라우저가 사용자 상호작용에 응답하는 데 지연이 발생합니다. FID는 사용자가 페이지와 처음 상호작용하려고 할 때 발생하는 지연을 측정합니다(있는 경우).

도구

다음 도구를 사용하여 웹 바이탈의 실험실 측정값을 수집할 수 있습니다.

  • 웹 바이탈 Chrome 확장 프로그램: 웹 바이탈 Chrome 확장 프로그램은 특정 페이지의 코어 웹 바이탈 (LCP, FID, CLS)을 측정하고 보고합니다. 이 도구는 개발자가 코드를 변경할 때 실시간 성능 피드백을 제공하기 위해 만들어졌습니다.
  • Lighthouse: Lighthouse는 LCP, CLS, TBT에 관해 보고하고 가능한 성능 개선도 강조합니다. Lighthouse는 Chrome DevTools에서 Chrome 확장 프로그램 및 npm 패키지로 사용할 수 있습니다. Lighthouse는 Lighthouse CI를 통해 지속적 통합 워크플로에 통합할 수도 있습니다.
  • WebPageTest: WebPageTest는 웹 바이탈을 표준 보고의 일부로 포함합니다. WebPageTest는 특정 기기 및 네트워크 조건에서 웹 바이탈에 관한 정보를 수집하는 데 유용합니다.