성능 프로파일을 네트워크·스크립트·렌더링으로 분류하기

시나리오

첫 진입, 검색, 스크롤처럼 실제 사용자가 느끼는 행동을 고른다.

캐시, 네트워크, CPU throttling 조건을 맞춘다.

긴 task, 차단 CSS, 큰 이미지, layout thrashing 위치를 찾는다.

개선 전후 같은 조건에서 지표와 flame chart를 비교한다.

LCP

주요 콘텐츠 표시 서버 응답, CSS 차단, hero 이미지가 영향

크기 지정과 preload 확인

INP

입력 반응성 클릭 뒤 긴 JS task와 렌더 지연 확인

작업 분할

CLS

레이아웃 안정성 이미지·폰트·광고로 밀리는 영역 확인

예약 공간

Bundle

전송·실행 비용 초기 JS 크기와 중복 의존성 확인

분할 기준 중요

기준선 수정 전 trace가 남아 있다.

큰 비용 가장 큰 병목부터 줄인다.

동일 조건 측정 환경이 비교마다 같다.

회귀 성능 예산이나 핵심 지표 기준이 있다.