앵귤러 이미지 최적화: 레이지 로딩과 그 이상
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 앵귤러 개발자 (중급~고급)
- 이미지 성능 최적화 필요 시
- 레이지 로딩, 서버 사이드 렌더링(SSR) 대응, 이미지 포맷 최적화에 관심 있는 개발자
핵심 요약
- 앵귤러 이미지 성능의 주요 문제점: 루트 전환 시 이미지 재로딩, 중복 로딩, SSR과 클라이언트 수분화 갈등
- 핵심 솔루션:
SmartLazyLoadingDirective
를 사용한 레이지 로딩 +ImageOptimizationService
기반의 포맷 최적화, 캐싱 전략 - 핵심 코드:
- @Directive({ selector: '[appSmartLazyLoading]' })
- ImageOptimizationService.getOptimizedImageUrl()
섹션별 세부 요약
1. 앵귤러 이미지 성능 문제점
- Change Detection: 이미지 소스 변경 시 불필요한 리렌더링 발생
- 해결책: OnPush
전략과 메모이제이션 사용
- Route Transitions: 라우트 전환 시 이미지 재로딩
- 해결책: 서비스 기반 캐싱 및 프리로딩
- Component Reuse: 동일 이미지의 중복 로딩
- 해결책: 싱글톤 서비스 및 지능형 캐싱
2. `SmartLazyLoadingDirective` 구현
- 기능:
- IntersectionObserver
기반의 레이지 로딩
- placeholder
, errorImage
입력 지원
- priority
기반의 이미지 로딩 우선순위 설정
- 핵심 로직:
- SSR 환경에서 high
우선순위 이미지 즉시 로딩
- loadImage()
메서드로 최적화된 이미지 URL 생성 및 로딩
- preloadImage()
메서드로 이미지 미리 로딩
3. `ImageOptimizationService` 설계
- 기능:
- 이미지 포맷 최적화 (AVIF, WebP, JPG)
- 캐싱 전략 (최대 100개, 24시간 유효)
- 포맷 지원 감지 (testFormatSupport()
)
- 핵심 메서드:
- getOptimizedImageUrl()
- generateResponsiveSrcSet()
- preloadImage()
4. 포맷 지원 감지 및 SSR 대응
- 포맷 지원 감지:
webp
,avif
,heic
지원 여부 자동 감지 - SSR 수분화 처리:
- handleSSR()
메서드로 SSR 환경에서 플레이스홀더 설정 또는 즉시 로딩
결론
- 실무 팁:
- SmartLazyLoadingDirective
를 사용해 레이지 로딩 구현
- ImageOptimizationService
로 이미지 포맷 최적화 및 캐싱 적용
- SSR 환경에서 priority: 'high'
로 중요한 이미지 즉시 로딩
- generateResponsiveSrcSet()
을 통해 반응형 이미지 srcset
생성
- 핵심: 앵귤러의 라이브러리 기능과 서비스 전략을 결합한 이미지 최적화가 성능 향상에 효과적