benchmarkcommit 043feff · v1.0.0SKILL.md · 성능 최적화
웹 성능 벤치마크
브라우저에서 performance.getEntries()로 페이지 지표를 측정하고 기준선과 비교해 웹 성능 회귀를 찾습니다.
Aside를 통해 로그인된 실제 브라우저로 대상 사이트를 열 수 있으며, gstack 스크립트로 텔레메트리를 기록합니다.
npx skills add garrytan/gstack --skill benchmark명령을 선택했습니다. 직접 복사하세요.
- 권한
- read-repo
- write-files
- shell
- network
- 호환 도구
- Claude Code, Codex, Cursor, Copilot
- GitHub
- 138.5k
- 출처
- 커뮤니티 · Garry Tan
- 상태
- 스캔 통과
- 라이선스
- MIT
- 카테고리
- 성능 최적화
핵심 규칙
추측하지 않고 측정합니다: 추정치가 아닌 실제 performance.getEntries() 데이터를 사용합니다.
실행 단계
01단계준비 및 페이지 선정
.gstack/benchmark-reports를 만들고 --pages 지정 페이지나 홈과 최대 5개의 탐색 페이지를 제안해 확인받습니다. --diff는 현재 브랜치 영향 페이지만 측정합니다.
02단계성능 데이터 수집
페이지마다 브라우저 스크립트를 5회 실행해 TTFB, FCP, LCP, DOM 타이밍, 전체 로드, 느린 리소스, JS/CSS 크기를 얻고 중앙값과 범위를 기록합니다.
03단계기준선 비교
--baseline 모드에서는 baseline.json을 저장하고, 그 외에는 임계값으로 기준선과 비교하며 변동 범위 안의 차이는 변화 없음으로 봅니다.
04단계리소스·예산 점검
가장 느린 리소스를 나열해 각각 개선책을 하나씩 제시하고 FCP, LCP, JS, CSS, 전송량, 요청 수 예산을 점검해 등급을 매깁니다.
05단계추세·보고서 저장
--trend로 최근 5회 추세를 보여 주고 Markdown과 JSON 보고서를 .gstack/benchmark-reports에 저장합니다.
권한 설명 (SKILL.md 기준)
| 기능 | 필요 여부 | 설명 |
|---|---|---|
| 파일 쓰기 | 일부 필요 | .gstack/benchmark-reports 아래의 보고서와 기준선만 쓰며, 명시적 요청이 없으면 코드를 수정하지 않습니다. |
| 명령 실행 | 필요 | gstack 스크립트, git, gh, aside repl 또는 내장 헤드리스 브라우저 명령을 실행해 데이터를 수집합니다. |
| 네트워크 송신 | 일부 필요 | 사용자가 지정한 대상 사이트와 동일 출처 페이지에만 접근하며, --diff 모드에서는 gh로 기준 브랜치를 조회합니다. |
SKILL.md 프런트매터(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
---관련 스킬
규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.