Performance Skill — AuditKit

This skill is auto-included in the generated ZIP when the Performance pillar score is below 90.

10 stars

Best use case

Performance Skill — AuditKit is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

This skill is auto-included in the generated ZIP when the Performance pillar score is below 90.

Teams using Performance Skill — AuditKit should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/performance/SKILL.md --create-dirs "https://raw.githubusercontent.com/nirholas/AuditKit/main/.agents/skills/performance/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/performance/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How Performance Skill — AuditKit Compares

Feature / Agent	Performance Skill — AuditKit	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

This skill is auto-included in the generated ZIP when the Performance pillar score is below 90.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Performance Skill — AuditKit

This skill is auto-included in the generated ZIP when the Performance pillar score is below 90.

## What it covers

Core Web Vitals (LCP, CLS, TBT/FID, FCP, TTFB, Speed Index) and general page weight / render-blocking resource issues.

## Thresholds (Google's "good" targets)

| Metric | Good | Needs Improvement | Poor |
|--------|------|-------------------|------|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5–4s | > 4s |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1–0.25 | > 0.25 |
| TBT (Total Blocking Time) | < 200ms | 200–600ms | > 600ms |
| FCP (First Contentful Paint) | < 1.8s | 1.8–3s | > 3s |
| TTFB (Time to First Byte) | < 800ms | 800ms–1.8s | > 1.8s |

## Common Fixes

### Slow LCP

```html
<!-- Preload the hero image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- Use modern image formats -->
<img src="/hero.webp" alt="..." width="1200" height="600" loading="eager">
```

```typescript
// Next.js — use next/image with priority
import Image from 'next/image'
<Image src="/hero.webp" alt="..." width={1200} height={600} priority />
```

### High CLS

```css
/* Always set explicit width/height on images */
img { width: 100%; height: auto; aspect-ratio: 16/9; }

/* Reserve space for ads / embeds */
.ad-slot { min-height: 250px; }
```

### Render-blocking resources

```html
<!-- Defer non-critical scripts -->
<script src="/analytics.js" defer></script>

<!-- Inline critical CSS, load rest async -->
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
```

### High TTFB

- Enable edge caching (Vercel Edge Network, Cloudflare)
- Use `stale-while-revalidate` cache headers
- Move API calls to edge functions and cache responses
- Reduce server-side database queries

### Next.js specific

```typescript
// next.config.ts
const config: NextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizeCss: true,
  },
}
```

## Monitoring

After fixing, re-run AuditKit or use:
- https://pagespeed.web.dev — lab + field data
- https://web.dev/measure — detailed Lighthouse report
- Chrome DevTools → Performance tab → record page load

Related Skills

We are still matching the closest adjacent skills for this page. In the meantime, continue through the full directory.