web-perf

web-perf 개요

web-perf가 하는 일

web-perf skill은 스크린샷이나 Lighthouse 점수만 보고 짐작하는 대신, Chrome DevTools MCP를 사용해 페이지 속도를 감사하고 개선하도록 돕습니다. Core Web Vitals, trace 기반 진단, 네트워크 워터폴, 렌더링 차단, 레이아웃 시프트, 캐싱, 그리고 이와 연관된 접근성/성능 이슈에 초점을 맞춥니다.

누가 사용하면 좋은가

실제 사이트의 성능을 실무적으로 파고들어야 할 때 이 web-perf skill을 사용하세요. 특히 페이지가 왜 느리게 느껴지는지, 어떤 지표가 왜 악화됐는지, 어떤 리소스가 로드를 방해하는지 설명해야 할 때 잘 맞습니다. 증거가 일반론보다 중요한 Performance Optimization 작업에 특히 적합합니다.

무엇이 다른가

web-perf의 핵심 가치는 오래된 기억이나 일반론이 아니라, 최신 문서와 DevTools 데이터를 실시간으로 가져오는 데 있습니다. 그래서 정확한 지표 정의, trace 해석, 최신 도구 동작에 의존하는 의사결정에 더 유리합니다. 반대로, 성능 trace가 꼭 필요하지 않은 광범위한 SEO 감사나 디자인 평가는 상대적으로 덜 적합합니다.

web-perf skill 사용 방법

설치하고 환경을 확인하세요

skills manager를 통해 web-perf install 흐름을 실행한 뒤, 분석을 요청하기 전에 Chrome DevTools MCP 서버가 실제로 사용 가능한지 확인하세요. 이 skill은 DevTools 접근을 전제로 하므로, MCP 도구가 없다면 결과를 만들어내기보다 초기에 작업을 멈춰야 합니다.

성능 문제에 맞는 프롬프트를 주세요

좋은 web-perf usage 프롬프트는 페이지, 증상, 그리고 에이전트가 재현하거나 점검하는 데 필요한 맥락을 함께 담습니다. 예를 들어: “최신 릴리스 이후 모바일 홈 페이지의 LCP 회귀를 감사해 주세요. 차단 CSS, 히어로 이미지 전달, trace 증거에 집중해 주세요.” 이런 방식이 “이 사이트를 더 빠르게 만들어 주세요”보다 훨씬 낫습니다. 무엇을 측정해야 하는지, 어디를 봐야 하는지를 분명히 알려주기 때문입니다.

먼저 올바른 파일을 읽으세요

SKILL.md부터 시작한 다음, retrieval 소스, 도구 검사, 분석 절차를 설명하는 repo 연결 문서를 따라가세요. 이 repo에는 추가 helper 폴더가 없으므로, 주요 판단 지점은 skill 파일 자체에 있습니다. 특히 MCP 도구를 검증하라고 지시하는 부분, retrieval을 우선하라고 하는 부분, 추측 대신 trace 증거를 사용하라고 하는 부분을 유심히 보세요.

질문에 맞는 워크플로를 사용하세요

진단 목적이라면 trace로 뒷받침되는 근본 원인과 짧은 수정 목록을 요청하세요. 최적화 목적이라면 모든 항목을 나열한 체크리스트보다, 가장 가능성 큰 개선 효과부터 요청하는 편이 좋습니다. 회귀 원인 추적이라면 변경 전후 상황, URL, 디바이스 클래스, 그리고 LCP, INP, CLS 중 무엇이 더 중요한지 알려 주세요. 입력이 구체적일수록 모델이 어떤 web-perf guide 경로를 택해야 할지 덜 헤매게 됩니다.

web-perf skill FAQ

web-perf는 Lighthouse 스타일 감사만 위한 도구인가요?

아닙니다. Lighthouse 관련 작업에도 유용하지만, 더 강한 사용 사례는 DevTools MCP를 활용한 trace 기반 디버깅입니다. 즉, 지표가 바뀌었다는 사실뿐 아니라 왜 바뀌었는지도 이해하도록 돕습니다.

Chrome DevTools를 잘 알아야 하나요?

꼭 그렇지는 않습니다. 문제를 명확하게 설명할 수 있다면 초보자에게도 유용합니다. trace 전문가일 필요는 없지만, 어떤 페이지, 어떤 디바이스, 어떤 증상이 중요한지는 알려줄 수 있어야 합니다.

언제 web-perf를 쓰지 말아야 하나요?

일반적인 프런트엔드 리팩터링, 시각적 디자인 리뷰, 런타임 증거에 의존하지 않는 답이 필요할 때는 사용하지 마세요. 점검할 페이지를 제공할 수 없거나 DevTools MCP를 사용할 수 없다면, 이 skill은 막히게 됩니다.

일반 프롬프트보다 왜 더 나은가요?

일반 프롬프트는 대개 높은 수준에서 머뭅니다. 반면 web-perf skill은 최신 문서, 명시적인 도구 검사, 렌더링 차단, 의존성 체인, 레이아웃 시프트 원인, 캐싱 동작처럼 측정 가능한 원인으로 방향을 잡아 줍니다. 그래서 Performance Optimization에서는 한 번성 채팅 지시보다 훨씬 실행 가능성이 높습니다.

web-perf skill 개선 방법

막연한 목표보다 추적 가능한 입력을 주세요

web-perf 결과를 가장 잘 개선하는 방법은 URL, 대상 디바이스, 테스트 조건, 그리고 가장 중요한 지표를 함께 주는 것입니다. “결제 속도를 개선해 주세요”는 약합니다. “새 히어로 배너 배포 이후, 중급 Android와 빠른 4G 조건에서 결제 페이지의 LCP와 CLS를 감사해 주세요”가 훨씬 좋습니다.

변경 시점과 의심 원인을 함께 공유하세요

무엇이 바뀌었는지 알고 있다면 꼭 말해 주세요. 릴리스 노트, 최근 CMS 업데이트, 새로운 서드파티 스크립트, 새로 바뀐 히어로 섹션은 조사 방향을 빠르게 좁혀 줍니다. 그래야 skill이 페이지 전체를 무작정 훑지 않고 유력한 원인을 우선 확인할 수 있습니다.

증거와 우선순위가 있는 수정 경로를 요청하세요

유용한 web-perf 출력은 확인된 원인과 가능성 높은 원인을 구분하고, 사용자 영향도와 구현 난이도 기준으로 수정 우선순위를 정해야 합니다. 첫 답변이 너무 넓다면, 상위 두 개 병목, 그 근거가 되는 trace 증거, 그리고 개선 여부를 검증할 수 있는 가장 작은 안전한 변경을 다시 요청하세요.

전후 측정으로 반복하세요

첫 번째 결과는 결론이 아니라 진단으로 보세요. 수정 후에는 같은 페이지와 같은 조건으로 동일한 web-perf 워크플로를 다시 실행해 trace 증거와 지표를 일관되게 비교하세요. 그것이 web-perf guide를 반복 가능한 최적화 루프로 바꾸는 가장 빠른 방법입니다.