Dev-Toolbelt
Dev-Toolbelt/dev-team-agents
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Dev-Toolbelt/dev-team-agents --skill performance-budgets命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | performance-budgets |
| description | Core Web Vitals, bundle budgets, Lighthouse CI, image optimization. |
Load for frontend or full-stack projects where user-perceived performance matters. Not applicable to backend-only services.
| Metric | Good | Needs improvement | Poor | Measures |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5s | 2.5–4s | > 4s | Loading |
| INP (Interaction to Next Paint) | ≤ 200ms | 200–500ms | > 500ms | Interactivity |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 | Visual stability |
FID (First Input Delay) was replaced by INP in March 2024.
| Asset | Budget | Measured as |
|---|---|---|
| Initial JS (critical path) | ≤ 200 KB | gzipped |
| Total JS | ≤ 500 KB | gzipped |
| Initial CSS | ≤ 50 KB | gzipped |
| Web fonts | ≤ 100 KB | total |
| Hero image | ≤ 200 KB | per viewport |
Adjust per project; record agreed budgets in docs/development/performance-budgets.md.
Integrate Lighthouse CI in the PR pipeline:
# .github/workflows/lighthouse.yml (example)
- uses: treosh/lighthouse-ci-action@v11
with:
urls: |
http://localhost:3000
budgetPath: .lighthouserc.json
uploadArtifacts: true
Minimum score gates (recommended):
| Category | Minimum |
|---|---|
| Performance | 80 |
| Accessibility | 90 |
| Best Practices | 90 |
| SEO | 80 |
| Format priority | When to use |
|---|---|
| AVIF | Modern browsers; best compression |
| WebP | Broad support; fallback for no-AVIF |
| JPEG/PNG | Legacy fallback only |
Rules:
width and height attributes to prevent CLSloading="lazy" for below-fold imagesfetchpriority="high" on the LCP imagesrcset and sizes| Hint | Use for | Risk |
|---|---|---|
<link rel="preload"> | LCP image, critical font, hero CSS | Over-use delays other resources |
<link rel="prefetch"> | Next-page assets (navigation prediction) | Low priority; wastes bandwidth if wrong |
<link rel="preconnect"> | Third-party origins (CDN, fonts) | Only top 2–3 origins |
modulepreload | ES modules needed for first interaction | Chrome-specific (ignored elsewhere) |
<head>media="print" onload="this.media='all'"critters, penthouse, criticalNew Chrome signal (2024). Flags tasks > 50ms that block the main thread. Detect with:
new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.duration > 50) console.warn('LoAF:', entry);
}
}).observe({ type: 'long-animation-frame', buffered: true });
performance-budgets.md?width/height?