skills.rest
Elliot-TangS
Elliot-TangSCOMMUNITY
Explore all skills by this author →
𝕏@elite_chainGitHub

optimize

Identify and fix UI performance issues across loading, rendering, and animations.

1|Updated Mar 25, 2026
Search Tags:#rendering#optimize#web-performance#bundle-size#core-web-vitals#loading-speed
One-click install
npx skills add https://github.com/Elliot-TangS/EliteChain --skill optimize-elliot-tangs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Elliot-TangS/EliteChain/tree/main/.windsurf/skills/optimize
Command: npx skills add https://github.com/Elliot-TangS/EliteChain --skill optimize-elliot-tangs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix performance issues to create faster, smoother experiences.

Core Features & Use Cases

  • Assess performance issues across loading speed, rendering, animations, images, and bundle size.
  • Provide a systematic optimization strategy including image optimization, code-splitting, CSS optimization, font optimization, and loading strategy.
  • Use case: For a web app with long loading times, apply this Skill to reduce LCP, TTI, CLS, and TBT.

Quick Start

Run a performance audit on your UI and apply the recommended optimizations to reduce Core Web Vitals scores.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix web performance issues and improve Core Web Vitals scores?▼

Fix web performance issues by analyzing loading speed, rendering, and JavaScript bundle size to systematically optimize images, fonts, and CSS, ultimately reducing Core Web Vitals metrics like LCP, TTI, and CLS.

What is the best way to reduce bundle size and speed up loading speed for a web app?▼

The best way to reduce bundle size and increase loading speed is by applying code-splitting, analyzing bundle contents, and implementing loading strategy optimizations to fix JavaScript bottlenecks and improve Core Web Vitals.

How does image optimization affect rendering and animation bottlenecks in user interfaces?▼

Image optimization directly reduces rendering and animation bottlenecks by minimizing resource payload sizes, allowing the user interface to paint faster and deliver smoother visual experiences without dropping frames.

Can I use this optimization strategy for mobile apps facing loading bottlenecks?▼

Yes, this optimization strategy applies to both web and mobile apps facing loading, rendering, and animation bottlenecks across images, font loading, and JavaScript bundles.

Why does font loading cause rendering bottlenecks and how do I optimize it?▼

Font loading causes rendering bottlenecks by blocking text paint, which you can optimize by implementing font loading strategies that ensure measurable improvements in loading speed and smoother user experiences.

How do I validate UI performance improvements after code-splitting and CSS optimization?▼

Validate UI performance improvements through reproducible validation methods to ensure your code-splitting and CSS optimization strategies satisfy requirements for measurable Core Web Vitals targets.

Related Skills

Explore More Software Engineering Skills→
oriysoriys

optimize

Identify and fix web interface performance bottlenecks using Core Web Vitals metrics.

Community
Advanced
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
yeshan333yeshan333
94

optimize

Analyze Core Web Vitals and optimize loading, rendering, animations, and bundle size.

Community
Advanced
tripathishashikanttripathishashikant

optimize

Diagnose and fix UI performance bottlenecks in web applications.

Community
Advanced