자산 전달 루틴

초기 화면과 재방문 비용을 함께 줄이기

이미지, CSS, JS, 폰트는 크기만 보지 않고 렌더 차단 여부와 캐시 갱신 방식까지 묶어 판단합니다.

LCP · TBT · cache
Image

LCP 후보 먼저 정리

srcset, WebP, 크기 고정으로 큰 이미지가 첫 화면을 밀지 않게 합니다.

CSS

렌더 차단 줄이기

critical CSS는 먼저 보내고 사용하지 않는 규칙은 빌드 단계에서 제거합니다.

JS

실행 비용 나누기

트리 쉐이킹, 코드 분할, defer로 메인 스레드 부담을 낮춥니다.

Font

텍스트 표시 안정화

WOFF2, 부분 집합, font-display로 빈 텍스트 시간을 줄입니다.

초기 로드

첫 화면에 필요한 파일만 우선순위 높게 보내고 나머지는 지연 로드합니다.

배포 파일명

내용 해시를 붙여 바뀐 파일만 새 URL로 배포하고 오래된 캐시를 피합니다.

재검증 정책

HTML은 최신성을 확인하고 정적 에셋은 긴 캐시로 재방문 비용을 낮춥니다.

먼저 보낼 것 LCP 이미지, 핵심 CSS, 기본 폰트처럼 화면을 여는 파일을 선별합니다.
나중에 보낼 것 아래쪽 이미지, 부가 기능 JS, 선택적 폰트는 사용자 흐름에 맞춰 늦춥니다.
오래 둘 것 해시가 붙은 정적 파일은 긴 캐시를 주고, HTML은 재검증으로 최신성을 지킵니다.