웹 성능 최적화 기법
Core Web Vitals를 개선하고 사용자 경험을 향상시키는 웹 성능 최적화 방법을 알아봅니다.
웹 성능 최적화 기법
웹 성능은 사용자 경험과 SEO에 직접적인 영향을 미칩니다.
Core Web Vitals
| 메트릭 | 설명 | 목표값 |
|---|---|---|
| LCP | Largest Contentful Paint | < 2.5s |
| INP | Interaction to Next Paint | < 200ms |
| CLS | Cumulative Layout Shift | < 0.1 |
이미지 최적화
- 차세대 포맷 사용: WebP, AVIF
- 반응형 이미지:
srcset활용 - 지연 로딩:
loading="lazy"
<img
src="image.webp"
loading="lazy"
decoding="async"
/>JavaScript 최적화
- 번들 분할: 동적 import 사용
- 트리 쉐이킹: 사용하지 않는 코드 제거
- 지연 실행:
defer,async속성 활용
CSS 최적화
- Critical CSS 인라인화
- 불필요한 CSS 제거
contain속성 활용
성능 최적화는 지속적인 과정입니다. 정기적으로 측정하고 개선하세요.