프론트엔드 성능 최적화

웹사이트의 성능은 사용자 경험과 직결되며, 검색 엔진 최적화(SEO)에도 큰 영향을 준다. 특히 Core Web Vitals 항목인 TTFB(Time To First Byte), CLS(Cumulative Layout Shift), LCP(Largest Contentful Paint)는 웹사이트의 성능을 측정하는 핵심 지표로 사용된다.

1. TTFB(Time To First Byte) 개선 전략

TTFB는 사용자가 브라우저에서 요청을 보낸 뒤, 첫 번째 바이트를 수신할 때까지의 시간이다. TTFB가 높을수록 초기 응답 속도가 느리다는 의미이다.

원인

• 느린 서버 응답
• 과도한 서버 로직 처리 시간
• 네트워크 지연

개선 방안

• 서버의 리소스를 최적화하고 고성능 인프라 사용
• CDN(Content Delivery Network)을 활용해 사용자와 가까운 위치에서 콘텐츠 제공
• 서버 측 캐싱 적용 (예: Redis, Memcached)
• 정적인 HTML을 미리 렌더링하는 SSR(서버 사이드 렌더링) 또는 SSG(Static Site Generation) 활용
• Gzip, Brotli 등의 압축을 활성화 해 전송 데이터 크기 줄이기

---

2. CLS(Cumulative Layout Shift) 개선 전략

CLS는 페이지 로딩 중 요소들이 얼마나 예기치 않게 이동하는지를 측정한다. 시각적 안정성과 사용자 신뢰성에 직접적인 영향을 미친다.

원인

• 이미지, 비디오, 광고 등의 요소에 크기 정의가 없는 경우
• 웹폰트 로딩 지연으로 인한 텍스트 재배치
• 동적으로 삽입되는 DOM 요소

개선 방안

• <img>, <video> 태그에 반드시 width, height 속성 지정
• 광고 및 제 3자 콘텐츠 영역 미리 공간 확보
• 웹폰트는 font-display: swap 설정 사용
• 요소 삽입 시 위치 고정을 위한 CSS 스타일 예측 적용

---

3. LCP(Largest Contentful Paint) 개선 전략

LCP는 뷰포트 안에 보이는 가장 큰 이미지나 텍스트 블록이 렌더링되는 데 걸리는 시간이다. 페이지 로딩 체감 속도에 매우 큰 영향을 준다.

원인

• 대용량 이미지나 비디오
• 폰트나 CSS, JS 파일의 블로킹
• 서버 응답 지연

개선 방안

• 주요 콘텐츠에 대해 Lazy-Loading이 아닌 Preload 적용
  html복사

``` - image 요소에 `loading="lazy"`를 오히려 주요 콘텐츠에는 사용하지 않기 - 중요한 CSS는 critical path로 추출해 inline 처리 - JS 파일 분할 및 비동기 로딩 적용 - 이미지 형식은 WebP 등 더욱 효율적인 포맷 사용 - LCP 대상 요소를 가능한 빠르게 DOM에 렌더하도록 순서 재조정 --- ## **결론** 웹사이트의 성능 최적화는 단순히 빠르게 보이는 것을 넘어 안정성과 신뢰성까지 포함하는 개념이다. TTFB, CLS, LCP 세 가지 지표는 현재 웹 퍼포먼스 측정에서 핵심적인 역할을 하고 있으며, 이들을 지속적으로 모니터링하고 개선하는 작업은 프론트엔드 개발자의 중요한 책임 중 하나이다. 지속적인 측정과 개선을 통해 사용자 만족도는 물론 SEO 향상까지 기대할 수 있다. Chrome DevTools, Lighthouse, PageSpeed Insights, Web Vitals API 등의 도구를 활용해 주기적으로 성능을 점검하는 것이 좋다.