포트폴리오 사이트 성능을 94% 개선한 이미지 최적화 전략

포트폴리오 사이트가 느렸다

portfolio.greatpola.com의 로딩이 느리고 스크롤이 버벅거렸습니다. 디자인 파트너 유나가 원인을 진단하고 최적화를 실행했습니다.

핵심 문제: 13MB의 PNG 이미지

포트폴리오 쇼케이스 이미지들이 고해상도 PNG로 저장되어 있었습니다. 모바일에서는 불필요하게 큰 파일을 다운로드하고 있었습니다.

3단계 최적화

1. PNG → WebP 변환 (94% 용량 절감)

모든 이미지를 WebP 포맷으로 변환했습니다. 13MB → 약 800KB로 극적인 절감을 달성했습니다.

2. 코드 스플리팅 (next/dynamic)

포트폴리오의 below-fold 섹션들을 next/dynamic으로 지연 로딩합니다. 초기 번들 사이즈를 줄여 First Contentful Paint가 빨라졌습니다.

3. CSS 렌더링 최적화

• content-visibility: auto — off-screen 레이아웃 계산 스킵
• 모바일 backdrop-blur 축소 — GPU 부하 감소
• 이미지 alt 텍스트 SEO 개선

결과

총 15.9MB 절감, 모바일에서 체감 로딩 속도 크게 향상. LCP(Largest Contentful Paint) 지표도 개선되었습니다.