skills.rest
Catsofsuffering
CatsofsufferingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose and fix UI performance issues in web applications using Core Web Vitals.

5|1|Updated Apr 8, 2026
Search Tags:#performance#optimize#web-ui#core-web-vitals#lcp#cls#fid
One-click install
npx skills add https://github.com/Catsofsuffering/CCGS --skill optimize-catsofsuffering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Catsofsuffering/CCGS/tree/main/templates/skills/impeccable/optimize
Command: npx skills add https://github.com/Catsofsuffering/CCGS --skill optimize-catsofsuffering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues to deliver faster, smoother web experiences.

Core Features & Use Cases

  • Assess performance: measure Core Web Vitals (LCP, FID/INP, CLS), load time, bundle size, and runtime performance.
  • Identify bottlenecks: pinpoint slow rendering, large assets, and expensive scripts.
  • Use Case: apply to dashboards, data-rich pages, and e-commerce product lists to reduce jank and improve interactivity.

Quick Start

Run a targeted performance assessment on your main page and apply recommended optimizations to improve perceived speed.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose and fix slow web UI performance in my single-page app?▼

Diagnose slow web UI performance by measuring Core Web Vitals to pinpoint slow rendering, large assets, and expensive scripts. Apply stepwise optimizations to loading speed, rendering, animations, and bundle size for faster, smoother web applications.

What is the best way to improve Core Web Vitals like LCP, CLS, and FID?▼

Improve Core Web Vitals by running a targeted performance assessment to identify bottlenecks in loading speed and layout shifts. Apply recommended optimizations to images and scripts to reduce jank and improve interactivity across your web pages.

How do I optimize bundle size and runtime performance for data-rich dashboards?▼

Optimize bundle size and runtime performance for data-rich dashboards by identifying expensive scripts and large assets. This process reduces jank and improves interactivity by applying targeted rendering and loading optimizations across the application.

Can I use this UI performance optimization strategy for e-commerce product lists?▼

Yes, this UI performance optimization strategy applies to e-commerce product lists. It assesses loading speed and rendering bottlenecks, applying practical optimizations to reduce jank and improve perceived speed for data-rich pages.

Why does my web application have layout shift and rendering jank during loading?▼

Layout shift and rendering jank occur due to unoptimized assets and expensive scripts. Measure CLS and runtime performance to identify these bottlenecks, then apply stepwise fixes to images and loading sequences to improve perceived speed.

Does this performance assessment require specific dependencies to measure Core Web Vitals?▼

No specific dependencies are required to measure Core Web Vitals. The assessment directly evaluates load time, bundle size, and runtime performance to identify bottlenecks and apply recommended optimizations for faster web experiences.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
resultakakresultakak

performance-budget

Enforce performance budgets across CI gates and PR checks.

Community
Advanced
Noisemaker111Noisemaker111

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js app performance.

Community
Advanced
wilfriedagowilfriedago
2

angular-performance

Optimize Angular performance with NgOptimizedImage, @defer lazy loading, and SSR hydration.

Community
Intermediate