Web Performance Optimization

The web-performance-optimization skill empowers AI agents to analyze and enhance frontend application speed. It identifies bottlenecks in code, assets, and rendering processes to deliver faster user experiences.

When to use it

• Reducing Time to Interactive (TTI) for legacy websites before a major redesign.
• Optimizing large-scale e-commerce platforms where load time impacts conversion rates.
• Preparing static site generators or Next.js applications for production deployment.
• Diagnosing why specific mobile devices are experiencing slower page loads than desktops.

Key capabilities

• Analyzing Core Web Vitals and identifying specific performance metrics to improve.
• Generating code suggestions to minimize render-blocking resources and optimize asset delivery.
• Recommending strategies for lazy loading, image compression, and caching policies.
• Providing actionable steps to reduce JavaScript bundle sizes and improve parsing efficiency.

Example prompts

• "Analyze this Next.js project structure and suggest specific changes to improve the Largest Contentful Paint (LCP)."
• "Identify render-blocking resources in my HTML and provide code snippets to defer or async them."
• "Generate a checklist for optimizing images on my website to reduce total page weight without losing quality."

Tips & gotchas

This skill focuses on frontend optimization strategies; it may not address backend server latency or database query performance. For best results, ensure your development environment supports the tools mentioned in the generated recommendations, such as specific bundlers or image processing libraries.