Perf Expert

Performance Expert Skill

APEX-PERF v24.7.0 | Supreme Performance Analysis Skill Lighthouse, Bundle Analysis, Core Web Vitals, Runtime Profiling Replaces: standalone lighthouse skill, apex-perf archive

Overview

The Performance Expert skill provides comprehensive web performance analysis, optimization, and monitoring capabilities. It consolidates 43 specialized performance reference files into 16 focused, production-grade documents covering every aspect of modern web performance for 2026.

Agent Delegation:

• perf-analyzer (Opus 4.6) -- orchestration, architecture, performance-critical analysis
• lighthouse-auditor (Sonnet 4.6) -- Lighthouse CI, audit interpretation, scoring
• bundle-analyzer (Sonnet 4.6) -- bundle composition, dependency cost, tree shaking

Commands

9-Step Performance Workflow

Step 1: MEASURE (Baseline)
  ├── Lighthouse audit (lab data)
  ├── CrUX/RUM data (field data)
  ├── Bundle analysis
  └── Runtime profiling

Step 2: IDENTIFY (Bottlenecks)
  ├── Largest Contentful Paint element
  ├── Interaction to Next Paint handlers
  ├── Cumulative Layout Shift sources
  ├── Long tasks / main thread blocking
  └── Heavy dependencies / unused code

Step 3: PRIORITIZE (Impact Matrix)
  ├── BLOCK: CWV failures, bundle >120KB, Lighthouse <70
  ├── WARN: CWV borderline, bundle >100KB, Lighthouse <85
  └── INFO: Optimization opportunities, modern API adoption

Step 4: OPTIMIZE (Apply Fixes)
  ├── LCP: preload hero, optimize images, streaming SSR
  ├── INP: scheduler.yield(), code splitting, event delegation
  ├── CLS: explicit dimensions, font display, skeleton loading
  ├── Bundle: tree shaking, dynamic imports, dependency replacement
  └── Runtime: virtualization, Web Workers, requestIdleCallback

Step 5: VERIFY (Gate Checks)
  ├── All 30 verification gates must pass
  ├── Lighthouse CI thresholds met
  ├── Bundle budgets within limits
  └── CWV targets achieved

Step 6: MONITOR (Continuous)
  ├── RUM with web-vitals 5.1.0
  ├── CrUX monthly review
  ├── Vercel Speed Insights
  └── Sentry performance monitoring

Step 7: PREVENT (CI/CD Gates)
  ├── Lighthouse CI on every PR
  ├── Bundle size checks
  ├── Performance budgets
  └── Automated regression detection

Step 8: ITERATE (Continuous Improvement)
  ├── Review field data trends
  ├── Adopt new browser APIs
  ├── Update optimization strategies
  └── Refine budgets based on data

Step 9: REPORT (Stakeholder Communication)
  ├── CWV scorecard
  ├── Bundle composition breakdown
  ├── Before/after comparisons
  └── Recommendations with impact estimates

APEX Performance Thresholds

Core Web Vitals Targets

Bundle Budgets (gzipped)

Ideal Bundle Composition

Runtime Targets

Verification Gates (30 Gates, 5 Clusters)

Cluster 1: Core Web Vitals (BLOCK)

Cluster 2: Bundle Size (BLOCK/WARN)

Cluster 3: Lighthouse Score (BLOCK/WARN)

Cluster 4: Runtime (WARN)

Cluster 5: Modern Optimization (WARN/INFO)

Reference Files

Tech Stack

Quick Start

1. Run Full Audit

# Lighthouse
npx @lhci/cli autorun --config=lighthouserc.js

# Bundle analysis
ANALYZE=true pnpm run build

# CWV check
npx web-vitals-cli https://your-site.com

2. Check Budgets

# Bundle size
npx bundlesize --config bundlesize.config.json

# Unused deps
npx depcheck .

# Coverage
npx puppeteer-coverage http://localhost:3000

3. Set Up CI

# .github/workflows/perf.yml
name: Performance Gate
on: [pull_request]
jobs:
  lighthouse:
    runs-on: [self-hosted, linux, x64, pop-os]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '24'
          cache: 'pnpm'
      - run: pnpm install
      - run: pnpm build
      - run: npx @lhci/cli autorun
  bundle:
    runs-on: [self-hosted, linux, x64, pop-os]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '24'
          cache: 'pnpm'
      - run: pnpm install
      - run: ANALYZE=true pnpm build
      - run: npx bundlesize

Performance Checklist

Pre-Launch

• All 30 verification gates passing
• Lighthouse Performance >= 90
• LCP < 1.5s (lab), <= 2.5s (field p75)
• INP < 150ms (lab), <= 200ms (field p75)
• CLS < 0.05 (lab), <= 0.1 (field p75)
• Initial JS < 100KB gzipped
• Images in WebP/AVIF with responsive sizes
• Brotli compression enabled
• Resource hints configured (preconnect, preload)
• Cache headers set (immutable for static)

Post-Launch

• RUM monitoring active (web-vitals)
• CrUX data collection confirmed
• Performance alerts configured
• Lighthouse CI in pipeline
• Bundle size checks in CI
• Monthly performance review scheduled

Continuous

• Review field data weekly
• Compare lab vs field trends
• Update budgets based on data
• Adopt new browser APIs when stable
• Audit third-party scripts quarterly
• Review dependency costs monthly

Related Skills