Make a frontend fast to a budget: analyze and code-split the bundle by route, lazy-load heavy/below-the-fold, optimize images/fonts, minimize hydration (RSC/islands), kill render-blocking and request waterfalls, and tune the Core Web Vitals (LCP/INP/CLS) against field data.
Installs into .claude/skills of the current project.
Are you the author of Frontend Performance?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/mcorbett51090-frontend-performance)
---
name: frontend-performance
description: "Make a frontend fast to a budget: analyze and code-split the bundle by route, lazy-load heavy/below-the-fold, optimize images/fonts, minimize hydration (RSC/islands), kill render-blocking and request waterfalls, and tune the Core Web Vitals (LCP/INP/CLS) against field data."
---
# Frontend Performance
## Bundle budget
Analyze what you ship; **code-split by route**; lazy-load heavy/below-the-fold. A +200KB dep for one feature is a budget decision.
## Core Web Vitals
- **LCP**: prioritize the hero, preconnect, optimize the image/font.
- **INP**: free the main thread (split work, no heavy sync handlers).
- **CLS**: reserve space for media/ads.
Measure **field** data, not just lab.
## Hydration
RSC/islands: ship server components, hydrate only interactive leaves.
## Enforce
A bundle-size / Lighthouse **budget in CI** (with devops-cicd) so perf doesn't rot per-PR.
