# 웹 성능 벤치마크 (benchmark)

> 브라우저에서 performance.getEntries()로 페이지 지표를 측정하고 기준선과 비교해 웹 성능 회귀를 찾습니다.

- 카테고리: [성능 최적화](https://www.myskills.tools/ko/categories/performance/)
- 출처: 커뮤니티 · Garry Tan
- 저장소: https://github.com/garrytan/gstack/tree/main/benchmark (commit 043feff · v1.0.0)
- SKILL.md: https://github.com/garrytan/gstack/blob/main/benchmark/SKILL.md
- 설치 명령: `npx skills add garrytan/gstack --skill benchmark`
- 라이선스: MIT
- 호환 도구: Claude Code, Codex, Cursor, Copilot
- 권한: read-repo ✓, write-files ✓, shell ✓, network ✓
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.
- ⚠ Aside를 통해 로그인된 실제 브라우저로 대상 사이트를 열 수 있으며, gstack 스크립트로 텔레메트리를 기록합니다.

## 핵심 규칙

추측하지 않고 측정합니다: 추정치가 아닌 실제 performance.getEntries() 데이터를 사용합니다.

## 실행 단계

1. **준비 및 페이지 선정** — .gstack/benchmark-reports를 만들고 --pages 지정 페이지나 홈과 최대 5개의 탐색 페이지를 제안해 확인받습니다. --diff는 현재 브랜치 영향 페이지만 측정합니다.
2. **성능 데이터 수집** — 페이지마다 브라우저 스크립트를 5회 실행해 TTFB, FCP, LCP, DOM 타이밍, 전체 로드, 느린 리소스, JS/CSS 크기를 얻고 중앙값과 범위를 기록합니다.
3. **기준선 비교** — --baseline 모드에서는 baseline.json을 저장하고, 그 외에는 임계값으로 기준선과 비교하며 변동 범위 안의 차이는 변화 없음으로 봅니다.
4. **리소스·예산 점검** — 가장 느린 리소스를 나열해 각각 개선책을 하나씩 제시하고 FCP, LCP, JS, CSS, 전송량, 요청 수 예산을 점검해 등급을 매깁니다.
5. **추세·보고서 저장** — --trend로 최근 5회 추세를 보여 주고 Markdown과 JSON 보고서를 .gstack/benchmark-reports에 저장합니다.

## 권한 설명 (SKILL.md 기준)

| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 일부 필요 | .gstack/benchmark-reports 아래의 보고서와 기준선만 쓰며, 명시적 요청이 없으면 코드를 수정하지 않습니다. |
| 명령 실행 | 필요 | gstack 스크립트, git, gh, aside repl 또는 내장 헤드리스 브라우저 명령을 실행해 데이터를 수집합니다. |
| 네트워크 송신 | 일부 필요 | 사용자가 지정한 대상 사이트와 동일 출처 페이지에만 접근하며, --diff 모드에서는 gh로 기준 브랜치를 조회합니다. |

## SKILL.md 프런트매터(YAML)

```yaml
---
name: benchmark
preamble-tier: 1
version: 1.0.0
description: Web performance regression detection. (gstack)
triggers:
  - web performance benchmark
  - check page speed
  - detect page performance regression
allowed-tools:
  - Bash
  - Read
  - Write
  - Glob
  - AskUserQuestion
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/benchmark/