LCP 4.2초 → 1.8초, 실제로 효과 있었던 것만

성능 최적화 글은 많지만 대부분 체크리스트 나열이다. 실제 서비스에서 LCP를 4.2초에서 1.8초로 줄이며 효과가 컸던 순서대로만 적는다.

1. LCP 요소부터 특정하라 (30분)

크롬 개발자 도구 Performance 탭에서 LCP 마커를 클릭하면 어떤 요소가 LCP인지 바로 보여준다. 우리는 히어로 이미지였다. LCP 요소가 뭔지 모르고 하는 최적화는 전부 도박이다.

2. 히어로 이미지 priority + preload (–1.2초)

<Image src={hero} alt="" priority />

next/image는 기본이 lazy다. 첫 화면 이미지에 priority를 주면 preload 링크가 생성되고 fetchpriority=high가 붙는다. 이 한 줄이 가장 컸다.

3. 웹폰트 — 서브셋 + font-display: swap (–0.6초)

한글 폰트 전체는 2MB가 넘는다. 서브셋 woff2로 줄이고 swap을 줘서 텍스트가 폰트를 기다리지 않게 했다. next/font를 쓰면 서브셋과 self-hosting이 자동이다.

4. 서버 응답(TTFB) — 리전과 캐시 (–0.4초)

서울 유저에게 미국 리전 서버는 그 자체로 300ms 페널티다. 엣지/리전을 사용자 가까이로 옮기고, 동적 페이지에 revalidate 캐시를 걸었다. 코드 최적화보다 인프라 배치가 쌌다.

5. 클라이언트 JS 다이어트 (–0.2초, 그러나 INP에 큼)

번들 분석으로 차트 라이브러리를 dynamic import로 밀어냈다. LCP에는 생각보다 영향이 작았지만 INP가 눈에 띄게 좋아졌다.

효과 없던 것

• 이미 작던 CSS의 추가 압축
• 서드파티 스크립트 defer(이미 defer였음)
• 메모이제이션 남발 — 렌더 성능과 로딩 성능은 다른 문제다

측정 → LCP 요소 특정 → 그 요소의 병목만 제거. 이 루프 세 번이면 대부분의 사이트는 2초 안에 들어온다.