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.