core-web-vitals-tuner

Savant verdict: Review advised

Security analysis or source-hub review identified patterns requiring attention.

Live evaluation

Not evaluated yet. Workspaces can request a live evaluation.

Security assessment

Scan pending.

Structure

• No license declaredConfirm you may reuse this skill before importing it into your repository.
• The source hub's security checks flagged this skillRunlayer: warn (1/1 file flagged)

SKILL.md

---
name: core-web-vitals-tuner
description: Systematically improves Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) with prioritized fixes and verification. Use for "Core Web Vitals", "performance", "LCP", "INP", or "CLS".
---

# Core Web Vitals Tuner

Improve LCP, INP, and CLS systematically.

## LCP Optimization (<2.5s)

**Prioritized Fixes:**

1. **Optimize images** (Biggest impact)

   ```html
   <!-- Before -->
   <img src="hero.jpg" />

   <!-- After -->
   <img
     src="hero.jpg"
     srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
     loading="eager"
     fetchpriority="high"
   />
   ```

2. **Preload LCP resource**

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

3. **Inline critical CSS**

   ```html
   <style>
     /* Above-the-fold styles */
     .hero {
       display: flex;
       height: 100vh;
     }
   </style>
   ```

4. **Use CDN**
   - Serve images from CloudFront/Cloudflare
   - Enable HTTP/2 or HTTP/3

## INP Optimization (<200ms)

**Fixes:**

1. **Debounce expensive interactions**

   ```typescript
   import { debounce } from "lodash";

   const handleSearch = debounce((query) => {
     fetchResults(query);
   }, 300);
   ```

2. **Use Web Workers for heavy tasks**

   ```typescript
   const worker = new Worker("processor.js");
   worker.postMessage(largeData);
   worker.onmessage = (e) => console.log(e.data);
   ```

3. **Code splitting**
   ```typescript
   const HeavyComponent = lazy(() => import("./HeavyComponent"));
   ```

## CLS Optimization (<0.1)

**Fixes:**

1. **Reserve space for images/ads**

   ```html
   <img src="banner.jpg" width="1200" height="600" />
   ```

2. **Use CSS aspect-ratio**

   ```css
   .video-container {
     aspect-ratio: 16 / 9;
   }
   ```

3. **Avoid injecting content above existing**
   ```css
   .notification {
     position: fixed;
     top: 0;
   }
   ```

## Verification

```bash
# Lighthouse CI
npm run lighthouse -- --url=https://example.com

# Web Vitals in production
import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);
```

## Output Checklist

- [ ] LCP optimized (<2.5s)
- [ ] INP optimized (<200ms)
- [ ] CLS optimized (<0.1)
- [ ] Monitoring in place
- [ ] Performance regression tests
      ENDFILE