skills.rest
Colten-Covington
Colten-CovingtonCOMMUNITY
Explore all skills by this author →
GitHub

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Updated Feb 13, 2026
Search Tags:#performance#web vitals#optimization#bundle analysis#lcp#cls#react profiling
One-click install
npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill performance-profiling-colten-covington
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-profiling
Source: https://github.com/Colten-Covington/Buzz-Stack/tree/main/.github/skills/performance-profiling
Command: npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill performance-profiling-colten-covington

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times, janky user interfaces, and large application bundles, ensuring a smooth and responsive user experience.

Core Features & Use Cases

  • Web Vitals Monitoring: Track and improve LCP, FID, and CLS metrics.
  • React Profiling: Identify and fix component render bottlenecks using React DevTools.
  • Bundle Analysis: Optimize application size by analyzing and code-splitting dependencies.
  • Runtime Performance: Measure and optimize function execution times and network requests.
  • Use Case: A user reports that your e-commerce site is slow to load product details. Use this Skill to profile the component, analyze network requests, and identify that an unoptimized image or an excessive number of API calls is causing the delay.

Quick Start

Analyze the performance of the 'product-details' page to identify rendering bottlenecks.

Frequently Asked Questions about performance-profiling

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

FAQPage Schema
How do I fix a slow loading React page and identify component render bottlenecks?▼

Analyze and optimize web performance by measuring Core Web Vitals like LCP, FID, and CLS. Tracking these metrics identifies slow loading, poor interactivity, and layout shifts to resolve user experience issues.

How do I reduce a large JavaScript bundle size that is slowing down my web app?▼

Reduce large JavaScript bundle size by using bundle analyzers to inspect dependencies. Analyzing and code-splitting these dependencies optimizes application size and resolves slow website loading times.

Why does my e-commerce site have poor Core Web Vitals and how can I analyze network requests?▼

Poor Core Web Vitals on e-commerce sites often stem from unoptimized images or excessive API calls. Profile components and analyze network requests to identify the delays causing slow product detail loading.

Can I use Lighthouse to measure runtime performance and optimize function execution times?▼

Yes, use Lighthouse to measure runtime performance and optimize function execution times. It evaluates web application performance to identify and resolve performance bottlenecks affecting responsiveness.

Related Skills

Explore More Software Engineering Skills→
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
hiddink-aihiddink-ai
1

optimize-bundle

Analyze build output and apply code splitting and tree-shaking optimizations.

Official
Intermediate
abzhawabzhaw

performance-profiling

Run Lighthouse-based audits to measure web performance metrics like LCP, INP, and CLS.

Community
Intermediate
danieldev24danieldev24

browser-testing-with-devtools

Automates web application testing and debugging using Chrome DevTools.

Community
Advanced