Core Web Vitals · 하이브리드 코호트
Lighthouse·RUM으로 읽는 LCP 클리닉
Chrome DevTools Performance 패널과 Lighthouse CI를 연결해, 배포 파이프라인에서 회귀를 잡는 흐름까지 다룹니다. 단순 점수 올리기가 아니라, 사용자 환경별 분포를 해석하는 데 초점을 맞춥니다.
모듈 구성
- Navigation Timing API 실습 스크립트
- Lighthouse CI GitHub Actions 샘플
- 필드·랩 비교 리포트 템플릿
- 레이아웃 쉬프트 재현용 fixture 페이지
- 멘토 1:1 코드 리뷰 2회
- 성능 예산 체크리스트
- 수료 후 30일 질의 채널
수료 후 행동
- 배포 전후 LCP 분포를 동일 지표로 설명할 수 있다
- 회귀 PR에 자동 성능 게이트를 붙일 수 있다
- 우선순위 매트릭스로 수정 범위를 제안할 수 있다
질문
코호트 메모
“Lighthouse CI 스니펫이 바로 우리 모노레포에 붙었습니다. 다만 fixture 페이지 번들이 처음엔 커서 멘토 세션에서 한 번 정리했습니다.”
“필드/랩 비교 표가 회의실에서 설득력 있었습니다. 수치만 모였던 리포트가 줄었습니다.”