frontend-performance

Analyze and optimize React and TypeScript frontend performance using Lighthouse and React DevTools.

Updated Apr 13, 2026

Search Tags:#typescript #performance #react #web vitals #optimization #auditing

Ready to run

npx skills add https://github.com/henrycashe26/my_skills --skill frontend-performance-henrycashe26

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/henrycashe26/my_skills/tree/main/coding/frontend-performance
Command: npx skills add https://github.com/henrycashe26/my_skills --skill frontend-performance-henrycashe26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses slow load times, high bundle sizes, janky animations, and poor Core Web Vitals by providing a structured, measurement-first approach to performance engineering.

Core Features & Use Cases

Measurement-Driven Auditing: Establishes baselines for LCP, INP, CLS, and TTFB before applying optimizations.
Layered Analysis: Provides specific diagnostic workflows for the four performance layers: Network, Parse, Render, and Interaction.
Use Case: When a React application suffers from slow initial load times or stuttering interactions, this skill guides the developer through bundle analysis, component memoization, and virtualization to identify and resolve the bottleneck.

Quick Start

Use the frontend-performance skill to audit the current page for performance bottlenecks and suggest optimizations based on the network and render layers.

Frequently Asked Questions about frontend-performance

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

FAQPage Schema

How do I fix slow load times and large bundle sizes in a React application?▼

To fix slow load times and large bundle sizes in a React application, establish baselines for Core Web Vitals like LCP and TTFB, then use a hypothesis-driven workflow with profiling tools like Lighthouse to diagnose network and parse layer bottlenecks.

What is the best way to audit Core Web Vitals for a TypeScript app?▼

The best way to audit Core Web Vitals for a TypeScript app is through measurement-driven auditing that establishes baselines for LCP, INP, CLS, and TTFB before applying optimizations across network, parse, render, and interaction layers.

How does component memoization improve React rendering performance?▼

Component memoization improves React rendering performance by targeting the render and interaction layers. It prevents unnecessary re-renders during stuttering interactions or janky animations, guided by systematic profiling using React DevTools.

Why does my React app have poor INP and layout shifts?▼

Poor INP and layout shifts in a React app stem from unoptimized interaction and render layers. Diagnose these Core Web Vitals issues by profiling component rendering and virtualization workflows to identify and resolve the bottleneck.

Do I need React DevTools to perform frontend performance optimization?▼

Yes, React DevTools is required for frontend performance optimization. It enables systematic profiling and measurement of the render and interaction layers, supporting a hypothesis-driven workflow to resolve janky animations and slow interactions.