포트폴리오 첫 화면이 3초 넘게 뜨면, 클라이언트는 떠납니다. LCP(Largest Contentful Paint)의 대부분은 무거운 히어로 이미지 때문입니다. AI 이미지 압축으로 WebP·품질·크기를 조정하는 실전 설정입니다.
권장 설정
| 유형 | 최대 너비 | 포맷 | 품질 |
|---|---|---|---|
| Hero | 1920px | WebP | 80 |
| 썸네일 | 800px | WebP | 75 |
| 아이콘 | SVG | — | — |
워크플로
- Figma export PNG → 압축기 batch
loading="lazy"+width/heightattribute- Lighthouse LCP 2.5s 이하 확인
- 프로필 대표 3작 재압축
제안서 첨부는 ZIP 대신 압축된 갤러리 링크를 권장합니다.
팁: Retina 2x만 올리고 CSS half-size는 2배 트래픽입니다. display 크기에 맞는 1x 자산을 서버에 두세요.
Core Web Vitals 목표
| 지표 | 목표 |
|---|---|
| LCP | ≤ 2.5s |
| CLS | ≤ 0.1 |
| INP | ≤ 200ms |
Hero 압축만으로 LCP 40% 개선 사례가 많습니다. 폰트 preload와 함께 적용하세요.
Before/after 기록
압축 전후 KB·Lighthouse 점수를 case study 한 줄에 넣으면, 프로필 설득력이 올라갑니다.
CDN cache
압축 WebP upload 후 CDN purge를 잊으면, Lighthouse는 old PNG를 측정합니다. deploy checklist: compress → upload → purge → measure.
portfolio case study hero + thumbnail + og:image — 세 size preset을 compressor batch name으로 저장해 두면, upload ritual이 2분으로 고정됩니다.
next/image 또는 CDN resize param과 compressor source file을 pair — display size의 2x asset만 upload, never full 4K raw.
video poster frame jpeg도 same compressor preset 적용 — autoplay off 환경에서 LCP candidate가 poster인 case 많습니다.
Lighthouse CI GitHub action에 performance budget fail on regression — compress discipline becomes enforced.