MutationObserver + PerformanceObserver로 CLS 원인 추적과 LCP 측정 자동화하기

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('자식 노드 변경:', mutation.addedNodes, mutation.removedNodes);
    }
    if (mutation.type === 'attributes') {
      console.log(`속성 변경: ${mutation.attributeName}`);
    }
  }
});
 
observer.observe(document.body, {
  childList: true,     // 직계 자식 노드 감시
  subtree: true,       // 모든 하위 트리 포함
  attributes: true,    // 속성 변경 감시
  characterData: true  // 텍스트 콘텐츠 변경 감시
});
 
// 꼭 해제해야 합니다 — 빠뜨리면 메모리 누수로 이어집니다
observer.disconnect();

// LCP 측정 — 가장 큰 콘텐츠가 화면에 그려진 시점
const lcpObserver = new PerformanceObserver((entryList) => {
  const entries = entryList.getEntries();
  const lastEntry = entries[entries.length - 1]; // 최신 LCP 후보
  console.log('LCP:', lastEntry.startTime, 'ms', lastEntry.element);
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
 
// CLS 측정 — 누적 레이아웃 이동 점수
let clsValue = 0;
const clsObserver = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // 사용자 입력 직후 500ms 내 발생한 이동은 제외 (의도된 변화)
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
    }
  }
  console.log('CLS 누적:', clsValue);
});
clsObserver.observe({ type: 'layout-shift', buffered: true });

function trackSPANavigation() {
  let navigationStart = performance.now();
 
  const mutationObserver = new MutationObserver((mutations) => {
    const hasContentChange = mutations.some(
      (m) => m.addedNodes.length > 0 && m.type === 'childList'
    );
 
    if (hasContentChange) {
      const renderTime = performance.now() - navigationStart;
      // 실제 RUM 엔드포인트로 교체해서 사용하시면 됩니다
      console.log('[analytics]', { type: 'spa-route-render', duration: renderTime });
    }
  });
 
  const appEl = document.getElementById('app');
  mutationObserver.observe(appEl, {
    childList: true,
    subtree: true,
  });
 
  const onPopState = () => {
    navigationStart = performance.now();
  };
  window.addEventListener('popstate', onPopState);
 
  // disconnect()와 removeEventListener를 묶어 반환 — React useEffect cleanup 패턴
  return () => {
    mutationObserver.disconnect();
    window.removeEventListener('popstate', onPopState);
  };
}
 
// React에서 사용할 때:
// useEffect(() => {
//   return trackSPANavigation();
// }, []);

const domInsertionLog = [];
 
// DOM에 새로 삽입되는 모든 Element 노드를 시간 순으로 기록
const mutObs = new MutationObserver((mutations) => {
  mutations.forEach((m) => {
    m.addedNodes.forEach((node) => {
      if (node.nodeType === 1) {
        domInsertionLog.push({
          tag: node.tagName,
          time: performance.now(),
          // node.src는 IMG/SCRIPT 외 노드에 없으므로 getAttribute로 안전하게 접근
          src: node.getAttribute('src') || node.dataset?.adId || 'unknown',
        });
      }
    });
  });
});
mutObs.observe(document.body, { childList: true, subtree: true });
 
// layout-shift 발생 시 직전 삽입된 노드를 의심 목록으로 출력
const perfObs = new PerformanceObserver((list) => {
  list.getEntries().forEach((shift) => {
    if (!shift.hadRecentInput) {
      // 100ms는 경험적 기본값입니다. 광고처럼 지연 삽입이 긴 케이스는 200~300ms로 넓혀볼 수 있습니다
      const suspects = domInsertionLog.filter(
        (log) => Math.abs(log.time - shift.startTime) < 100
      );
      console.warn('CLS 유발 의심 노드:', suspects, '이동값:', shift.value);
    }
  });
});
perfObs.observe({ type: 'layout-shift', buffered: true });

// src 문자열 대신 노드 자체를 키로 사용 — 동일 URL 이미지 반복 삽입에도 안전
const imageLoadMap = new WeakMap();
 
const imgObserver = new MutationObserver((mutations) => {
  mutations.forEach((m) => {
    m.addedNodes.forEach((node) => {
      if (node.tagName === 'IMG') {
        imageLoadMap.set(node, performance.now());
        node.addEventListener('load', () => {
          const insertedAt = imageLoadMap.get(node);
          if (insertedAt !== undefined) {
            const loadDuration = performance.now() - insertedAt;
            console.log(`이미지 로드 완료: ${node.src} (${loadDuration.toFixed(0)}ms)`);
          }
        });
      }
    });
  });
});
imgObserver.observe(document.body, { childList: true, subtree: true });
 
// LCP 후보가 위에서 감지한 이미지인지 확인
const lcpObserver = new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  if (entry.element?.tagName === 'IMG') {
    console.log('LCP 이미지:', entry.element.src, entry.startTime, 'ms');
  }
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

const a11yObserver = new MutationObserver((mutations) => {
  mutations.forEach((m) => {
    m.addedNodes.forEach((node) => {
      if (node.nodeType !== 1) return; // Element 노드만 처리
      if (node.tagName === 'IMG' && !node.alt) {
        console.warn('alt 속성 누락:', node);
      }
      if (node.getAttribute('role') === 'button' && !node.getAttribute('aria-label')) {
        console.warn('aria-label 누락 버튼:', node);
      }
    });
  });
});
 
a11yObserver.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
});
 
// 감사가 끝난 뒤에는 반드시 해제해두면 좋습니다
// a11yObserver.disconnect();