skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

performance

Diagnose and optimize UI performance against Core Web Vitals budgets.

Updated Jul 20, 2026
Search Tags:#performance#lighthouse#core web vitals#code-splitting#lcp#cls#frontend optimization
One-click install
npx skills add https://github.com/idy-00/paytrack --skill performance-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/performance
Command: npx skills add https://github.com/idy-00/paytrack --skill performance-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Slow, janky interfaces and layout shifts hurt users on low-end devices and fail Core Web Vitals budgets. This Skill provides a structured workflow to diagnose and fix LCP, INP, and CLS issues in web UIs. ## Core Features & Use Cases - Web Vitals Diagnosis: Measure and fix LCP ≤ 2.5s, INP ≤ 200ms, and CLS ≤ 0.1 on a throttled mid-tier mobile profile. - Loading & Code-Split Strategy: Apply SSR/Server Components, route-level code-splitting, lazy loading, and critical font preloading. - Layout-Shift & Animation Rules: Reserve media space with aspect-ratio, size skeletons correctly, and restrict animation to compositor-friendly transform/opacity properties. - Use Case: A product page fails Lighthouse on mobile. Use this Skill to identify render-blocking resources, split heavy widgets, fix skeleton sizing, and verify the page meets Web Vitals budgets under slow-4G throttling. ## Quick Start Use the performance skill to audit my product page and bring LCP, INP, and CLS within Core Web Vitals budgets on mobile.

Frequently Asked Questions about performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I improve Core Web Vitals scores on my website?▼

Measure LCP, INP, and CLS on a mid-tier mobile profile with slow-4G and 4x CPU throttling, then fix the largest bottleneck first. Render above-fold content via SSR, code-split by route, reserve media space with aspect-ratio, and limit animations to transform and opacity.

How to fix layout shift (CLS) caused by images and skeletons?▼

Reserve space for media using the aspect-ratio CSS property and size loading skeletons to the final content dimensions. Never inject content above existing elements, which keeps CLS at zero during load.

What are the target budgets for LCP, INP, and CLS?▼

The standard Core Web Vitals budgets are LCP at or below 2.5 seconds, INP at or below 200 milliseconds, and CLS at or below 0.1. These should be verified on a throttled mid-tier mobile profile, not a desktop machine.

Which CSS properties are safe for performant animations?▼

Only transform and opacity should be animated, since they run on the compositor without triggering layout or paint. Keep durations between 100 and 300 milliseconds, use will-change sparingly, and honor prefers-reduced-motion.

Does code-splitting help with INP and load performance?▼

Yes. Code-split by route and by heavy widget, lazy-load below-fold or behind-interaction content, and prefer CSS state styling over JavaScript to keep interactions responsive. Tree-shaking and per-component imports further reduce bundle cost.

Related Skills

Explore More Software Engineering Skills→
GregM1991GregM1991

core-web-vitals

Diagnose and optimize LCP, INP, and CLS using field data and browser traces.

Community
Advanced
hopeoverturehopeoverture
6

performance-budget-enforcer

Enforce performance budgets on bundle sizes, Lighthouse scores, and Web Vitals in CI/CD pipelines.

Community
Advanced
Carlosfwd86Carlosfwd86

gsap-performance

Optimize GSAP animations with transform-based motion and cleanup for reduced jank.

Community
Intermediate
SufficientDaikonSufficientDaikon
8

astro-islands-expert

Design scalable Astro islands with framework selection and hydration directives.

Community
Advanced