optimize

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

Updated Mar 16, 2026

Search Tags:#performance #rendering #animations #optimize #web #loading #bundle-size

Ready to run

npx skills add https://github.com/Muccarini/automata --skill optimize-muccarini

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Muccarini/automata/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/Muccarini/automata --skill optimize-muccarini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

Assess performance: measure Core Web Vitals, load time, bundle size, and runtime performance to identify bottlenecks.
Optimize strategically: implement lazy loading, code-splitting, CSS optimization, font loading, and caching strategies to improve LCP, FID/INP, and CLS.
Use Case: Example—optimize a web app to achieve a faster TTI and reduce total blocking time across devices and network conditions.

Quick Start

Run the optimize skill to identify and fix performance issues in your web app and produce a prioritized plan to improve loading, rendering, and runtime performance.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I identify and fix web performance bottlenecks for Core Web Vitals?▼

To fix web performance bottlenecks, measure Core Web Vitals like LCP, FID/INP, and CLS, then apply targeted optimizations such as lazy loading, code-splitting, and CSS optimization to improve loading and rendering speed across devices.

What's the best way to reduce bundle size and improve loading speed in a web app?▼

The best way to reduce bundle size and improve loading speed is implementing code-splitting and lazy loading strategies, which minimize initial payload and accelerate time to interactive across various network conditions.

How does code-splitting and lazy loading improve runtime performance and TTI?▼

Code-splitting and lazy loading improve runtime performance and TTI by deferring non-critical JavaScript execution, directly reducing total blocking time and ensuring smoother, faster user experiences on mobile and desktop.

Can I optimize rendering and animations for both mobile and desktop web interfaces?▼

Yes, you can optimize rendering and animations across mobile and desktop web interfaces by applying CSS optimization and structured caching strategies, delivering measurable before/after improvements for smoother runtime performance.

Why does my web interface experience layout shifts, and how do I optimize CLS?▼

Layout shifts occur when web interface elements render dynamically, and you optimize CLS by implementing font loading strategies and reserving space for assets to ensure visual stability during page load.

When should I implement caching strategies and font loading optimization for web performance?▼

You should implement caching strategies and font loading optimization when addressing slow load times and rendering jank, ensuring assets are retrieved efficiently to maximize web performance and achieve concrete improvements.