자산 목록화
첫 화면에 필요한 이미지·폰트·스크립트와 지연 가능 자산을 나눈다.
형식 선택
이미지는 AVIF/WebP, 폰트는 subset, 스크립트는 분할 기준을 정한다.
전송 순서
preload, defer, lazy loading으로 중요한 자산이 먼저 오게 한다.
캐시 정책
내용 hash가 있는 정적 파일은 길게 캐시하고 HTML은 짧게 갱신한다.
AVIF/WebP
이미지 용량 감소
사진형 자산에서 큰 절감 효과
fallback 필요 여부 확인
srcset
화면별 크기 제공
모바일에 데스크톱 원본을 보내지 않음
sizes가 잘못되면 효과 감소
Font subset
글꼴 전송량 축소
필요 문자만 포함해 초기 로드 절감
한글 폰트는 특히 중요
defer
HTML 파싱 차단 완화
DOM 생성 후 스크립트를 실행
초기 실행 순서 확인