LCP 요청 발견 진단

LCP request discovery insight

핵심 이미지 요청이 시작될 수 있었던 시점과 실제 시작 시점을 비교합니다.

···
html
<div class="atlas"><div class="head"><b>LCP REQUEST DISCOVERY</b><span class="pulse"></span></div><div class="stage"><div class="ld-timeline"><span>HTML</span><div class="ld-gap" id="ld-gap"></div><i id="ld-download">hero download</i></div><div class="ld-marks mono"><span>page starts</span><span id="ld-mark">request starts late</span></div><div class="ld-tip box" id="ld-tip">Expose the image earlier</div></div></div>
css
.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.ld-timeline{height:40%;display:flex;align-items:center;gap:0;border-bottom:2px solid var(--line);font-size:12px}.ld-timeline span{width:20%;background:var(--accent-2);color:var(--bg);padding:7px 2px;text-align:center;border-radius:4px}.ld-gap{width:30%;text-align:center;color:var(--muted);border-bottom:2px dashed var(--accent);transition:width .5s}.ld-timeline i{width:40%;background:var(--accent);color:white;border-radius:4px;padding:7px 2px;font:12px var(--font-sans);font-style:normal;text-align:center}.ld-marks{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:7px 0}.ld-tip{height:35%;display:grid;place-items:center;color:var(--accent);font-size:12px}.ld-gap.early{width:5%}
js
let early=false;function tick(){early=!early;document.getElementById('ld-gap').classList.toggle('early',early);document.getElementById('ld-mark').textContent=early?'request starts early':'request starts late';document.getElementById('ld-tip').textContent=early?'Early discovery shortens the gap':'Expose the image earlier'}tick();setInterval(tick,2200)

Chrome DevTools의 LCP 요청 발견 인사이트는 핵심 이미지가 늦게 발견된 구간을 트레이스에 표시합니다. 이미지가 CSS 배경이나 뒤늦은 스크립트에서 드러나면 다운로드 시작도 밀릴 수 있습니다.

데모는 HTML 도착 뒤 빈 대기 구간을 강조하고, 요청을 조기에 알렸을 때 시작점이 앞으로 이동하는 모습을 보여줍니다. 제안은 실제 트레이스에서 병목을 확인한 뒤 적용합니다.

언제 쓰나

LCP의 리소스 발견 지연이 큰 경우 DevTools 인사이트에서 확인합니다.

페이지로 열기 ↗