performance

Identify web performance bottlenecks and recommend actionable optimizations for Core Web Vitals.

72|15|Updated Oct 5, 2025
One-click install
npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill performance-tan-yong-sheng
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/tan-yong-sheng/ai-vision-mcp/tree/main/.claude/skills/performance
Command: npx skills add https://github.com/tan-yong-sheng/ai-vision-mcp --skill performance-tan-yong-sheng

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance often stalls user experience due to slow load times, render-blocking tasks, and inefficient assets. This skill identifies bottlenecks, proposes targeted improvements, and helps teams ship faster, smoother experiences.

Core Features & Use Cases

  • Identify bottlenecks in JavaScript, CSS, images, and rendering paths, then propose actionable optimizations.
  • Enforce performance budgets, suggest caching, compression, and asset sizing strategies, and provide measurable improvements.
  • Use Case: A production site with slow LCP and a large bundle can be tightened by code-splitting, image optimization, and caching rules to achieve better Core Web Vitals.

Quick Start

Analyze a web page and return a prioritized set of Lighthouse-based optimizations to improve Core Web Vitals.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I optimize web performance for slow load times and render-blocking tasks?▼

To optimize web performance, identify bottlenecks in JavaScript, CSS, and rendering paths, then apply targeted improvements like code-splitting and asset sizing to reduce load times and improve Core Web Vitals.

What is the best way to improve Core Web Vitals for a production site?▼

Improving Core Web Vitals involves tightening slow LCP and large bundles through code-splitting, image optimization, and caching rules, enforcing performance budgets to achieve measurable speed improvements.

How do I set performance budgets to prevent slow web performance?▼

Set performance budgets to limit asset sizes and render-blocking tasks, then enforce caching and compression strategies to ensure measurable improvements and prevent web performance from stalling user experience.

Can I use Lighthouse-based optimizations for Single Page Applications?▼

Lighthouse-based optimizations apply to both websites and SPAs during development or production, returning a prioritized set of actionable recommendations to reduce load times and improve Core Web Vitals.

Why does my web performance stall due to inefficient assets and slow rendering?▼

Web performance stalls due to render-blocking tasks and inefficient assets; identifying these bottlenecks and proposing critical rendering path optimizations resolves slow load times and improves the user experience.

When do I need critical rendering path optimizations for my website?▼

Critical rendering path optimizations are needed when inefficient assets and render-blocking tasks stall user experience, requiring targeted improvements to reduce load times and satisfy performance budget requirements.