<link rel="preload"> 는 브라우저의 다운로드 대기열에 새치기를 시키는 선언입니다. 새치기가 많아지면 대기열 자체가 무의미해집니다 — preload 목록이 길다는 것은 우선순위가 없다는 뜻입니다.
순서: 특정 → 경로 → 선별
- LCP 요소부터 특정합니다. DevTools Performance 패널이 어떤 요소가 LCP 인지 정확히 알려 줍니다. 히어로 이미지라 짐작했는데 실제로는 웹폰트를 기다리는 제목 텍스트인 경우가 흔합니다.
- 그 요소의 로드 경로를 추적합니다. CSS 안
background-image는 CSS 파싱 후에야 발견되고, 폰트는 CSS 뒤에 숨어 있습니다 — 이런 “늦게 발견되는 자원” 이 프리로드의 정당한 대상입니다. - 2~3개만 올립니다. LCP 이미지 1 + 첫 화면 글리프를 덮는 폰트 서브셋 정도가 상한입니다.
한글 사이트 특유의 함정: 폰트
한글 웹폰트는 커서 서브셋으로 쪼개 배포합니다. 이때 첫 화면 문구가 실제로 쓰는 서브셋만 프리로드해야 합니다 — 전 서브셋을 올리면 수십 요청이 이미지보다 먼저 대역을 차지합니다. 그리고 폰트 도착 전 폴백 글꼴의 폭이 다르면 제목이 줄바꿈을 바꾸며 레이아웃이 출렁입니다. size-adjust 로 폴백의 메트릭을 본 폰트에 맞춰 두면 도착 전후의 레이아웃이 같아집니다.
<link rel="preload" href="/fonts/subset-81.woff2" as="font" type="font/woff2" crossorigin>
@font-face {
font-family: 'Fallback';
src: local('Malgun Gothic');
size-adjust: 88%; /* 본 폰트 폭에 맞춘 실측값 */
}카피를 바꾸면 프리로드 목록이 낡습니다. 첫 화면 문구 변경 시 서브셋 커버리지를 다시 계산하는 것까지가 이 체크리스트입니다.
재실측으로 닫기
같은 URL · 같은 기기 프로파일 · 같은 시간대에서 3회 이상 재고 중앙값으로 판단합니다. 1회 측정은 네트워크 요동을 개선으로 착각하게 만듭니다. 캐시 계층이 응답 시간에 주는 영향은 Redis 적중률 읽는 법과 이어집니다. 전/후 실측 리포트를 포함한 성능 작업은 최적화 지원 사업이 담당합니다.