skills.rest
adperem
adperemCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and fix UI performance issues in web applications.

Updated Apr 19, 2025
Search Tags:#optimize#performance-tuning#web-performance#bundle-size#core-web-vitals#ui-performance#loading-time
One-click install
npx skills add https://github.com/adperem/adperem.github.io --skill optimize-adperem
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/adperem/adperem.github.io/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/adperem/adperem.github.io --skill optimize-adperem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams identify and fix UI performance issues across loading speed, rendering, animations, images, and bundle size, reducing perceived and actual latency.

Core Features & Use Cases

  • Performance assessment: measures Core Web Vitals (LCP, FID/INP, CLS), load time, bundle sizes, and runtime metrics.
  • Targeted optimizations: proposes improvements for images, JavaScript/CSS delivery, and animation performance.
  • Use Case: a web app experiences slow initial render; apply this Skill to reduce load time and smooth interactions.

Quick Start

Tell me the main performance bottleneck you see and I will propose concrete fixes.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix slow loading times and frame drops in my web SPA?▼

To fix slow loading times and frame drops in a web SPA, diagnose UI performance across rendering and animations, then apply a structured optimization plan with measurable before and after guardrail metrics.

How can I improve Core Web Vitals like LCP and CLS for my web application?▼

Improve Core Web Vitals like LCP and CLS by assessing runtime metrics and bundle sizes, then implementing targeted optimizations for JavaScript delivery and rendering stability.

What is the best way to reduce JavaScript bundle size for a slow initial render?▼

The best way to reduce JavaScript bundle size for initial render is to analyze delivery strategy and apply targeted optimizations to code bundles, ensuring measurable load time reductions.

Does this UI performance optimization approach work for both desktop and mobile web apps?▼

Yes, this UI performance optimization approach works across desktop and mobile contexts, diagnosing and fixing loading speed, rendering, and animation issues for web applications and SPAs.

Why are my web app animations dropping frames and how do I smooth them out?▼

Animations drop frames due to rendering bottlenecks; smooth them out by diagnosing runtime UI performance issues and applying targeted animation optimizations within a structured performance tuning plan.

Related Skills

Explore More Software Engineering Skills→
skytiger6724skytiger6724
2

performance-optimization

Profile applications and verify performance improvements against Core Web Vitals targets.

Community
Advanced
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
KhaledaunKhaledaun

web-performance-optimization

Measures loading speed and Core Web Vitals to identify and resolve web performance bottlenecks.

Community
Advanced