web-performance-optimization

Analyze website loading speed and Core Web Vitals to identify performance bottlenecks.

6|1|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill web-performance-optimization-repairyourtech
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/RepairYourTech/cfsa-antigravity/tree/main/.agent/skill-library/surface/web/web-performance-optimization
Command: npx skills add https://github.com/RepairYourTech/cfsa-antigravity --skill web-performance-optimization-repairyourtech

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by providing systematic methods to optimize web performance, improve Core Web Vitals, and reduce resource load times.

Core Features & Use Cases

  • Performance Auditing: Measure and analyze current website speed using tools like Lighthouse.
  • Issue Identification: Pinpoint bottlenecks such as large assets, render-blocking resources, and unoptimized code.
  • Optimization Implementation: Apply strategies like code splitting, image optimization, and caching.
  • Verification: Re-measure performance to confirm improvements.
  • Use Case: A developer can use this skill to diagnose why their e-commerce site is slow on mobile devices and implement specific optimizations to improve the Largest Contentful Paint (LCP) and reduce Cumulative Layout Shift (CLS).

Quick Start

Use the web-performance-optimization skill to analyze and improve the Core Web Vitals for a given website URL.

Frequently Asked Questions about web-performance-optimization

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

FAQPage Schema
How do I improve Core Web Vitals for my website?

To improve Core Web Vitals, you analyze loading speed and pinpoint bottlenecks like render-blocking resources or large assets. Implementing code splitting, image optimization, and aggressive caching systematically resolves these issues to boost web speed.

What is the best way to reduce bundle size and fix render-blocking resources?

The best way to reduce bundle size and fix render-blocking resources is applying code splitting and optimizing unoptimized assets. Auditing main thread blocking identifies specific bottlenecks, enabling targeted caching and loading speed improvements.

How does Lighthouse auditing help identify web optimization issues?

Lighthouse auditing measures current website speed and identifies performance bottlenecks such as large assets, render-blocking resources, and unoptimized code. This systematic performance auditing pinpoints exactly what causes poor user experience and slow loading times.

Can I optimize loading speed for an e-commerce site on mobile devices?

You can optimize loading speed for an e-commerce site on mobile devices by diagnosing specific Core Web Vitals metrics. Implementing image optimization and code splitting directly improves Largest Contentful Paint and reduces Cumulative Layout Shift.

Why does my website experience main thread blocking and poor user experience?

Your website experiences main thread blocking and poor user experience due to unoptimized code and large assets. Performance auditing reveals these render-blocking resources, allowing you to apply caching strategies and asset optimization to resolve the lag.

What should I do if my Cumulative Layout Shift is still high after image optimization?

If Cumulative Layout Shift remains high after image optimization, you should re-measure performance to verify improvements and identify remaining bottlenecks. Aggressive caching and resolving other unoptimized assets or render-blocking resources may be required.