asset priority

에셋 최적화: 로딩 우선순위를 설계하는 일

이미지, CSS, JavaScript, 폰트, 캐시는 초기 화면에 필요한 것과 나중에 필요한 것을 나눌 때 성능 개선 효과가 커집니다.

에셋별 로딩 전략 나누기

로딩 계획

Critical Path

첫 화면 CSS, LCP 이미지, 핵심 폰트는 빠르게 받을 수 있게 배치합니다.

지연 로딩 경로

아래쪽 이미지, 차트, 보조 기능 코드는 필요해질 때 가져옵니다.

캐시 경로

해시 파일명, immutable, ETag로 재방문 전송량을 줄입니다.

Budget

JS 용량, 이미지 크기, 폰트 개수를 수치로 정하고 배포마다 확인합니다.

분류 우선순위 적용 재측정
실전 기준

가장 큰 파일 하나를 줄이는 것만큼, 사용자가 지금 보지 않는 자원을 늦게 로드하고 재방문 때 다시 받지 않게 만드는 전략이 중요합니다.