Fix CSS Performance Issues with AI in 12 Minutes

# Install Chrome DevTools with AI analysis (requires Chrome 122+)
npx lighthouse https://yoursite.com --view \
  --only-categories=performance \
  --output=json \
  --output-path=./baseline.json

# Capture screenshots during page load
npx playwright test --trace on

# Extract frames from trace
npx playwright show-trace trace.zip

I'm attaching screenshots of my page loading. Identify:
1. Elements causing layout shifts (show pixel measurements)
2. Missing width/height attributes on images
3. Font loading that causes FOUT/FOIT

Provide specific CSS fixes with before/after examples.

// save as analyze-css.ts
import { parse } from 'css-tree';
import fs from 'fs';

const css = fs.readFileSync('./dist/styles.css', 'utf8');
const ast = parse(css);

// Export selector complexity data
const selectors: any[] = [];
ast.children.forEach((rule: any) => {
  if (rule.type === 'Rule') {
    rule.prelude.children.forEach((selector: any) => {
      selectors.push({
        text: selector.toString(),
        specificity: calculateSpecificity(selector), // Custom function
        length: selector.toString().length
      });
    });
  }
});

console.log(JSON.stringify(selectors, null, 2));

npx tsx analyze-css.ts > selectors.json

Analyze this CSS selector data [paste selectors.json]. 
Show me:
1. Over-specific selectors (specificity > 30)
2. Expensive universal selectors (*) 
3. Refactoring suggestions to reduce complexity

Format as: Old selector → New selector (reason)

/* Before: Specificity = 43 */
.header nav ul li.active a.button span { color: blue; }

/* After: Specificity = 11 - AI suggests utility class */
.nav-active-btn { color: blue; }

// tailwind.config.js or postcss.config.js
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx,html}',
    // AI scans component usage
  ],
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./src/**/*.{html,js,jsx,tsx}'],
      safelist: {
        // AI generates this list by analyzing dynamic classes
        standard: [/^data-/, /^aria-/, /hljs/],
        deep: [/modal$/, /tooltip/],
      },
      blocklist: [/debug/, /test-/] // AI finds unused test classes
    })
  ]
}

Scan my React components [attach src/ folder] and list:
1. Classes generated dynamically (template literals, state-based)
2. Third-party library classes I'm using
3. Classes safe to purge (only in commented code)

Format as PurgeCSS safelist config.

npm run build

# Check reduction
ls -lh dist/styles.css

<!-- Before: Causes 0.15 CLS -->
<img src="hero.jpg" alt="Hero">

<!-- After: AI suggests aspect-ratio -->
<img src="hero.jpg" alt="Hero" 
     width="1200" 
     height="630"
     style="aspect-ratio: 1200/630; max-width: 100%; height: auto;">

/* Before: FOUT causes shift */
@import url('https://fonts.googleapis.com/css2?family=Inter');

/* After: AI suggests font-display + size-adjust */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap; /* Prevents invisible text */
  size-adjust: 107%; /* Matches fallback metrics - AI calculates this */
  ascent-override: 90%;
  descent-override: 22%;
}

body {
  font-family: Inter, system-ui, sans-serif;
}

My custom font is Inter. The fallback is system-ui.
Calculate size-adjust, ascent-override, descent-override 
to minimize layout shift during font swap.

Provide CSS @font-face declaration.

# .github/workflows/css-perf.yml
name: CSS Performance Check
on: [pull_request]

jobs:
  analyze:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Build CSS
        run: npm run build
      
      - name: Check bundle size
        run: |
          SIZE=$(stat -f%z dist/styles.css)
          if [ $SIZE -gt 200000 ]; then
            echo "CSS too large: ${SIZE} bytes (max 200KB)"
            exit 1
          fi
      
      - name: AI Analysis
        env:
          ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_KEY }}
        run: |
          # Send CSS to Claude for regression check
          npx ai-css-audit dist/styles.css \
            --compare=baseline.json \
            --fail-on-regression

// Compares new CSS against baseline
// AI flags new expensive selectors or size increases
const anthropic = new Anthropic();
const newCSS = fs.readFileSync('dist/styles.css');
const baseline = JSON.parse(fs.readFileSync('baseline.json'));

const analysis = await anthropic.messages.create({
  model: "claude-sonnet-4-20250514",
  messages: [{
    role: "user",
    content: `Compare this CSS [${newCSS}] to baseline [${baseline}].
    Flag regressions in:
    1. Bundle size (>10% increase)
    2. Selector complexity (new selectors with specificity >30)
    3. New layout shift risks (missing dimensions)
    
    Output: JSON with pass/fail and specific issues`
  }]
});

if (analysis.regression) process.exit(1);

# Run Lighthouse CI
npx lhci autorun --config=lighthouserc.json

// Add to your site
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) continue; // Ignore user-caused shifts
    console.log('Layout shift:', entry.value, entry.sources);
    
    // Send to analytics
    gtag('event', 'cls', { value: entry.value });
  }
}).observe({ type: 'layout-shift', buffered: true });