코어 웹 베이틀스: 이미지 최적화가 라이트하우스 점수에 미치는 영향
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 웹 개발자, 프론트엔드 엔지니어
- SEO 전문가, 웹 성능 최적화에 관심 있는 개발자
- 난이도: 중급~고급 (기술적 구현 사례 포함)
핵심 요약
- 이미지 최적화는 LCP, FID, CLS에 직접적/간접적으로 영향을 미침 (예: LCP 개선 70%, CLS 감소 94%)
- WebP/AVIF 포맷, 반응형 이미지, 프리로딩이 주요 개선 전략
width,height속성 추가로 CLS 감소 가능
섹션별 세부 요약
1. 코어 웹 베이틀스 정의
- LCP: 가장 큰 시각 요소의 로딩 시간 (이미지가 주요 원인)
- FID: 사용자 입력 후 브라우저 응답 지연 (이미지 디코딩이 메인 스레드 차단)
- CLS: 페이지 로딩 중 시각적 안정성 (이미지 크기 미정의 시 발생)
2. 이미지 최적화의 영향 분석
- LCP: 이미지 포맷 변경 (JPEG→WebP)으로 34% 개선
- FID: 이미지 디코딩 차단 방지 (Web Workers 활용)
- CLS:
width,height속성 추가로 0.1~0.25 감소 가능
3. 실무 개선 전략
- 반응형 이미지 구현
```html
```
- 이미지 로딩 제어
```javascript
class ThrottledImageLoader { / 동시 로딩 제한, Intersection Observer 활용 / }
```
- CLS 예방 코드
```javascript
function preventImageCLS() { / 이미지 크기 자동 설정, aspect-ratio 사용 / }
```
4. 성능 모니터링 및 도구 활용
- LCP 추적
```javascript
function measureLCP() { / PerformanceObserver 활용, GA 이벤트 전송 / }
```
- FID 모니터링
```javascript
function monitorFID() { / 사용자 입력과 이미지 로딩 동시성 분석 / }
```
- 이미지 품질 테스트
- Image Converter 도구 사용 (포맷/품질 테스트)
5. 케이스 스터디: 뉴스 웹사이트 개선
- 최적화 전: LCP 4.1s, FID 285ms, CLS 0.31, Lighthouse 23/100
- 최적화 후: LCP 1.2s, FID 45ms, CLS 0.02, Lighthouse 94/100
- 실천 전략: WebP/AVIF 포맷, 반응형 이미지, 프리로딩, 로딩 제한
6. 성능 예산 설정
- 이미지 크기 제한
```javascript
const imageBudgets = {
heroImage: { maxSize: 150000, maxLCP: 2000 },
contentImages: { maxSize: 50000 },
totalImages: { maxSize: 500000 }
};
```
결론
- 이미지 최적화는 코어 웹 베이틀스 개선의 핵심 (LCP 70% 개선, CLS 94% 감소)
- WebP/AVIF 포맷, 반응형 이미지, 프리로딩, 로딩 제한 기법을 적용
- 성능 예산 설정과 모니터링 도구(GA, PerformanceObserver) 활용 필수