코어 웹 바이탈 모니터링

코어 웹 바이탈 모니터링 개요

사이트를 최적화한 후 프로덕션 환경에서 지속적으로 모니터링하여 반복 작업을 수행하는 것이 중요합니다. 코어 웹 바이탈을 모니터링 할 때 일회성 랩 테스트에 의존하기보다는 시간 경과에 따른 추적이 핵심입니다. 여기에서는 다음과 같은 내용을 더 자세히 알게 됩니다.

• Next.js Speed Insights (스피드 인사이트)
• Next.js 사용자 정의 보고
• CrUX 보고서
• 기타 측정 도구들

Next.js Speed Insights

Next.js Speed Insights를 통해 코어 웹 바이탈을 사용하여 페이지의 성능을 분석하고 측정할 수 있습니다.

Vercel 배포에서 구성 없이 실제 점수를 수집하기 시작할 수 있습니다.

사용자 정의 보고

또한 Next.js Speed Insights에서 사용하는 내장된 릴레이를 사용하여 데이터를 자체 서비스로 보내거나 Google Analytics로 보낼 수 있습니다. 이를 위해 Next.js에서 제공하는 reportWebVitals 함수를 활용할 수 있습니다.

크롬 사용자 경험 보고서

성능을 측정하는 또 다른 무료 오픈소스 방법은 크롬 사용자 경험 보고서 데이터 세트를 사용하는 것입니다.

크롬 사용자 경험 보고서는 실제 크롬 사용자가 웹의 인기 목적지에서 어떻게 경험하는지에 대한 사용자 경험 메트릭을 제공합니다. 이 데이터 세트는 BigQuery에서 공개적으로 이용 가능하며 Google Data Studio에서도 완전히 무료로 사용할 수 있습니다. 운 좋게도 사용할 수 있는 오픈소스 대시보드 템플릿이 있어 웹사이트의 성능을 추적할 수 있습니다.

이 데이터 세트의 유일한 단점은 CrUX 보고서에 웹사이트가 포함되기 위해서는 의미 있는 방문 횟수가 필요하며 그렇지 않으면 데이터가 부족하다는 이유로 보고서에 포함되지 않을 것이라는 것입니다. 따라서 이는 진행 중이거나 최근에 생성된 웹사이트에는 최선의 옵션이 아닐 수 있습니다.

또한 데이터는 월별로 업데이트됩니다. 보통 달이 끝난 후 약 15일 정도 뒤에 업데이트되므로 일정한 지연과 함께 데이터를 볼 수 있습니다. 이는 코어 웹 바이탈 점수를 개선하는 작업을 계획하는 경우 가장 실용적이지 않을 수 있습니다.

기타 도구들

다음 도구에서 필드 데이터 수집을 찾을 수 있습니다.

• PageSpeed Insights: 구글의 페이지 속도 측정 도구
• 크롬 사용자 경험 보고서: 필드 데이터 오픈소스 데이터 세트
• 검색 콘솔: 구글 검색, 코어 웹 바이탈 보고서

랩 데이터를 찾고 있다면, Google도 여러 측정 도구를 제공합니다.

• Lighthouse: 웹 페이지의 품질을 개선하기 위한 구글의 오픈소스 자동화 도구
• Chrome DevTools: 구글 크롬 브라우저에 직접 내장된 웹 개발자 도구 세트

두 도구 모두 필드 데이터를 통해서만 측정할 수 있는 FID 대신 Total Blocking Time (TBT)을 사용해야 합니다.