느린 LCP를 어떻게 진단하고 개선하나요?

Question

IT Interview Practice · Accepted Answer

먼저 **LCP 요소가 무엇인지**와 **왜 늦는지**를 찾는 것부터 시작하세요. LCP는 네 개의 하위 구간으로 나뉩니다 — 가장 큰 것을 고치세요. ## 진단: LCP의 네 하위 구간 ```text [ TTFB ] ─▶ [ Resource load delay ] ─▶ [ Resource load time ] ─▶ [ Render delay ] 서버 페치가 시작되는 시점 이미지 다운로드 페인트 ``` Chrome DevTools와 PageSpeed Insights는 어느 구간이 지배적인지 보여줍니다. 흔한 원인: 느린 서버(TTFB), 뒤늦게 발견된 LCP 이미지, 또는 페인트를 늦추는 렌더 차단 스크립트/CSS. ## 하위 구간별 개선 - **느린 TTFB** → CDN에서 HTML 캐싱, SSG/ISR 사용, 오리진/데이터베이스 속도 개선. - **로드 지연(이미지가 늦게 발견됨)** → 프리로드하고 우선순위를 높여 브라우저가 CSS/JS 이후가 아니라 즉시 페치하게 하세요: ```html

``` - **로드 시간(이미지가 너무 큼)** → AVIF/WebP 제공, `srcset`으로 적절히 크기 조정, 압축. - **렌더 지연** → 렌더 차단 CSS/JS 제거, 중요한 CSS 인라인, 스크립트 `defer`. ## 함정 - LCP 이미지를 지연 로딩하는 것(또는 JS 하이드레이션 뒤에 숨기는 것) — 가장 흔한 자초한 LCP 손상. - LCP 텍스트를 막는 웹 폰트. `font-display: swap`을 쓰고 폰트를 `preload`하세요. - 4G의 실제 사용자는 느린데 랩(lab) LCP만 최적화하는 것. 항상 필드 데이터로 확인하세요. ## 왜 중요한가 LCP는 대표적인 로딩 지표이자 검색 순위 요소입니다. 네 하위 구간을 짚고 각각을 구체적인 개선책에 매핑할 수 있는 것이 바로 면접관이 찾는 구조적이고 근거 기반의 접근입니다.

진단: LCP의 네 하위 구간

하위 구간별 개선

관련 질문

함정

왜 중요한가