에셋 로딩은 초기 화면에 필요한 자원부터 우선순위를 정한다
모든 파일을 같은 시점에 받으면 중요한 콘텐츠가 늦어지므로 CSS, 핵심 JS, 이미지, 폰트의 우선순위를 나눈다.
| 자원 | 우선순위 | 대표 기법 | 주의점 |
|---|---|---|---|
| Critical CSS | 가장 먼저 필요 | inline critical, preload | 과하게 넣으면 HTML이 커짐 |
| Main JS | 상호작용에 필요한 코드 | defer, code split | 초기 실행 시간이 길어짐 |
| Hero Image | LCP 후보 | preload, width/height, modern format | 크기 미지정 시 CLS 발생 |
| Below Fold | 나중에 필요한 이미지와 모듈 | lazy loading, dynamic import | 너무 늦으면 스크롤 때 빈칸 |
| Font | 텍스트 렌더링 품질 | font-display, preload | FOIT/FOUT 기준 결정 |
에셋 최적화는 용량 줄이기만 아니라 사용자가 먼저 보는 자원을 먼저 도착시키는 설계다.