optimize

Name: optimize
Availability: InStock
Author: labohemez

Diagnose and fix UI performance issues using Core Web Vitals metrics.

Updated Aug 23, 2026

Search Tags:#ui #performance #optimization #web #lcp #cls #fid

Ready to run

npx skills add https://github.com/labohemez/kangnam-church-reservation --skill optimize-labohemez

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/labohemez/kangnam-church-reservation/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/labohemez/kangnam-church-reservation --skill optimize-labohemez

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues across loading speed, rendering, and interactivity to deliver faster, smoother user experiences.

Core Features & Use Cases

Performance measurement: Collects Core Web Vitals (LCP, FID/INP, CLS), TTI, and bundle sizes to identify bottlenecks.
Targeted optimizations: Recommends and implements image, JavaScript, CSS, and font optimizations, code-splitting, and caching strategies.
Use Case: A slow e-commerce site with heavy product images and large JS bundles can be progressively optimized to improve first interactions and perceived smoothness.

Quick Start

Run an initial performance audit on the current UI, identify the top bottleneck, and implement a targeted optimization plan.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I fix slow web UI loading times and improve Core Web Vitals?▼

Fix slow web UI loading by running a structured workflow that measures Core Web Vitals like LCP and CLS, identifies bottlenecks, and implements targeted optimizations such as image compression and code splitting to verify before and after metrics.

What is the best way to reduce large JavaScript bundle sizes causing UI jank?▼

The best way to reduce large JavaScript bundle sizes causing UI jank is to apply code splitting and targeted script optimizations, systematically measuring Time to Interactive (TTI) and FID/INP to verify the reduction of bloated bundles and rendering delays.

Does this UI optimization workflow apply to mobile web apps with heavy product images?▼

Yes, this UI optimization workflow applies to mobile web apps with heavy product images by diagnosing rendering bottlenecks and implementing specific image and font optimizations to progressively improve perceived smoothness and first interactions.

How do I stop layout shift and improve CLS scores on my e-commerce site?▼

Stop layout shift and improve CLS scores on e-commerce sites by measuring current rendering metrics, identifying visual instability bottlenecks, and applying CSS and font optimizations alongside caching strategies to verify improved CLS performance.

Why does my web app have slow first interaction times and how can I optimize FID?▼

Slow first interaction times occur when large JavaScript blocks the main thread; optimize FID/INP by measuring current interactivity metrics, identifying script bottlenecks, and implementing code splitting to improve UI responsiveness.