# Performance Testing Patterns

> Performance testing using Chrome DevTools, Lighthouse, and Core Web Vitals monitoring. Use for performance profiling or optimization validation. Use when this capability is needed.

- Skill: `tomevault-io/performance-testing-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/performance-testing-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/performance-testing-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/performance-testing-patterns

---


# Performance Testing Patterns

## Lighthouse CI

```bash
# Install
npm install -D @lhci/cli

# Run lighthouse
lhci autorun

# lighthouse.config.js
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3,
    },
    assert: {
      preset: 'lighthouse:recommended',
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 0.9 }],
      },
    },
  },
}
```

## Core Web Vitals

```typescript
// Measure CWV in tests
test('page meets Core Web Vitals', async ({ page }) => {
  await page.goto('/')

  const metrics = await page.evaluate(() => {
    return new Promise((resolve) => {
      new PerformanceObserver((list) => {
        const entries = list.getEntries()
        const lcp = entries.find(e => e.entryType === 'largest-contentful-paint')
        const fid = entries.find(e => e.entryType === 'first-input')
        const cls = entries.find(e => e.entryType === 'layout-shift')
        
        resolve({ lcp: lcp?.startTime, fid: fid?.processingStart, cls: cls?.value })
      }).observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] })
    })
  })

  expect(metrics.lcp).toBeLessThan(2500) // Good LCP < 2.5s
})
```

## Bundle Analysis

```bash
# Next.js bundle analyzer
npm install -D @next/bundle-analyzer

# next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer({
  // config
})

# Run analysis
ANALYZE=true npm run build
```

## Performance Budget

```javascript
// budget.json
[
  {
    "path": "/*",
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "total", "budget": 500 }
    ]
  }
]
```

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/ak-eyther) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-15 -->