🎨 Frontend Engineering · Web Performance

Fix Core Web Vitals regressions systematically

Diagnose LCP, INP, and CLS from field data and apply targeted fixes per metric rather than guessing.

advanced~45 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Pull field data (RUM) first; lab scores only reproduce what field data flags
2For LCP: preload the hero asset, fix server TTFB, defer everything competing
3For INP: break long tasks, debounce handlers, move work off main thread
4For CLS: reserve dimensions for media, fonts, and late banners
5Set per-template budgets in CI; fail builds on regression beyond 10%
6Re-check after every third-party script change — they are the usual suspects

Common Pitfalls

▲Optimizing lab LCP while field users on 3G suffer
▲A/B analytics snippets injected without async strategy

Success Signals

✓LCP p75 under 2.5s on 4G
✓CLS under 0.05 on top templates

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill web-performance-core-web-vitals

Install globally

$ npx skills add aniruddhaadak80/skills --skill web-performance-core-web-vitals -g

Tags

#performance#seo#vitals#frontend-engineering#web-performance

Install this skill

$ npx skills add aniruddhaadak80/skills --skill web-performance-core-web-vitals -a opencode

SKILL.md

# Fix Core Web Vitals regressions systematically

> Diagnose LCP, INP, and CLS from field data and apply targeted fixes per metric rather than guessing.

## When to Use This Skill

Diagnose LCP, INP, and CLS from field data and apply targeted fixes per metric rather than guessing.

## Steps

1. Pull field data (RUM) first; lab scores only reproduce what field data flags
2. For LCP: preload the hero asset, fix server TTFB, defer everything competing
3. For INP: break long tasks, debounce handlers, move work off main thread
4. For CLS: reserve dimensions for media, fonts, and late banners
5. Set per-template budgets in CI; fail builds on regression beyond 10%
6. Re-check after every third-party script change — they are the usual suspects

## Common Pitfalls

- Optimizing lab LCP while field users on 3G suffer
- A/B analytics snippets injected without async strategy

View source on GitHub ↗

Modern formats, responsive sizes, lazy strategies, and priority hints for above-fold heroes.

🎨 Frontend Engineering·~25m

Open →

Put JavaScript bundles on a dietintermediate

Analyze, split, and replace dependencies so routes ship only the code they execute.

🎨 Frontend Engineering·~35m