ASSET OPTIMIZATION

에셋 최적화는 전송량과 렌더링 차단 시간을 함께 줄이는 작업이다

이미지, CSS, JavaScript, 폰트, 캐시 전략은 LCP와 TBT 같은 사용자 체감 지표에 직접 연결됩니다.

검증 지표LCP는 큰 이미지와 폰트, TBT는 JavaScript 실행 비용에 민감합니다.

ImageWebP, srcset, 크기 조정, lazy loading으로 용량과 로딩 시점을 줄입니다.LCP

CSSminify, unused 제거, critical CSS로 렌더 차단을 줄입니다.FCP

JavaScripttree shaking, code splitting, defer, worker로 메인 스레드 부담을 낮춥니다.TBT

FontWOFF2, subset, font-display, preload로 텍스트 표시 지연을 줄입니다.text

Cachehash 파일명, immutable, ETag로 재방문 전송 비용을 줄입니다.reuse

순서: 가장 큰 에셋과 가장 긴 메인 스레드 작업을 먼저 측정하고, 개선 후 같은 지표로 다시 확인합니다.