[Next.js] SEO - 6. Monitoring your Core Web Vitals

사이트 최적화를 하면, 계속해서 반복할 수 있도록 프로덕션 중에 모니터링 하는 것이 중요하다. Core Web Vitals을 모니터링 할 때, 일회성 랩 테스트에 의존하는 것보다 시간 경과에 따른 추적이 핵심이다. 

 

 

Next.js Analytics

Next.js Analytics는 Core Web Vitals를 사용하여 페이지의 성능을 측정하고 분석한다. 

 

Vercel 배포에서 구성 없이 Real Experience Score를 수집할 수 있고, 자체 호스팅하는 경우 분석에 대해서도 지원한다. 

 

 

---

Custom Reporting

또한 Next.js Analytics에서 사용하는 내장 relayer를 사용하여 데이터를 사용자 자신의 서비스로 전송하거나 Google Analytics에 푸시할 수도 있다. 

 

이제 이것을 어떻게 추가하는지 보자. 최적화한 데모 앱에 추가할 수 있다. 

 

console.log를 사용하여 실시간으로 메트릭스를 확인한다. 

 

이를 위해 Next.js에서 제공하는 reportWebVitals 기능을 활용할 수 있다.

 

앞서 만들었던 nextjs-lighthouse 폴더를 열고 pages/_app.js 파일을 열어 아래 코드를 export한다.

export function reportWebVitals(metric) {
  console.log(metric)
}

그리고 앱을 빌드하고 시작한다.

yarn build && yarn start

크롬을 열고 개발자 도구 콘솔을 안에 메트릭스를 볼 수 있을것이다. 또한 FID가 페이지와 상호작용 할 때에만 트리거되는 것을 볼 수 있다. 

 

 

---

Monitoring your Core Web Vitals

Data Studio (Chrome User Experience Report)

성능을 측정하는 또 다른 무료 오픈 소스는 Chrome User Experience Report 데이터세트를 사용하는 것이다. 

 

Chrome User Experience Report는 실제 크롬 사용자가 웹에서 인기 있는 목적지를 어떻게 경험하는지에 대한 사용자 경험 측정 항목을 제공한다.

 

이 데이터 세트는 BigQuery에서 공개적으로 사용 가능하며 구글 데이터 스튜디오에서 완전히 무료로 사용할수도 있다. 

 

웹사이트 성능을 추적하기 위한 템플릿으로 사용할 수 있는 오픈소스 대시보드가 있다. 

 

이 데이터 세트의 유일한 단점은 웹사이트가 CrUX 보고서에 포함되려면 의미 있는 방문 횟수가 있어야 한다는 것이다. 그렇지 않으면 데이터 부족으로 인해 보고서에 포함되지 않는다. 따라서 이는 진행 중인 작업이나 최근에 만든 웹사이트에 가장 적합하지 않을 수 있다. 

 

또한 데이터는 매월 업데이트된다. 일반적으로 월이 끝난 후 약 15일 후에 데이터를 볼 수 있으므로 특정 지연 시간이 발생하며, Core Web Vitals 점수를 개선하려는 경우 가장 실용적인 방법이 아닐 수 있다. 

 

 

---

Other Tools

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

• PageSpeed Insights: 구글의 페이지 속도 측정 도구
• Chrome User Experience Report: 필드 데이터 오픈 소스 데이터 세트
• Search Console: 구글 검색, Core Web Vitals 보고서

 

만약 랩 데이터를 찾고 있다면, 구글은 다음과 같은 측정 도구도 제공한다.

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

 

FID(First Input Delay)는 필드 데이터를 통해서만 측정할 수 있기 때문에 두 도구 모두 FID의 대안으로 TBT(Total Blocking Time)를 사용해야 한다.

 

 

Lab data: 인위적이며 사전 정의된 하나의 장치, 위치 및 인터넷 연결으로부터 수집된다. 따라서 테스트 또는 디버깅 환경에서 작업하는 경우에 사용한다.

Field data: 많은 사용자로부터 수집되며, 이를 필터링하여 특정 사용자와 그들의 경험에 집중할 수 있다. 따라서 사용자가 경험하는 실제 성능을 확인하기 위해 사용한다.

 

 

 

 

 

 

참고 Lab data and Field data

참고 https://nextjs.org/learn/seo/monitor