optimize

Diagnose and fix web application performance bottlenecks using Core Web Vitals.

Updated Apr 7, 2026
One-click install
npx skills add https://github.com/niiiusburo/Tgroup --skill optimize-niiiusburo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/niiiusburo/Tgroup/tree/main/website/.agents/skills/optimize
Command: npx skills add https://github.com/niiiusburo/Tgroup --skill optimize-niiiusburo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps diagnose and fix user-facing performance problems in web interfaces, including slow loads, laggy interactions, choppy animations, oversized assets, and inefficient bundles.

Core Features & Use Cases

  • Performance Diagnosis: Evaluates loading speed, rendering cost, runtime behavior, network payloads, and Core Web Vitals to find the real bottlenecks.
  • Targeted Optimization: Recommends practical fixes for images, JavaScript bundles, CSS, fonts, DOM structure, and animation smoothness.
  • Real-World Use Cases: Improve a sluggish landing page, reduce interaction jank in a React app, or cut bundle weight before a release.

Quick Start

Analyze the attached application or codebase for performance bottlenecks and recommend the highest-impact fixes to make it load faster and feel smoother.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose web application performance bottlenecks causing slow loading and rendering jank?

Diagnose web application performance bottlenecks by measuring LCP, INP, FID, CLS, load time, and runtime behavior using browser performance tooling. This process evaluates loading speed, rendering cost, network payloads, and Core Web Vitals to pinpoint the real bottlenecks in your UI codebase.

What's the best way to reduce JavaScript bundle bloat and oversized images before a release?

The best way to reduce bundle bloat and oversized images is through targeted optimization that evaluates network payloads and recommends practical fixes for JavaScript bundles and assets. This approach cuts bundle weight and improves loading speed before deployment.

How does fixing Core Web Vitals improve animation smoothness in a React app?

Fixing Core Web Vitals improves animation smoothness by diagnosing interaction jank and runtime behavior in your React app. Measuring INP or FID alongside rendering cost identifies stutter causes, enabling targeted fixes for DOM structure and animation performance.

Can I optimize a sluggish landing page without knowing its exact runtime behavior?

You can optimize a sluggish landing page without prior runtime knowledge by analyzing the attached application or codebase. The diagnosis measures actual load time, rendering cost, and network payloads to find bottlenecks and recommend the highest-impact fixes.

Why does my web app still have poor Core Web Vitals after reducing image sizes?

Poor Core Web Vitals after reducing image sizes often stem from unmeasured rendering jank, JavaScript bundle inefficiency, or DOM structure issues. A full performance diagnosis evaluates LCP, INP, CLS, and runtime behavior to identify remaining bottlenecks beyond assets.

What performance metrics do I need to measure to fix interaction lag in web interfaces?

To fix interaction lag in web interfaces, you need to measure INP or FID, runtime behavior, and load time. Evaluating these Core Web Vitals alongside rendering cost and network payloads validates before-and-after improvements with browser performance tooling.