성능 프로파일링은 느린 느낌을 지표와 콜스택으로 환원한다

사용자 증상 번역

첫 화면이 늦다, 클릭이 늦다, 스크롤이 끊긴다 같은 말을 각각 지표와 기록 시점으로 바꿉니다.

symptom

캐시 상태, 네트워크 제한, CPU throttling을 정해 같은 조건에서 여러 번 측정합니다.

record

긴 script task, layout, paint, style recalculation이 입력 지연과 프레임 드롭을 만드는지 봅니다.

main thread

한 번 빠르게 만드는 것보다 번들 크기, 이미지 크기, long task 예산을 두고 재발을 막습니다.

budget

LCP

가장 큰 주요 콘텐츠가 보이는 시점 이미지 크기, 서버 응답, 렌더 차단 CSS가 흔한 원인입니다.

INP

사용자 입력에 반응하는 지연 긴 JS 작업, 과한 렌더링, 이벤트 핸들러 비용을 확인합니다.

interaction

CLS

예상치 못한 레이아웃 이동 이미지 크기 예약, 폰트 로딩, 동적 광고 영역이 중요합니다.

stability

재현 조건 내 컴퓨터에서 빠른지보다 목표 기기와 네트워크 조건에서 측정합니다.

병목 하나 한 번에 여러 최적화를 섞지 말고 병목과 개선량을 연결합니다.

회귀 방지 성능 예산과 자동 측정을 두어 다시 느려지는 순간을 잡습니다.

느린 화면을 보면 먼저 묻기:
1. 가장 늦게 보이는 것은 무엇인가
2. 가장 오래 잡고 있는 task는 무엇인가
3. 개선 뒤 수치는 얼마나 바뀌었는가