시나리오 선택
첫 진입, 검색, 목록 스크롤처럼 사용자가 느끼는 경로를 고른다.
기록 실행
캐시 조건과 throttling을 고정하고 performance trace를 수집한다.
병목 분류
네트워크 대기인지 메인 스레드 작업인지 렌더링 비용인지 나눈다.
개선 비교
코드 변경 뒤 같은 조건에서 지표와 flame chart가 줄었는지 본다.
LCP
주요 콘텐츠 표시
hero 이미지, 서버 응답, CSS 차단이 영향을 준다
이미지 preload와 크기 지정 확인
INP
입력 반응성
클릭 뒤 긴 JS task와 렌더링 지연을 확인
작업 분할과 불필요한 렌더 제거
CLS
레이아웃 안정성
이미지·광고·폰트 로딩으로 밀리는 요소를 확인
예약 공간과 font-display 정책
Bundle
전송·파싱 비용
초기 JS 크기, 중복 의존성, polyfill을 점검
code splitting은 실제 경로 기준