에셋 최적화

에셋 최적화 전송/렌더 기준

이미지, CSS, 폰트, 아이콘은 모두 브라우저의 로딩 순서와 렌더링 안정성에 영향을 줍니다. 파일 크기를 줄이는 것만으로는 부족하고, 어떤 자원을 언제 받아야 하는지까지 결정해야 합니다.

01

자원 목록화

페이지가 처음 로드할 때 실제로 요청하는 이미지, CSS, 폰트, 스크립트 크기와 순서를 확인합니다.

inventory
02

이미지 경량화

표시 크기에 맞는 원본, AVIF/WebP, srcset, lazy loading으로 LCP와 데이터 비용을 조절합니다.

image
03

CSS 경로 정리

첫 화면에 필요한 CSS와 나중에 필요한 CSS를 나누고 사용하지 않는 규칙을 줄입니다.

critical CSS
04

폰트 안정화

필요한 문자만 subset하고 preload와 font-display를 조절해 느린 표시와 레이아웃 이동을 줄입니다.

font
LCP 이미지
첫 화면 주요 이미지는 lazy하지 않고 우선순위를 높임 반대로 화면 밖 이미지는 lazy loading으로 초기 비용에서 빼냅니다.
priority
CSS
렌더 차단 자원이므로 양과 위치가 중요 페이지별 CSS 분리와 미사용 CSS 제거가 효과적입니다.
blocking
Font
텍스트 표시 지연과 레이아웃 이동을 동시에 관리 subset과 fallback metrics까지 맞추면 시각 안정성이 좋아집니다.
stability

실제 표시 크기 · 우선순위 · 캐시 점검

실제 표시 크기 400px 영역에 3000px 이미지를 보내고 있지 않은지 확인합니다.
우선순위 첫 화면 핵심 자원과 나중 자원을 같은 priority로 두지 않습니다.
캐시 해시 파일명과 장기 캐시를 연결해 재방문 비용을 줄입니다.

이미지 판단 기준

첫 화면 핵심 이미지: preload 또는 priority 검토
화면 밖 이미지: loading=lazy
장식 이미지: CSS background 또는 제거 가능성 검토