이미지 로딩 성능 개선 방법
1. Optimized Image 컴포넌트
- Placeholder 이미지: 로딩 중에 회색 플레이스홀더 표시
- Lazy Loading: loading=”lazy” 속성으로 화면에 보일 때만 로드
- Async Decoding: decoding=”async”로 메인 스레드 블로킹 방지
- 에러 처리: 이미지 로드 실패 시 대체 처리
2. CSS 최적화
- 부드러운 전환: opacity 애니메이션으로 자연스러운 로딩
- 스켈레톤 효과: 로딩 중 스켈레톤 애니메이션 표시
- 이미지 렌더링 최적화: image-rendering 속성으로 선명도 개선
3. 추가 최적화 방법들
이미지 포맷 최적화
// WebP 포맷 사용 (더 작은 파일 크기)
const optimizedSrc = src.replace(/\.(jpg|png)$/, '.webp');
이미지 크기 최적화
// 화면 크기에 맞는 이미지 제공
const getResponsiveImage = (src: string, width: number) => {
return `${src}?w=${width}&q=80`;
};
프리로딩
// 중요한 이미지는 미리 로드
useEffect(() => {
const preloadImage = new Image();
preloadImage.src = importantImageSrc;
}, []);
4. 실제 서버 최적화
- CDN 사용: 이미지를 CDN에서 제공
- 압축: gzip, brotli 압축 적용
- 캐싱: 적절한 캐시 헤더 설정
Comments