Core Web Vitals 실전 디버깅 — Chrome DevTools로 CLS, LCP 원인 찾기

// PageSpeed JSON 응답에서 CLS 요소 찾기
// .lighthouseResult.audits["layout-shift-elements"]

{
  "id": "layout-shift-elements",
  "details": {
    "items": [
      {
        "node": {
          "selector": "div.typewriter-container > span",
          "snippet": "<span class=\"text-4xl font-bold\">"
        },
        "score": 0.341  // 이 요소의 CLS 기여도
      },
      {
        "node": {
          "selector": "header > nav > div.auth-section",
          "snippet": "<div class=\"flex items-center\">"
        },
        "score": 0.089
      }
    ]
  }
}

// Console에 붙여넣기 — CLS 실시간 모니터
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue; // 사용자 입력은 무시
    console.log("Layout Shift:", entry.value.toFixed(4));
    for (const source of entry.sources || []) {
      console.log("  Element:", source.node?.nodeName,
        source.node?.className);
      console.log("  Moved:", source.previousRect, "→",
        source.currentRect);
    }
  }
}).observe({ type: "layout-shift", buffered: true });

// PageSpeed JSON에서 LCP 요소 확인
// .lighthouseResult.audits["largest-contentful-paint-element"]

{
  "id": "largest-contentful-paint-element",
  "details": {
    "items": [{
      "node": {
        "selector": "div.hero > img",
        "snippet": "<img src=\"/images/hero.avif\" />"
      }
    }]
  }
}

// Console에서도 확인 가능
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log("LCP Element:", last.element);
  console.log("LCP Time:", last.startTime, "ms");
  console.log("LCP Size:", last.size, "px²");
}).observe({ type: "largest-contentful-paint", buffered: true });

# SSR HTML에서 opacity:0 찾기
curl -s https://example.com | grep -i "opacity"

# 결과 예시:
# <div style="opacity:0;transform:translateY(60px)">
# → motion/react가 인라인으로 넣은 초기 상태!

# img 태그의 속성 점검
curl -s https://example.com | grep -oP '<img[^>]+>'

# 결과 예시:
# <img src="/hero.avif" width="900" height="1118"
#   fetchpriority="high">
# <img src="/service.webp">  ← loading="lazy" 누락!

# preload 확인
curl -s https://example.com | grep "rel=\"preload\""

# 결과 예시:
# <link rel="preload" href="/hero.avif" as="image">
# <link rel="preload" href="/service.webp" as="image">
#   ↑ 아래 fold 이미지까지 preload되고 있음!