에셋 처리 흐름

에셋은 빌드, 전송, 캐시까지 한 번에 설계한다

파일 크기만 줄이면 부족합니다. 어떤 에셋을 언제 내려보내고 얼마나 오래 캐시할지 함께 결정합니다.

이미지WebP, srcset, lazy loading으로 LCP와 전송량을 낮춥니다.
CSScritical CSS와 unused 제거로 렌더 차단을 줄입니다.
JavaScripttree shaking, code splitting, defer로 실행 비용을 낮춥니다.
FontWOFF2, subset, font-display로 텍스트 표시를 안정화합니다.
Cachehash 파일명과 immutable 정책으로 재방문 비용을 줄입니다.

초기 화면 우선 처리

LCP 후보hero 이미지와 주요 텍스트에 필요한 리소스를 먼저 보냅니다.
차단 제거필수 CSS만 인라인하고 나머지는 뒤로 미룹니다.
크기 고정이미지와 광고 영역의 width, height를 미리 정합니다.

재방문 비용 줄이기

파일 해시내용이 바뀐 파일만 새 URL로 배포합니다.
장기 캐시변하지 않는 정적 파일은 긴 max-age를 둡니다.
재검증HTML과 민감 데이터는 ETag, no-cache로 최신성을 확인합니다.

배포 전 질문: 이 파일은 첫 화면에 꼭 필요한가, 지연 로드해도 되는가, 캐시된 구버전이 남아도 안전한가?