웹 성능 측정 지표 (LCP, FID 등)과 JS 최적화 방법

현대 웹 개발에서 성능 최적화는 사용자 경험(UX) 향상의 핵심입니다. 단순히 페이지를 "잘 보이게" 만드는 것을 넘어서, 실제 사용자 입장에서 빠르게 반응하고 매끄럽게 작동하는 웹사이트를 구축해야 합니다. 이를 위해 구글을 비롯한 다양한 기관에서는 웹 성능을 평가하는 공식 지표를 제시하고 있습니다.

이 글에서는 주요 웹 성능 지표(LCP, FID, CLS, TTFB 등)와 이를 개선하기 위한 자바스크립트 최적화 전략을 체계적으로 정리합니다.

---

✅ 주요 웹 성능 지표(Core Web Vitals)

📌 LCP (Largest Contentful Paint)

• 정의: 페이지 로딩 시 가장 큰 콘텐츠 요소(이미지, 텍스트 등)가 화면에 표시되는 시간
• 목표: 2.5초 이내
• 개선 방법:
  • 이미지 최적화 및 lazy loading 적용
  • 중요한 리소스 우선 로딩
  • 서버 응답 시간 단축

📌 FID (First Input Delay)

• 정의: 사용자가 페이지와 처음 상호작용(클릭, 탭, 키 입력 등)한 후 브라우저가 반응하기까지 걸리는 시간
• 목표: 100ms 이내
• 개선 방법:
  • 메인 스레드 작업 최소화
  • 긴 JavaScript 실행 분할(Chunking)
  • requestIdleCallback 활용하여 비필수 작업 지연 실행

📌 CLS (Cumulative Layout Shift)

• 정의: 페이지 로딩 도중 발생하는 레이아웃 이동의 총합
• 목표: 0.1 이하
• 개선 방법:
  • 이미지, 광고, iframe 등에 명시적 사이즈 지정
  • 동적 컨텐츠 추가 시 공간 확보

---

✅ 기타 주요 성능 지표

📌 TTFB (Time To First Byte)

• 서버가 클라이언트 요청에 응답하는 데 걸리는 시간
• 서버 최적화, CDN 적용으로 개선 가능

📌 FCP (First Contentful Paint)

• 최초로 텍스트나 이미지 등 화면에 그려진 시점
• 렌더링 차단 리소스 최소화(css, js)

📌 TTI (Time To Interactive)

• 페이지가 완전히 상호작용 가능한 상태가 되는 시간
• 긴 작업 스플리팅, 스크립트 최적화 필요

---

✅ 자바스크립트 최적화 전략

1. 코드 분할 (Code Splitting)

• 초기에 필요한 코드만 로딩하고 나머지는 필요할 때 불러오기
• Webpack, Vite, Parcel 등 번들러 사용

2. 불필요한 코드 제거 (Tree Shaking)

• 사용하지 않는 코드를 번들에 포함시키지 않음
• ES Modules 기반으로 작성된 코드가 이상적

3. 비동기 로딩 (Lazy Loading)

• 페이지 로딩 시 반드시 필요한 리소스만 먼저 로딩
• 나머지는 사용자 행동에 따라 비동기로 불러오기

// 동적 import 예시
import("./heavyModule").then(module => {
  module.init();
});

4. JavaScript 실행 최적화

• 무거운 연산은 Web Worker로 분리
• 반복문 최적화
• requestAnimationFrame, requestIdleCallback 활용하여 퍼포먼스 부드럽게 유지

5. 최소화(Minify)와 압축(Compression)

• 코드 최소화: 공백, 주석 제거
• 전송 시 gzip, Brotli 압축 적용

6. 캐싱 전략 수립

• 정적 파일은 캐시 유효기간을 길게 설정
• 파일 변경 시 해시를 부여하여 캐시 무효화 관리

---

✅ 결론

웹 성능 최적화는 단순히 '빠르게 보이기'가 아니라, 사용자 중심의 빠른 반응성과 매끄러운 흐름을 제공하는 것을 목표로 해야 합니다. Core Web Vitals(LCP, FID, CLS 등)를 이해하고, 자바스크립트 최적화를 병행하면 SEO 향상은 물론 전환율 증가에도 크게 기여할 수 있습니다.

매번 새로운 기능 추가나 리팩터링 시 성능 지표 측정 → 개선 작업을 반복하는 습관을 들이는 것이 중요합니다.