첫 화면 자산 최적화

LCP 대상 찾기

첫 화면에서 가장 큰 텍스트나 이미지가 무엇인지 실제 측정으로 확인한다.

눈에 띄는 hero가 항상 LCP는 아니다

표시 크기에 맞춘 responsive srcset, WebP/AVIF, 명시적 width와 height를 적용한다.

크기 지정은 CLS 방지에도 필요하다

critical CSS를 우선 전달하고 사용하지 않는 스타일과 과한 reset을 줄인다.

렌더 차단 자원이 길면 LCP가 밀린다

필수 weight만 preload하고 font-display로 invisible text 시간을 제한한다.

너무 많은 preload는 오히려 경쟁을 만든다

해시 자산은 immutable로 길게, HTML은 짧게 또는 재검증하도록 둔다.

새 HTML과 오래된 JS 조합을 피한다

이미지

표시 크기와 포맷 뷰포트별 필요한 픽셀만 내려주고 크기 속성으로 공간을 예약한다.

원본 4K를 CSS로 줄이면 낭비다

폰트

필수 weight만 선로딩 본문, 제목, 아이콘 폰트를 분리해 초기 요청 수를 제한한다.

FOIT와 CLS를 함께 본다

CSS/JS

초기 렌더 차단 최소화 첫 화면에 필요 없는 코드는 lazy load하거나 다음 interaction으로 미룬다.

bundle 크기보다 실행 시간이 병목일 수 있다

캐시

hit ratio와 무효화 CDN cache hit, browser cache, deploy purge가 같은 정책을 따른다.

성능 개선은 두 번째 방문에서도 확인한다

waterfall 비교 최적화 전후 첫 요청, LCP 자원, render blocking 시간을 비교한다.

레이아웃 안정성 이미지와 광고 영역이 로딩 중 공간을 밀어내지 않는지 본다.

캐시 재방문 새 배포 후 첫 방문과 재방문에서 파일 갱신이 의도대로 갈리는지 확인한다.