Web Performance Optimization

What it does

This skill enables AI agents to analyze and improve the loading speed, responsiveness, and overall efficiency of web applications. It focuses on identifying performance bottlenecks and implementing strategies to reduce render-blocking resources and optimize asset delivery.

When to use it

• Diagnosing slow Time to Interactive (TTI) or First Contentful Paint (FCP) metrics in production environments.
• Optimizing large-scale e-commerce sites where image and script loading delays impact conversion rates.
• Reducing Cumulative Layout Shift (CLS) by analyzing resource loading order and sizing attributes.
• Preparing websites for Core Web Vitals updates to ensure search engine ranking stability.

Key capabilities

• Analyzing network waterfall data to identify render-blocking resources.
• Recommending code splitting and lazy loading strategies for JavaScript bundles.
• Optimizing image formats, compression, and delivery methods (e.g., WebP, AVIF).
• Evaluating CSS critical path extraction opportunities.

Example prompts

• "Analyze this React application's Lighthouse report and suggest specific changes to improve its Largest Contentful Paint score."
• "Identify render-blocking resources in this HTML file and propose a refactoring plan to prioritize above-the-fold content."
• "Optimize the image delivery strategy for this landing page to reduce Total Blocking Time by at least 30%."

Tips & gotchas

Ensure you have access to real-world performance data (e.g., Lighthouse, WebPageTest) before asking for optimization strategies, as generic advice may not address specific bottlenecks. Always test changes in a staging environment first, as aggressive optimizations like code splitting can introduce new runtime complexity if not implemented carefully.