Performance Optimization

What it does

This skill enables AI agents to analyze and improve the runtime efficiency of frontend applications. It focuses on reducing load times, minimizing resource consumption, and enhancing overall user experience through targeted technical adjustments.

When to use it

• Diagnosing slow page loads or high Time to Interactive (TTI) metrics in production environments.
• Reducing bundle sizes by identifying unused code, assets, or inefficient dependencies.
• Optimizing rendering performance for complex dashboards or data-heavy single-page applications.
• Preparing an application for mobile deployment where bandwidth and processing power are limited.

Key capabilities

• Automated analysis of frontend performance bottlenecks.
• Identification of render-blocking resources and critical path delays.
• Recommendations for code splitting, lazy loading, and asset optimization.
• Monitoring of core web vitals to ensure compliance with modern standards.

Example prompts

• "Analyze my current React application's load time and suggest specific changes to improve the First Contentful Paint."
• "Identify large JavaScript bundles in my codebase that can be split or deferred to speed up initial rendering."
• "Optimize the image assets in this frontend project to reduce total page weight without losing visual quality."

Tips & gotchas

Performance optimization is highly dependent on the specific technology stack and architecture of your application. Ensure you have access to the relevant source code and build configurations before running deep analysis, as some tools may not be able to inspect minified or obfuscated production builds effectively.