📌7-1단계: 프론트엔드 성능 측정 지표 완전정복

웹사이트가 “느려요”라는 말 대신

정확한 숫자와 지표로 문제를 찾고 개선할 수 있게 만드는 기술입니다.

✅ 1. 왜 성능 측정 지표가 필요할까?

잘못된 표현	정확한 지표
“로딩 느려요”	❌ 너무 모호함
“3초 만에 버튼 클릭 가능”	✅ 정확한 수치 (TTI)
“이미지 로딩 오래 걸려요”	✅ LCP 기준 초과

성능 지표는 문제를 계량화하고 객관화해서 진짜 문제를 찾게 해줘요.

✅ 2. 주요 성능 지표들

1️⃣ TTI (Time To Interactive)

💬 “사용자가 클릭, 입력 등 인터랙션을 할 수 있게 된 시점까지 걸린 시간”

👦🏻 쉬운 예

버튼이 보였지만 눌러도 안 되는 상황 ❌

→ JavaScript가 아직 초기화 중이라 동작 안 함

✅ TTI 측정 =

페이지가 그려짐
JS 로딩 + 초기화 완료
UI 이벤트가 반응 가능 상태

⏱️ 기준

TTI 값	UX 평가
0 ~ 3초	✅ 매우 좋음
3 ~ 6초	⚠️ 보통
6초 이상	🔥 성능 개선 필요

도구: Lighthouse, Web Vitals

2️⃣ LCP (Largest Contentful Paint)

💬 “가장 큰 콘텐츠(예: 큰 이미지, 제목 등)가 화면에 완전히 표시된 시간”

👦🏻 쉬운 예

페이지가 떴는데 글자보다 큰 배너 이미지가 늦게 뜨면 → LCP 지연!

⏱️ 기준

LCP 값	UX 평가
0 ~ 2.5초	✅ 좋음
2.5 ~ 4초	⚠️ 보통
4초 이상	🔥 느림

최적화 팁

이미지 lazy-loading
이미지 압축
critical CSS 분리

3️⃣ FID (First Input Delay)

💬 “사용자가 클릭, 입력, 탭 등 첫 번째 상호작용을 시도했을 때,

브라우저가 반응하기까지 걸린 시간”

👦🏻 쉬운 예

클릭했는데 반응이 늦음 = FID↑

⏱️ 기준

FID 값	UX 평가
0 ~ 100ms	✅ 훌륭
100 ~ 300ms	⚠️ 보통
300ms 이상	🔥 문제 있음

원인

JS 초기화 중 클릭 이벤트 처리 못함
무거운 for, while 블록
이벤트 바인딩 지연

✅ 3. Ajax 관련 성능 지표

1️⃣ Ajax 응답 시간

Ajax 요청이 시작돼서 응답 완료되기까지 걸린 시간

✅ Network 패널에서 확인 가능 (Timing 탭에서 TTFB, Download 구간)

2️⃣ JS Heap Size

브라우저가 JavaScript 데이터를 저장해 놓은 메모리 영역 크기

👦🏻 쉬운 설명

💾 자바스크립트용 작업공간 → 너무 커지면 느려짐!

📈 확인 도구

Chrome DevTools → Memory 탭 → Heap Snapshot

3️⃣ Paint Time

화면 요소가 실제 눈에 보일 때까지 걸리는 시간

항목	설명
First Paint (FP)	처음 아무것도 아닌 흰 화면이 사라지는 시점
First Contentful Paint (FCP)	텍스트나 이미지가 처음 화면에 보이는 시점
Render Blocking	CSS/JS 로딩으로 인해 화면 그리기 지연 발생

✅ 4. 성능 측정 도구 요약

도구	사용 목적
Lighthouse	전체 페이지 성능 평가 (TTI, LCP, FID 등)
Chrome DevTools	Network + JS Heap + Frame 분석
Web Vitals JS	실시간 사용자 측정 (FID, LCP 등)
Performance 탭	상세 JS 실행 타이밍 확인

✅ 5. 면접 질문 예시 + 해설

❓ Q. 프론트엔드 성능을 측정할 수 있는 주요 지표를 3가지 말해보세요.

✅ A.

TTI: 사용자가 인터랙션 가능한 상태까지 걸린 시간
LCP: 가장 큰 콘텐츠가 화면에 나타나는 시점
FID: 사용자의 첫 입력에 대한 브라우저 반응 시간
보조 지표로 Ajax 응답 시간, JS Heap 사용량, Paint Time 등을 측정하여

전체 렌더링 성능과 사용자 반응 속도까지 분석합니다.

✅ 전체 요약 카드

지표	설명	기준값
TTI	클릭 등 UI 반응 가능 시점	≤ 5초
LCP	큰 이미지/텍스트가 보이는 시점	≤ 2.5초
FID	사용자 첫 입력 → 브라우저 반응 시간	≤ 100ms
Ajax 응답	네트워크 → 응답 완료까지	≤ 1초
Heap Size	JS 메모리 사용량	너무 커지면 누수 의심
Paint	첫 화면 그리기	FP, FCP, LCP로 나눔

✅ 7-2단계: Ajax 요청의 트래킹 / 로깅 시스템 완전정복

실서비스에선 Ajax 요청이 실패하거나 느려지는 문제가 생깁니다.

이때 개발자가 직접 브라우저를 켜볼 수 없죠.

👉 그래서 “요청이 언제, 누구에게서, 어떻게 실패했는지 자동으로 추적하는 시스템”이 필요합니다.

✅ 1. 왜 Ajax 요청을 추적하고 로깅해야 할까?

문제	추적 없으면?	추적 있으면?
Ajax 실패	“왜요? 잘 안 떠요…”	정확한 오류 위치, 시간, 사용자 확인 가능
느린 응답	“느린 것 같아요”	TTFB, URL, 사용자 브라우저 자동 기록
고객 불만	원인 분석 어려움	사용자가 무엇을 했는지 추적 가능

✅ 서버 로그만으로는 사용자의 실제 화면에서 일어난 일을 알 수 없음

→ 브라우저 안에서 오류/병목을 추적하는 도구가 필요함

✅ 2. 대표적인 트래킹/로깅 도구

✅ Sentry (센트리)

항목	설명
역할	자바스크립트 오류 실시간 추적
특징	오류 발생 시 즉시 알림 + 코드 위치 추적 + Ajax 오류 캡처 가능
무료 버전	있음 (기본 트래픽 제한 있음)

✅ Datadog

항목	설명
역할	성능 분석 + 로그 추적 + Ajax 응답 시간 추적
특징	브라우저 → API 호출 → DB까지 전체 흐름 추적 가능
사용 목적	기업 실시간 모니터링

✅ NewRelic

항목	설명
역할	사용자 브라우저에서 발생한 실제 성능 데이터 수집
특징	JS 오류 + Ajax 타이밍 + 네트워크 병목을 세션별로 기록
고급 기능	전체 퍼널, 사용자 행동 분석

✅ 3. 실제 Ajax 요청 추적 방식 (Sentry 기준)

📦 설치

npm install @sentry/browser

📦 설정 코드

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://YOUR_PROJECT_ID@sentry.io/YOUR_ID",
  tracesSampleRate: 1.0 // Ajax 속도 추적도 포함
});

📦 Ajax 요청 자동 추적

Sentry는 fetch, XHR 요청에서 아래 정보 추적:

항목	설명
요청 URL	어디에 보냈는지
응답 코드	500, 404, 200 등
응답 시간	얼마나 걸렸는지
실패 여부	실패하면 즉시 알림 전송
사용자 세션	누가 요청했는지 (IP, 브라우저 정보 등)

✅ 4. 사용자 세션별 Ajax 병목 분석

👦🏻 쉬운 설명

“홍길동이라는 사용자가 어떤 페이지에서 Ajax 요청을 보냈고, 그게 왜 느렸는지”를 실시간으로 볼 수 있어요.

Datadog/NewRelic 예시

사용자가 /products 페이지 진입
GET /api/products 요청 보냄 → TTFB 3000ms
응답 느림 → 자동 로그 저장 + 경고 발생
개발자는 “어느 사용자, 어느 요청, 어느 시점”에서 문제가 있었는지 정확히 확인 가능

✅ 로깅 포함 항목

항목	설명
sessionId	사용자 구분
pagePath	어느 페이지에서 발생했는가
fetchUrl	어떤 API를 호출했는가
method	GET, POST 등
status	200, 500 등
duration	응답 시간 (ms)
errorMessage	실패 시 메시지
timestamp	발생 시각 (ISO)

✅ 5. 직접 커스텀 로깅도 가능

function logAjaxError(info) {
  fetch("/log", {
    method: "POST",
    body: JSON.stringify({
      sessionId: getSessionId(),
      url: info.url,
      status: info.status,
      time: new Date().toISOString(),
      error: info.message
    }),
    headers: { "Content-Type": "application/json" }
  });
}

✅ 6. 면접 질문 예시 + 해설

❓ Q. 프론트엔드에서 Ajax 요청 오류나 병목을 어떻게 추적하시나요?

✅ A.

Sentry를 연동하여 브라우저에서 발생하는 JS 오류와 Ajax 실패를 실시간 추적하고,
요청 URL, 응답 코드, TTFB 등을 자동 기록합니다.
사용자 세션 ID와 함께 로그를 수집하여 누가 언제 어떤 요청에서 오류를 만났는지 파악할 수 있습니다.
필요 시 Datadog/NewRelic과 연동하여 전체 요청 흐름 및 응답 지연 구간을 시각적으로 분석합니다.

✅ 전체 요약 카드

항목	설명
Sentry	Ajax 오류 실시간 추적 + JS 오류
Datadog	브라우저 ~ 서버 ~ DB 전체 성능 추적
NewRelic	사용자 행동/세션별 실시간 추적
주요 추적 지표	URL, 응답 코드, TTFB, 실패 메시지
세션 기반 분석	사용자 별 요청 흐름 + 병목 구간 시각화

** 📌7-1단계: 프론트엔드 성능 측정 지표 완전정복 **

✅ 1. 왜 성능 측정 지표가 필요할까?

✅ 2. 주요 성능 지표들

1️⃣ TTI (Time To Interactive)

👦🏻 쉬운 예

✅ TTI 측정 =

⏱️ 기준

도구: Lighthouse, Web Vitals

2️⃣ LCP (Largest Contentful Paint)

👦🏻 쉬운 예

⏱️ 기준

최적화 팁

3️⃣ FID (First Input Delay)

👦🏻 쉬운 예

⏱️ 기준

원인

✅ 3. Ajax 관련 성능 지표

1️⃣ Ajax 응답 시간

2️⃣ JS Heap Size

👦🏻 쉬운 설명

📈 확인 도구

3️⃣ Paint Time

✅ 4. 성능 측정 도구 요약

✅ 5. 면접 질문 예시 + 해설

❓ Q. 프론트엔드 성능을 측정할 수 있는 주요 지표를 3가지 말해보세요.

✅ 전체 요약 카드

✅ 1. 왜 Ajax 요청을 추적하고 로깅해야 할까?

✅ 2. 대표적인 트래킹/로깅 도구

✅ Sentry (센트리)

✅ Datadog

✅ NewRelic

✅ 3. 실제 Ajax 요청 추적 방식 (Sentry 기준)

📦 설치

📦 설정 코드

📦 Ajax 요청 자동 추적

✅ 4. 사용자 세션별 Ajax 병목 분석

👦🏻 쉬운 설명

Datadog/NewRelic 예시

✅ 로깅 포함 항목

✅ 5. 직접 커스텀 로깅도 가능

✅ 6. 면접 질문 예시 + 해설

❓ Q. 프론트엔드에서 Ajax 요청 오류나 병목을 어떻게 추적하시나요?

✅ 전체 요약 카드

📌7-1단계: 프론트엔드 성능 측정 지표 완전정복