CWV Superpowers: 자동화된 Core Web Vitals 진단

CWV Superpowers는 CoreDash 필드 데이터 및 Chrome 브라우저 도구에 연결하여 Core Web Vitals 문제를 진단하는 무료 오픈 소스 Claude Code 스킬입니다. 실제 사용자 데이터에서 최악의 병목 현상을 식별하고 근본 원인을 추적하며 코드 수정 사항을 생성합니다. 단순한 Lighthouse 제안 목록이 아닙니다. 요소, 파일, 코드 줄을 정확히 찾아냅니다.

2026년 3월 Arjen Karel이 마지막으로 검토함

빠른 시작:

코드는 GitHub에 있습니다. 두 개의 명령어로 Claude Code에 설치하세요:

/* Install the MarketPlace and the CWV SuperPower Skill */
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpowers

/* now start the Core Web Vitals AI superpower*/
Why is my site slow?

그런 다음 CoreDash를 MCP 서버로 추가하고 claude --chrome을 실행하세요. 그것이 전부입니다.

CWV SuperPower 스킬의 기능

CWV Superpowers는 무엇이 느린지, 왜 느린지에 대한 답을 함께 제공하는 두 가지 데이터 소스를 결합합니다.

CoreDash Real User Monitoring은 실제로 무엇이 느린지 알려줍니다. 실제 사용자, 실제 기기, 실제 네트워크를 기반으로 합니다. CoreDash는 모든 페이지 로드를 추적하고 모든 지표를 문제를 일으키는 정확한 요소에 귀속시킵니다. LCP가 4.2초이고 병목 현상 요소가 div.hero > img.main이라고 표시되면 이는 실제 사용자가 겪는 상황입니다.

Chrome 브라우저 추적은 왜 그런지 알려줍니다. 스킬은 모바일 에뮬레이션(4g, 4x CPU 스로틀링)으로 페이지를 방문하여 네트워크 워터폴을 기록하고 RUM 데이터가 식별한 정확한 단계를 추적합니다. 모든 것이 아니라 페이지를 느리게 만드는 것으로 입증된 부분만 추적합니다!

그것이 핵심입니다! RUM 데이터는 무엇이 느린지 알려주지만 그 이유는 알려주지 않습니다. Chrome 추적은 이유를 제공하지만, 필드 데이터가 없으면 잘못된 페이지나 잘못된 지표를 조사하게 됩니다. CWV Superpowers는 이 둘을 결합합니다.

이 스킬은 세 가지 Core Web Vitals를 모두 진단합니다: LCP (4단계 분석), INP (스크립트 귀속을 포함한 3단계 분석), 그리고 CLS (알려진 원인에 대한 패턴 매칭). 전체 지표별 워크플로에 대해서는 LCP 진단 가이드 및 INP 진단 가이드를 참조하세요.

5단계 워크플로

모든 조사는 5단계를 따릅니다.

1단계: 의도(Intent). 살펴볼 내용("제품 페이지의 LCP")을 지시하거나 문제를 찾도록 요청("무엇을 먼저 수정해야 할까?")할 수 있습니다. 구체적인 이름을 지정하면 범위를 명확히 합니다. 탐색을 원하면 2단계로 이동합니다.

2단계: 탐색(Discovery). 스킬은 CoreDash를 통해 사이트를 스캔합니다. 전반적인 상태, 모바일 상태, LCP 기준 최악의 URL 및 INP 기준 최악의 URL을 가져옵니다. 그런 다음 가장 큰 문제를 선택합니다: 개선 필요(needs improvement)보다 나쁨(poor) 등급, 데스크톱보다 모바일, 더 높은 트래픽 양을 우선시합니다. p75 LCP가 2.4초로 "통과"하지만 사용자의 18%가 나쁨(poor) 영역에 있는 페이지도 여전히 문제입니다. CWV Superpowers는 이를 포착해냅니다.

3단계: 진단(Diagnosis). LCP의 경우 5~7개의 CoreDash API 호출을 수행합니다: LCP 요소, 요소 유형, 우선순위 상태, 4단계 분석(TTFB, Load Delay, Load Time, Render Delay), 그리고 7일 추세입니다. 절대 임계값을 초과하는 단계가 아니라 전체 시간 중 가장 큰 비중을 차지하는 단계를 찾는 비례적 추론(proportional reasoning)을 사용하여 병목 현상을 식별합니다. INP의 경우 느린 상호 작용 요소, LOAF 스크립트 및 3단계 분석을 가져옵니다. CLS의 경우 5가지 알려진 원인 패턴과 대조하여 일치하는 것을 찾습니다.

4단계: Chrome 추적(Chrome trace). Chrome을 사용할 수 있는 경우, 스킬은 페이지를 방문하여 3단계의 병목 단계만 추적합니다. 표적화된 추적은 증거를 생성합니다. 모든 것을 전체 추적하는 것은 노이즈만 생성할 뿐입니다.

5단계: 출력(Output). 코드 수정 사항을 적용하거나, HTML 보고서를 생성하거나, 둘 다 수행합니다. 수정 사항은 파일, 줄, 요소를 명시하고 전후를 보여줍니다.

출력 결과의 모습

이 스킬은 필드 데이터, Chrome 증거 및 특정 수정 사항을 연결하는 근본 원인(root cause) 진술을 생성합니다:

근본 원인: /product/running-shoes-42의 LCP 이미지 div.hero-banner > img.product-main은 프리로드 힌트가 없고 fetchpriority="high"가 없기 때문에 1,980ms 늦게 발견됩니다. CoreDash 데이터: LCP는 모바일, p75에서 3,820ms(나쁨)입니다. Load Delay는 전체의 52%로 병목 현상입니다. Chrome 추적 확인: 네트워크 워터폴에서 HTML 첫 번째 바이트와 이미지 요청 사이에 1,940ms의 간격이 있습니다.

수정 사항이 직접 이어집니다: 프리로드 힌트를 추가하고, fetchpriority="high"를 설정하세요. 요소, 파일 및 원인에 특정됩니다. 일반적인 조언이 아닙니다.

전체 보고서에는 색상으로 구분된 등급이 있는 메트릭스 카드, 단계 분석 차트가 포함되며 Chrome을 사용한 경우 필름스트립 스크린샷과 네트워크 워터폴 SVG가 포함됩니다. 두 보고서 유형 모두 Slack 스레드에 놓거나 티켓에 첨부할 수 있는 독립적인 HTML 파일입니다.

팁: Chrome은 선택 사항입니다. Chrome 없이도 전체 RUM 진단, 병목 현상 식별 및 코드 수정 사항을 얻을 수 있습니다. 필름스트립 및 워터폴 시각적 자료는 없어지지만 실제 사용자 데이터가 주요 진실 공급원(source of truth)이기 때문에 진단 품질은 동일합니다.

시작하기

실제 사용자 데이터가 흐르고 있는 CoreDash 계정이 필요합니다. 무료 등급도 가능합니다. Project Settings > API Keys (MCP)에서 API 키를 받으세요. 키는 한 번만 표시되며 SHA-256 해시로 저장됩니다. 읽기 전용 액세스입니다.

Claude Code (권장)

# Add CoreDash MCP server
claude mcp add --transport http coredash https://app.coredash.app/api/mcp \
  --header "Authorization: Bearer cdk_YOUR_API_KEY"

# Add the skill from the marketplace
/plugin marketplace add corewebvitals/cwv-superpowers
/plugin install cwv-superpowers@cwv-superpower

# Start with Chrome for full analysis
claude --chrome

/mcp를 입력하여 CoreDash가 연결되었는지 확인하세요. 그런 다음 "What are my Core Web Vitals?"라고 물어보세요. 실제 LCP, INP, CLS 데이터를 반환하면 준비가 완료된 것입니다.

Cursor

.cursor/mcp.json에 CoreDash를 추가하세요:

{
  "mcpServers": {
    "coredash": {
      "url": "https://app.coredash.app/api/mcp",
      "headers": {
        "Authorization": "Bearer cdk_YOUR_API_KEY"
      }
    }
  }
}

기타 MCP 클라이언트

CoreDash MCP 서버는 HTTP MCP를 지원하는 모든 클라이언트(VS Code (Copilot 에이전트 모드), Windsurf, Gemini CLI, Cline 및 JetBrains IDE)에서 작동합니다. 엔드포인트는 Bearer 토큰 헤더를 사용하는 https://app.coredash.app/api/mcp입니다. 클라이언트별 구성은 GitHub의 설정 가이드를 참조하세요.

AI 에이전트의 Core Web Vitals 작업에 필드 데이터가 중요한 이유와 Lighthouse 전용 에이전트가 1/3의 경우 거부되는 수정 사항을 생성하는 이유에 대한 배경 지식을 보려면 개요 문서를 읽어보세요.