optimize

Diagnose and fix UI performance bottlenecks using Core Web Vitals measurements.

Updated Apr 14, 2026

Search Tags:#ui #performance #optimization #rendering #bundle-size #core-web-vitals

Ready to run

npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill optimize-gerald-ica

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/optimize
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill optimize-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size, helping deliver faster, smoother user experiences.

Core Features & Use Cases

Assess performance issues: measure Core Web Vitals (LCP, FID/INP, CLS), load times, bundle size, and runtime performance to identify bottlenecks.
Optimization strategy: propose and apply targeted fixes across images, JavaScript, CSS, and animations; include real-world example such as reducing initial JS payloads or image sizes.
Use Case: Imagine a slow, laggy dashboard; apply the skill to streamline rendering and interactions for a snappier UI.

Quick Start

Analyze the current UI performance and implement the recommended optimizations to achieve a faster, smoother user experience.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I diagnose slow UI performance and fix rendering bottlenecks?▼

To diagnose slow UI performance, measure Core Web Vitals metrics like LCP, FID/INP, and CLS to pinpoint rendering bottlenecks. This structured measurement identifies whether large image assets, heavy JavaScript bundles, or inefficient animations cause the lag.

What's the best way to reduce heavy JavaScript bundle size and improve web loading speed?▼

The best way to reduce heavy JavaScript bundle size and improve loading speed is to analyze runtime performance and propose targeted fixes, such as reducing initial JS payloads or image sizes, to streamline rendering and interactions.

Why does my web interface feel choppy and how do I measure Core Web Vitals to fix it?▼

Your web interface feels choppy due to inefficient animations or heavy assets. Measure Core Web Vitals like LCP, FID/INP, and CLS to identify specific performance bottlenecks, enabling targeted fixes for a snappier UI.

Can I optimize large image assets and inefficient animations within a laggy dashboard?▼

Yes, you can optimize large image assets and inefficient animations within a laggy dashboard by assessing runtime performance and applying targeted optimizations across images and CSS to streamline rendering and deliver a snappier UI.

What are the limitations of applying targeted UI optimizations without measuring Core Web Vitals?▼

Without measuring Core Web Vitals, targeted UI optimizations lack structured identification of loading speed and rendering bottlenecks, making it difficult to effectively reduce initial JS payloads or image sizes and ensure a smoother user experience.