performance-budgetcommit 4b0ddb9SKILL.md · 성능 최적화

CI에서 성능 예산 적용

CI에 번들 크기와 Lighthouse 임계값을 두고 예산을 넘으면 실패시켜 PR 단계에서 성능 저하를 잡습니다.

npx skills add thedaviddias/Front-End-Checklist --skill performance-budget

권한: read-repo
write-files
shell
network
호환 도구: Any SKILL.md agent
GitHub: 74.6k
출처: 커뮤니티 · David Dias
상태: 스캔 통과
라이선스: MIT
카테고리: 성능 최적화
저장소: github.com/thedaviddias/Front-End-Checklist/skills/performance-budget

핵심 규칙

번들 크기 예산과 런타임 예산(Lighthouse, Core Web Vitals)을 구분하고 둘 다 적용합니다.

실행 단계

01단계예산 유무 확인
package.json과 CI 설정에서 크기나 Lighthouse 임계값을 찾습니다.
02단계임계값 설정
최대 번들 크기, 최소 Lighthouse 점수, 최대 LCP를 정하고 느슨하게 시작해 점차 조입니다.
03단계CI에 연결
size-limit와 Lighthouse CI 단언으로 PR마다 예산을 적용하고, 넘으면 빌드를 실패시킵니다.
04단계배포 후 모니터링
운영 환경 RUM과 알림을 연결해 CI 밖에서 생기는 저하도 잡습니다.

권한 설명 (SKILL.md 기준)

기능	필요 여부	설명
파일 쓰기	필요	CI 워크플로, package.json, size-limit·Lighthouse CI 설정을 수정합니다.
명령 실행	일부 필요	size-limit, Lighthouse CI 같은 예산 도구를 설치·실행합니다.
네트워크 송신	일부 필요	개발 의존성 설치에만 사용합니다.

SKILL.md 프런트매터(YAML)commit 4b0ddb9

---
name: performance-budget
description: "Use when reviewing CI configuration, bundle analysis workflows, or pull requests that add dependencies and assets. Distinguish bundle-size budgets from runtime budgets such as Lighthouse or Core Web Vitals so teams can enforce both."
metadata:
  category: testing
  priority: medium
  difficulty: intermediate
  estimatedTime: "25"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/rules/testing/performance-budget
---

핵심 규칙

실행 단계

01단계예산 유무 확인

02단계임계값 설정

03단계CI에 연결

04단계배포 후 모니터링

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬