Kapsule Orbit 웹 바이탈

The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…

Orbit Web Vitals 탭은 합성 테스트가 아닌 프로젝트의 실제 방문자로부터 수집한 Core Web Vitals를 보고합니다. 따라서 사람들이 자신의 기기와 연결에서 실제로 경험하는 것을 볼 수 있습니다.

Web Vitals의 위치

Orbit을 열고 프로젝트를 클릭한 후 프로젝트 탭 스트립의 Observability 그룹 아래에서 Web Vitals를 선택합니다. 페이지 제목은 Web Vitals이며 헤드라인 숫자를 설명합니다: p75는 페이지 경험에 사용되는 점수입니다.

사이트에 수집기를 추가할 때까지 페이지에는 표시할 내용이 없으므로 하단의 설정 카드부터 시작하세요.

수집기 추가

설정 카드는 사이트의 <head>에 추가할 한 줄의 스크립트 태그를 제공합니다:

<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>

프로젝트의 슬러그가 이미 입력된 정확한 라인은 페이지에 있습니다. 입력하지 말고 페이지에서 복사하세요.

스크립트는 방문자가 각 페이지를 떠날 때 5개의 메트릭을 수집하고 단일 배치로 보고합니다. 개인 식별 정보는 캡처되지 않으며 쿠키도 설정되지 않으므로 자체적으로 동의 요구 사항을 추가하지 않습니다.

첫 번째 실제 페이지 뷰 후 약 30초 내에 데이터가 나타나기 시작합니다. 그 이후에도 아무것도 표시되지 않으면 스크립트가 로드되지 않는 것입니다: 라이브 사이트의 브라우저 네트워크 탭을 확인하세요.

동일한 수집기의 두 번째 복사본이 Settings의 Web Analytics 카드 아래에서 제공되며, 패널 도메인에서 로드되고 </body> 태그를 닫기 전에 배치됩니다. 둘 다 작동하며 동일한 데이터를 피드합니다. 하나를 사용하고 둘 다 사용하지 마세요. 둘 다 사용하면 모든 페이지 뷰가 두 번 계산됩니다.

5가지 메트릭

메트릭	측정 대상
LCP	Largest Contentful Paint: 주 콘텐츠가 표시될 때까지 걸리는 시간
INP	Interaction to Next Paint: 페이지가 입력에 응답하는 속도
CLS	Cumulative Layout Shift: 로드 중 레이아웃이 얼마나 움직이는지
FCP	First Contentful Paint: 처음 그려질 때까지 걸리는 시간
TTFB	Time to First Byte: 서버가 응답을 시작하는 데 걸린 시간

처음 세 개는 Core Web Vitals입니다. FCP와 TTFB는 진단용입니다: LCP가 나쁜 이유가 느린 서버인지 느린 페이지인지 알려줍니다.

p75 읽기

이 페이지의 모든 수치는 평균이 아닌 선택된 기간의 샘플에 대한 p75입니다. 방문자의 4분의 3은 적어도 이 정도로 좋은 경험을 했으며, 4분의 1은 그보다 나쁜 경험을 했습니다.

이 선택은 중요합니다. 평균은 좋은 연결의 많은 빠른 방문으로 인해 지배되며 꼬리를 숨깁니다. p75는 그렇지 않습니다: p75 LCP가 4초이면 방문자 4명 중 1명이 그보다 오래 대기합니다.

각 메트릭 카드에는 Good, Needs improvement 또는 Poor 등급과 이를 계산하는 데 사용된 샘플 수가 표시됩니다. LCP의 경우 페이지에 경계를 직접 표시합니다: good은 2500ms 이하이고, poor는 4000ms 초과입니다.

샘플 수가 적은 카드는 의심의 여지가 있습니다. 12개 샘플 이상의 p75는 노이즈입니다. 이에 조치를 취하기 전에 페이지 상단의 선택기로 기간을 확장하거나 더 많은 트래픽을 기다리세요.

추세 차트

추세 차트는 선택된 기간에 걸쳐 LCP와 CLS의 일별 p75를 그리며, good 및 poor 임계값을 표시합니다. 부제목은 찾아야 할 것을 알려줍니다: 평평한 선은 건강함을 나타냅니다.

특정 날짜의 단계 변화는 유용한 신호입니다. 거의 항상 배포와 일치하기 때문입니다. 날짜를 Deployments 탭과 대조하거나 프로젝트 타임라인에 이벤트를 표시하여 다음에 주석이 달리도록 하세요: Orbit Timeline Annotations 참조.

수주에 걸친 느린 상승 추세는 다른 문제입니다. 보통 단일 변경이 아닌 누적된 페이지 무게입니다.

상위 국가

Top countries는 에지 헤더에서 파생된 국가별 샘플 볼륨을 보여줍니다. 분석용이 아닌 컨텍스트를 위한 것입니다: 전체적으로 poor로 보이는 p75는 종종 주요 시장에서는 괜찮고 더 멀고 작은 대중에 의해 지배되는 것으로 나타납니다.

대부분의 트래픽이 원점에서 멀면 코드를 더 최적화하는 것보다 에지에서 더 적극적으로 캐싱하는 것이 주장입니다.

주의가 필요한 페이지

Pages needing attention 테이블은 각 메트릭에 대해 p75가 good 임계값 위에 얼마나 높은지를 기준으로 경로를 순위 매기며, 각 행의 샘플 수를 표시합니다.

전체 사이트를 개선하려고 하지 말고 이 테이블을 내려가며 작업하세요. 2~3개의 템플릿이 보통 문제의 대부분을 차지하며, 템플릿을 수정하면 그것을 사용하는 모든 페이지가 수정됩니다.

확인하는 것이 가치 있는 순서대로 일반적인 원인:

크기가 조정되지 않거나 미리 로드되지 않은 hero 이미지. 이것이 가장 빈번한 LCP 문제입니다.
메인 스레드를 차단하는 타사 스크립트. 채팅 위젯, 태그 관리자 및 분석 스택이 일반적인 용의자이며, INP에 가장 큰 손상을 줍니다.
크기가 없는 이미지 및 임베드. 로드되는 동안 레이아웃을 이동시키며, 이는 정확히 CLS가 측정하는 것입니다.
느린 원점 응답. TTFB가 poor이면 위의 어느 것도 도움이 되지 않습니다. 해결책은 캐싱 또는 더 빠른 응답이며, 프론트엔드 작업이 아닙니다.

이 기간에 샘플 없음

페이지에 샘플이 없다고 표시되면 3가지 중 하나가 해당됩니다:

수집기가 추가되지 않았거나 사람들이 방문하는 페이지에서 로드되지 않습니다.
최근에 추가되었고 아직 누구도 방문하지 않았습니다.
선택된 기간이 마지막 트래픽 이후 간격보다 짧습니다.

먼저 기간을 확장하세요. 그것이 무료이기 때문입니다. 그 다음 라이브 사이트의 제공된 HTML에 스크립트가 있는지만 확인하고 원본에만 있지 않은지 확인하세요.

데이터 유지 기간

개별 샘플은 30일이 되면 자동으로 정리되며, 야간 작업입니다. 기간 선택기를 사용하면 유지된 기록을 확인할 수 있습니다: 그 이상의 아카이브는 없습니다.

장기 기록이 필요하면 스크린샷을 찍거나 p75 값을 특정 시점(예: 성능 프로젝트 직전과 직후)에 기록하여 나중에 인용할 수 있는 before와 after를 가지세요.

공개 상태 페이지의 Vitals

프로젝트에 대한 상태 페이지를 게시하면 같은 Core Web Vitals 요약을 방문자에게 가동 시간 및 최근 배포와 함께 표시할 수 있습니다. Orbit Status Page를 참조하세요.

다음으로 이동할 위치

Orbit Project Analytics: 빌드 측 숫자와 축약된 vitals 요약.
Orbit Timeline Annotations: 단계 변화 뒤의 배포 및 인시던트를 표시합니다.
Website Speed: 일반적인 성능 조언을 위해.