optimize

Diagnose and fix web UI performance issues across loading, rendering, and animations.

Updated Apr 13, 2026

Search Tags:#performance #optimize #web-performance #bundle-size #lcp #cls #fid

Ready to run

npx skills add https://github.com/julianromli/dikara-portfolio --skill optimize-julianromli

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/julianromli/dikara-portfolio/tree/main/.cursor/skills/skills/optimize
Command: npx skills add https://github.com/julianromli/dikara-portfolio --skill optimize-julianromli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

Core Features & Use Cases

Identify and fix performance bottlenecks in web applications (loading, rendering, animation, image handling, and network latency).
Propose a practical optimization plan covering images, JavaScript, CSS, fonts, code-splitting, and caching with measurable outcomes.
Use Case: A slow single-page or multi-page app can be accelerated by targeted optimizations and performance metrics.

Quick Start

Assess the current UI performance issue and begin implementing core optimizations.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I fix a slow web app and improve Core Web Vitals like LCP and CLS?▼

To fix a slow web app and improve Core Web Vitals like LCP and CLS, you must diagnose loading, rendering, and layout shift bottlenecks. This involves targeting images, JavaScript, CSS, and fonts to deliver a measurably faster, smoother user experience.

What is the best way to reduce JavaScript bundle size in a single-page application?▼

The best way to reduce JavaScript bundle size in a single-page application is implementing code-splitting and targeted caching strategies. Identifying heavy dependencies and optimizing script delivery yields a smaller payload and faster load times.

Why does my web UI feel janky during animations and how can I resolve it?▼

Your web UI feels janky during animations due to rendering bottlenecks blocking the main thread. Resolving jank requires identifying performance bottlenecks in rendering and animations to ensure smooth frame rates and a responsive interface.

Can I optimize loading performance for both static sites and progressive web apps?▼

Yes, you can optimize loading performance for both static sites and progressive web apps. Performance diagnostics apply across modern web app architectures by addressing network latency, image handling, and bundle size for measurable loading improvements.

How do I identify performance bottlenecks causing high FID scores?▼

To identify performance bottlenecks causing high FID scores, evaluate JavaScript execution and main thread blocking during loading. Pinpointing heavy script execution allows you to implement procedural optimizations that reduce input delay.