skills.rest
hossain-khan
hossain-khanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose web app performance issues and generate structured optimization plans.

Updated Mar 13, 2026
Search Tags:#performance#frontend#optimization#web#bundle-size#core-web-vitals#lcp
One-click install
npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill optimize-hossain-khan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/hossain-khan/hk-vision-slideshow/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill optimize-hossain-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance issues hamper user experience; this skill helps identify and fix problems to deliver faster, smoother interfaces.

Core Features & Use Cases

  • Assess performance metrics across loading, rendering, and animations, including Core Web Vitals (LCP, FID/INP, CLS), Time to Interactive, and bundle size.
  • Provide a structured optimization strategy covering loading performance, rendering performance, animation smoothness, and network considerations.
  • Use cases include optimizing web apps and SPAs, improving perceived performance on desktop and mobile, and preparing production-grade performance budgets.

Quick Start

Run a baseline performance audit and apply a structured optimization plan to improve loading speed, rendering, and animations.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify and fix web interface performance issues in my SPA?▼

Core Web Vitals optimization targets LCP, FID/INP, and CLS to improve web interface loading and rendering. Measuring these metrics alongside Time to Interactive helps diagnose loading times and rendering bottlenecks, enabling a structured plan to deliver smoother user experiences.

What's the best way to reduce bundle size and improve loading performance?▼

Reducing bundle size requires measuring it alongside Core Web Vitals to establish a performance budget. A structured optimization strategy then targets loading performance, rendering bottlenecks, and network considerations to improve perceived performance on both desktop and mobile devices.

How do I measure and improve animation smoothness and frame rates across devices?▼

Animation smoothness and frame rates are measured to diagnose rendering bottlenecks across different devices and network conditions. Applying a structured optimization plan addresses animation performance and rendering strategies to ensure smoother user experiences.

Can I use this approach to prepare production-grade performance budgets for web apps?▼

Yes, you can prepare production-grade performance budgets by assessing bundle size, Core Web Vitals, and Time to Interactive. This assessment provides a structured optimization strategy covering loading, rendering, animation, and network considerations for your web apps.

Why does my web app have slow rendering bottlenecks and poor perceived performance on mobile?▼

Slow rendering bottlenecks and poor perceived performance on mobile stem from unoptimized loading times and animation frame rates. Diagnosing Core Web Vitals and applying a structured network and rendering strategy resolves these interface performance issues.

Related Skills

Explore More Software Engineering Skills→
keshavraj936keshavraj936

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals for web performance.

Community
Intermediate
YuDefineYuDefine
45

optimize

Identify and fix frontend performance bottlenecks in web apps and SPAs.

Official
Advanced
DaFumDaFum
1

perf-budget-enforcer

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

Community
Intermediate
mikeOnBreezemikeOnBreeze
284

react-best-practices

Eliminate React and Next.js performance bottlenecks with prioritized actionable rules.

Community
Intermediate