Core Web Vitals

21.1.1. LCP (Largest Contentful Paint)

LCP는 페이지의 주요 콘텐츠가 화면에 렌더링되기까지 소요되는 시간을 측정합니다.

등급	기준값	TQS 요구 사항
Good	2.5초 이하	필수
Needs Improvement	2.5초 ~ 4.0초	허용 불가
Poor	4.0초 초과	허용 불가

• LCP 목표값은 2.5초 이하를 충족해야 합니다.
• 측정은 실제 사용자 데이터(RUM) 기준 75번째 백분위수(p75)를 적용합니다.
• Chrome DevTools의 Performance 탭 또는 web-vitals 라이브러리를 사용하여 측정합니다.

LCP 최적화 전략은 다음과 같습니다.

• 히어로 이미지에 fetchpriority="high" 속성을 지정해야 합니다.
• LCP 대상 리소스에 <link rel="preload">를 적용해야 합니다.
• 서버 응답 시간(TTFB)을 500ms 이하로 유지해야 합니다.
• 렌더링 차단 리소스(CSS, 동기 스크립트)를 최소화해야 합니다.

---

21.1.2. INP (Interaction to Next Paint)

INP는 사용자 인터랙션 발생 시점부터 다음 프레임이 렌더링될 때까지의 지연 시간을 측정합니다. FID를 대체하는 지표로, 페이지 전체 생명주기 동안의 응답성을 평가합니다.

등급	기준값	TQS 요구 사항
Good	200ms 이하	필수
Needs Improvement	200ms ~ 500ms	허용 불가
Poor	500ms 초과	허용 불가

• INP 목표값은 200ms 이하를 충족해야 합니다.
• 이벤트 핸들러 내에서 동기적으로 무거운 연산을 수행하지 않아야 합니다.
• 장시간 실행 작업은 requestIdleCallback 또는 setTimeout으로 분할해야 합니다.
• 입력 이벤트 핸들러에서 강제 레이아웃 재계산(forced reflow)을 유발하지 않아야 합니다.
• 서드파티 스크립트가 메인 스레드를 장시간 점유하지 않도록 관리해야 합니다.

---

21.1.3. CLS (Cumulative Layout Shift)

CLS는 페이지 로딩 및 사용 중 발생하는 예기치 않은 레이아웃 이동의 누적 점수를 측정합니다.

등급	기준값	TQS 요구 사항
Good	0.1 이하	필수
Needs Improvement	0.1 ~ 0.25	허용 불가
Poor	0.25 초과	허용 불가

• CLS 목표값은 0.1 이하를 충족해야 합니다.
• 모든 이미지와 비디오 요소에 width와 height 속성을 명시해야 합니다.
• 웹 폰트 로딩 시 font-display: swap 또는 font-display: optional을 지정해야 합니다.
• 동적으로 삽입되는 콘텐츠(배너, 광고 등)에 대해 사전에 공간을 확보해야 합니다.
• transform 애니메이션을 사용하여 레이아웃 이동 없이 시각적 변화를 구현하는 것을 권장합니다.

---

21.1.4. Lighthouse 기준

Lighthouse 감사를 통해 전반적인 품질 지표를 측정합니다.

항목	최소 점수	TQS 요구 사항
성능(Performance)	90점	필수
접근성(Accessibility)	90점	필수
권장사항(Best Practices)	90점	권장
SEO	90점	권장

• CI 파이프라인에서 Lighthouse CI를 실행하여 자동으로 점수를 측정해야 합니다.
• 측정 환경은 다음 두 가지를 모두 포함해야 합니다.

환경	설정	비고
모바일	Moto G Power, 느린 4G 쓰로틀링	Lighthouse 기본 설정
데스크톱	쓰로틀링 없음	--preset=desktop 옵션 사용

• 성능 점수가 90점 미만인 빌드는 배포를 차단해야 합니다.
• Lighthouse 결과 보고서를 빌드 아티팩트로 보관하는 것을 권장합니다.
• 점수 하락 추이를 모니터링하고, 연속 3회 하락 시 원인을 분석해야 합니다.