Asset 최적화를 첫 화면과 지연 자산으로 나누기

자산 목록

첫 화면 이미지, 폰트, CSS, JS와 지연 가능한 자산을 나눈다.

이미지는 AVIF/WebP, 폰트는 subset, 스크립트는 chunk 기준을 정한다.

preload, defer, lazy loading으로 중요한 자산을 먼저 받게 한다.

hash 정적 파일은 길게, HTML은 짧게 캐시한다.

srcset

화면별 이미지 모바일에 데스크톱 원본을 보내지 않음

sizes 정확도 중요

font-display

폰트 로딩 텍스트 표시 지연과 교체 깜빡임 균형

fallback 폭 확인

defer

파싱 차단 완화 HTML 파싱 후 스크립트 실행

초기 실행 순서 확인

contenthash

캐시 무효화 내용 변경 시 파일명 변경

HTML 참조 갱신

표시 크기 이미지 원본이 렌더 크기보다 과도하게 크지 않다.

폰트 한글 폰트 전송량과 fallback을 확인한다.

서드파티 분석 스크립트가 첫 렌더를 막지 않는다.

캐시 정적 파일과 HTML의 캐시 정책이 다르다.