크롬 Performance 패널로 웹 성능 테스트하는 법

크롬 Performance 패널로 웹 성능 테스트하는 법 (Next.js 기준 완전 정리)

 

웹 성능을 제대로 측정하려면 Chrome DevTools의 Performance 탭을 올바르게 사용하는 것이 중요합니다.

아래는 “처음 접근하는 사람도 이해할 수 있는” 방식으로 다시 정리한 실전 가이드입니다.

 

---

 

🔥 1. 성능 측정은 “최초 진입 시”만 정확하다

 

뒤로가기나 페이지 이동 후 보는 성능은 캐시 영향 때문에 정확하지 않습니다.

따라서 해당 페이지로 직접 접근 → Performance 녹화 → 새로고침(F5) 방식으로 측정해야 합니다.

 

---

 

🛠 2. 테스트 환경 설정 (반드시 해야 함)

 

💻 맥북처럼 고성능 장비에서는 실제 성능 문제가 보이지 않을 수 있습니다.

그래서 아래 두 가지를 꼭 설정합니다.

 

 

• CPU Throttle → 4x slow down
• Network → Fast 4G

 

이렇게 하면 일반적인 모바일 사용자 환경과 비슷해집니다.

 

---

 

📊 3. 타임라인에서 색깔별 의미 이해하기

 

Performance 녹화를 시작하면 여러 색의 그래프가 나오는데, 의미는 다음과 같습니다.

색의미

🟡 노란색	JavaScript 실행
🟣 보라색	스타일 계산, 레이아웃, 페인트 작업
⚪ 회색	네트워크 대기/다운로드
🔴 빨간색	CPU 100% → 작업이 블로킹됨(성능 문제!)

👉 빨간색이 길게 표시되면 성능 병목이 있다는 강력한 신호입니다.

 

---

 

🚀 4. 중요한 지표: LCP(Largest Contentful Paint)

 

페이지에서 가장 의미 있는 요소가 화면에 나타나는 시점을 LCP라고 합니다.

예: 메인 이미지, 큰 텍스트블록

 

Performance 화면에서 예를 들어 2.43초에 LCP면,

사용자가 2.43초 만에 주요 화면을 보게 된다는 뜻입니다.

 

---

 

🧩 5. 병목 구간 분석 방법

 

 

▶ 노란색(JS)이 길다

 

→ 자바스크립트가 너무 많음

→ 번들 사이즈 과다 / 초기 JS 로직 무거움

 

 

▶ 보라색(Layout)이 길다

 

→ DOM 구조 복잡

→ 이미지 크기 문제 / 리플로우 발생

 

 

▶ 빨간색이 나온다

 

→ CPU가 너무 바빠서 입력이 밀릴 가능성 있음

→ 클릭 반응이 늦는 문제와 연결됨

 

이런 구간이 있으면 앞부분의 초기 렌더링을 최적화해야 한다는 의미입니다.

 

---

 

🖼 6. 가장 효과 좋은 개선 포인트: 이미지 최적화

 

이미지는 LCP를 거의 좌우합니다.

 

 

✔ 개선 체크리스트

 

• WebP 사용
• 너무 큰 이미지 불러오지 않기
• Next.js Image 사용 시에도 preload 필요할 수 있음
• LCP 요소는 반드시 preload하기

 

이미지만 잘 해도 LCP가 크게 개선됩니다.

 

---

 

⚡ 7. JS 줄이기 → 다이나믹 임포트 사용

 

초기 화면에서 필요 없는 JS를 모두 지연시키는 게 성능 개선의 핵심입니다.

 

예:

const KakaoLogin = dynamic(() => import('./KakaoLogin'), { ssr: false });

로그인 버튼 눌렀을 때만 필요한 모듈이라면

굳이 홈 화면 로딩 때 받아올 필요가 없습니다.

 

 

퍼스트 로드 JS 기준

 

• 150~200 KB: 괜찮음
• 200~300 KB: 주황불
• 300 KB 초과: 무조건 다이어트해야 함

 

---

 

👆 8. 클릭이 늦게 반응할 때 분석하는 법

 

• Performance → Record
• 버튼 클릭 순간을 기준으로 타임라인 분석
• 해당 시점 JS 실행(노란색)이 길면 → 입력 지연 발생

 

이 부분을 찾아내서 JS 로직을 분리하거나 다이나믹 임포트로 줄여야 합니다.

 

---

 

📝 9. 리포트 작성 팁

 

개선 전/후 비교 스냅샷 2~3개만 있으면 충분합니다.

 

• LCP 변화
• 빨간색 CPU block 감소
• JS 실행 시간(노란색) 변화
• 초기 JS 번들 사이즈 감소(first load JS)

 

이 네 가지가 줄어들면 리포트로서 매우 좋은 결과입니다.

 

---

 

✅ 결론

 

성능 테스트는 “새로고침 기준으로 CPU/네트워크 쓰로틀을 걸어 LCP + JS 실행시간 + CPU 블로킹”을 분석하고, 이미지 최적화와 다이나믹 임포트만 잘 해도 체감 성능이 크게 향상된다.