performance

Analyzes Lighthouse audits and Core Web Vitals metrics to implement web performance optimizations.

Updated Mar 2, 2026
One-click install
npx skills add https://github.com/vitoropereira/claude-starter-kit --skill performance-vitoropereira
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: performance
Source: https://github.com/vitoropereira/claude-starter-kit/tree/main/.claude/skills/frontend/performance
Command: npx skills add https://github.com/vitoropereira/claude-starter-kit --skill performance-vitoropereira

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by identifying and implementing critical performance optimizations.

Core Features & Use Cases

  • Bottleneck Identification: Pinpoints performance issues in code, assets, and server response.
  • Optimization Strategies: Provides actionable code examples and best practices for critical rendering path, JavaScript, CSS, images, and fonts.
  • Performance Budgeting: Defines clear targets for resource sizes and load times.
  • Use Case: When a website's load time is too slow, this Skill can analyze the page and suggest specific changes to improve metrics like LCP, FCP, and TBT, leading to a faster and more engaging user experience.

Quick Start

Optimize the performance of the website at https://example.com.

Frequently Asked Questions about performance

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

FAQPage Schema
How do I optimize my website's loading speed and improve Core Web Vitals?

Website performance optimization improves loading speed by analyzing the critical rendering path and optimizing resources like JavaScript, CSS, images, and fonts. It targets Core Web Vitals metrics such as LCP, FCP, and TBT to enhance user experience.

What is the best way to identify bottlenecks causing slow web page load times?

Identifying bottlenecks causing slow web page load times requires pinpointing performance issues in code, assets, and server response. Utilizing Lighthouse audits provides actionable insights to resolve these specific loading speed constraints.

How do I establish a performance budget for frontend resources?

Establishing a performance budget for frontend resources involves defining clear targets for resource sizes and load times. This strategy ensures your JavaScript, CSS, and images stay within limits to maintain optimal website loading speed.

Can Lighthouse audits help fix poor user experience caused by slow loading?

Lighthouse audits can help fix poor user experience by measuring runtime efficiency and identifying specific performance issues. The audit results guide actionable code changes to improve loading speed and overall web vitals metrics.

What strategies improve runtime efficiency and the critical rendering path?

Improving runtime efficiency and the critical rendering path requires optimizing JavaScript execution, deferring non-critical CSS, and properly sizing images. These strategies minimize render-blocking resources and accelerate page loading speed.