웹 성능 최적화 전략 - Core Web Vitals
구글은 2021년부터 Core Web Vitals를 검색 순위 알고리즘의 중요한 요소로 사용하고 있습니다. 단순히 SEO뿐만 아니라, 실제 사용자가 느끼는 성능을 최적화하는 것은 서비스의 성공에 필수적입니다.
Core Web Vitals란 무엇인가요?
핵심 성능 지표는 크게 3가지로 구성됩니다:
- LCP (Largest Contentful Paint): 가장 큰 콘텐츠가 로드되는 시간 (기준: 2.5초 이내)
- FID (First Input Delay): 첫 상호작용에 대한 반응 시간 (기준: 100ms 이내)
- CLS (Cumulative Layout Shift): 시각적 안정성, 레이아웃 이동 점수 (기준: 0.1 이하)
1. LCP 최적화 전략
LCP는 사용자가 느끼는 페이지 로딩 속도의 가장 중요한 지표입니다.
개선 방법:
서버 응답 시간 단축
- CDN을 사용하여 물리적 거리 최소화
- 서버 사이드 캐싱 구현
- 데이터베이스 쿼리 최적화
리소스 로드 최적화
<!-- 중요 리소스 미리 불러오기 -->
<link rel="preload" as="image" href="/hero-image.jpg">
<!-- 중요하지 않은 리소스 지연 로드 -->
<img loading="lazy" src="/below-fold.jpg">
이미지 최적화
- WebP 또는 AVIF 포맷 사용
- 적절한 크기로 리사이징
- 반응형 이미지(srcset) 활용
- 이미지 압축 (TinyPNG 등 도구 활용)
2. FID 개선 기법
FID는 자바스크립트 실행 시간과 직결됩니다.
핵심 전략:
자바스크립트 번들 크기 줄이기
- Code Splitting을 통해 필요한 코드만 로드
- Tree Shaking으로 사용하지 않는 코드 제거
- Bundle Analyzer로 무거운 라이브러리 파악
# 번들 사이즈 분석 예시
npm install --save-dev webpack-bundle-analyzer
메인 스레드 작업 최소화
- 무거운 작업은 Web Workers로 분리
- 중요하지 않은 작업은 requestIdleCallback으로 미루기
- 긴 작업을 작은 단위로 쪼개기
제3자 스크립트(Third-party) 최적화
<!-- 비동기 로드 -->
<script async src="analytics.js"></script>
<!-- 지연 실행 -->
<script defer src="non-critical.js"></script>
3. CLS 해결 방안
예상치 못한 레이아웃 이동은 사용자에게 큰 짜증을 유발합니다.
방지 기법:
이미지와 비디오에 크기 지정하기
<!-- ❌ 크기 미지정 -->
<img src="photo.jpg">
<!-- ✅ 크기 지정 -->
<img src="photo.jpg" width="640" height="480">
폰트 로딩 최적화
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap; /* 폰트 로드 전까지 기본 폰트 노출 */
}
동적 콘텐츠 영역 확보
- 광고나 임베드 요소에 최소 높이 지정
- 스켈레톤 UI를 활용하여 레이아웃 유지
- CSS aspect-ratio 속성 활용
성능 측정 도구
실험실 데이터 (Lab Data)
- Lighthouse: 크롬 개발자 도구 내장
- PageSpeed Insights: 구글 공식 도구
- WebPageTest: 상세 성능 분석
실제 데이터 (Field Data)
- Google Search Console: 핵심 성능 보고서
- Chrome User Experience Report: 실제 사용자 데이터
- Web Vitals 라이브러리: 직접 지표 측정
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log);
실전 체크리스트
✅ 이미지에 width/height 속도 추가 ✅ 폰트에 font-display: swap 적용 ✅ 중요 리소스 Preload 설정 ✅ 자바스크립트 번들 사이즈 10% 이상 감축 ✅ 서버 응답 시간(TTFB) 200ms 이하 유지 ✅ CDN 도입 및 설정 완료 ✅ 이미지 Lazy Loading 적용 ✅ 외부 스크립트 async/defer 처리