How does it help with Core Web Vitals?

The skill provides strategies to improve LCP, FID, and CLS by optimizing images, suggesting code splitting, and identifying layout shifts in your components.

Can this skill help reduce my JavaScript bundle size?

Yes, it analyzes your imports and dependencies to identify large packages and suggests tree-shaking improvements or lightweight alternatives like replacing Moment.js with date-fns.

Is this a replacement for Lighthouse?

It complements Lighthouse by providing static code analysis and specific implementation patterns to fix the issues that Lighthouse identifies during runtime testing.

Does it provide specific code suggestions for React?

Absolutely. It detects patterns that cause unnecessary re-renders and suggests specific implementations of useMemo, useCallback, and React.memo.

Performance Analyzer

Name: Performance Analyzer
Author: physics91

byphysics91

Analytics & Monitoring

Analyzes frontend applications to identify performance bottlenecks and provides actionable optimizations for bundle size, rendering, and Core Web Vitals.

About

The Performance Analyzer skill is a specialized tool for developers seeking to optimize their frontend applications for speed and efficiency. It conducts a deep audit of your codebase to detect large dependencies, tree-shaking failures, and unnecessary React re-renders. Beyond just identification, it offers specific code-level suggestions for memoization, dynamic imports, and image optimization to improve critical metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). This skill is essential for ensuring high-performance user experiences and maintaining lean, production-ready bundles.

Key Features

Core Web Vitals assessment including LCP, FID, and CLS improvement strategies
Identification of code-splitting opportunities using dynamic imports
React rendering optimization identifying unnecessary re-renders and memoization needs
0 GitHub stars
Comprehensive bundle size and dependency analysis with lightweight alternatives
Automated image and asset optimization recommendations

Use Cases

Conducting pre-production performance audits to meet Core Web Vitals standards
Fixing UI performance issues and 'jank' in complex React components
Reducing initial bundle size and improving page load times for web applications

About

Key Features

Core Web Vitals assessment including LCP, FID, and CLS improvement strategies
Identification of code-splitting opportunities using dynamic imports
React rendering optimization identifying unnecessary re-renders and memoization needs
0 GitHub stars
Comprehensive bundle size and dependency analysis with lightweight alternatives
Automated image and asset optimization recommendations

Use Cases

Conducting pre-production performance audits to meet Core Web Vitals standards
Fixing UI performance issues and 'jank' in complex React components
Reducing initial bundle size and improving page load times for web applications