How do I install the React Web Perf skill?

Run npx skillmds@latest add desenvolvweb/react-web-perf in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Web Perf safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Web Perf?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Web Perf free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Web Perf?

desenvolvweb (@desenvolvweb) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Web Perf by desenvolvweb — Agent Skill

Name: React Web Perf
Author: desenvolvweb

React Web Perf

React web performance optimization guidance. Use when reviewing or writing code for performance, optimizing bundle size, implementing lazy loading or code splitting, configuring SSR/RSC/SSG, improving Core Web Vitals (FCP, LCP, INP, TTFB), reducing re-renders, setting up caching strategies or evaluating React Compiler adoption.

desenvolvweb 80c91df 7 files · 38.2 KB Updated Sep 17, 2026

File contents

Web Performance Fundamentals

React web performance best practices based on "Web Performance Fundamentals" by Nadia Makarevich.

Investigation Workflow

When addressing a performance issue:

Identify the affected metric (FCP, LCP, INP, TTFB) -- see thresholds in references/initial-load.md.
Read the relevant reference file below based on the problem area.
Apply the recommended technique.
Measure again on a production build in Guest/Incognito mode to confirm improvement.

Reference Guides

Read the relevant reference file based on the performance area being addressed:

Initial Load: Core Web Vitals, render-blocking resources, CDN, caching, CSR vs SSR tradeoffs, flame graph analysis. Read when investigating FCP/LCP/TTFB issues or configuring cache headers.
Bundle Size: Compression, chunk splitting, tree shaking, bundle analysis, dependency auditing. Read when bundle is too large, adding new dependencies, or configuring build output.
Lazy Loading: React.lazy, Suspense, route-based splitting, preloading strategies, SSR considerations. Read when implementing code splitting or lazy-loaded components.
SSR: Server-side rendering, hydration, SSG, React Server Components, streaming, data fetching patterns. Read when configuring SSR behavior, fixing hydration issues, or working with RSC.
Interactions: INP optimization, long tasks, re-render elimination, state management patterns, memoization. Read when fixing slow interactions or unnecessary re-renders.
React Compiler: Automatic memoization, limitations, adoption guidance. Read only when the project already uses React Compiler or the user is explicitly evaluating its adoption.

---name: react-web-perfdescription: React web performance optimization guidance. Use when reviewing or writing code for performance, optimizing bundle size, implementing lazy loading or code splitting, configuring SSR/RSC/SSG, improving Core Web Vitals (FCP, LCP, INP, TTFB), reducing re-renders, setting up caching strategies or evaluating React Compiler adoption.---# Web Performance FundamentalsReact web performance best practices based on "Web Performance Fundamentals" by Nadia Makarevich.## Investigation WorkflowWhen addressing a performance issue:1. Identify the affected metric (FCP, LCP, INP, TTFB) -- see thresholds in `references/initial-load.md`.2. Read the relevant reference file below based on the problem area.3. Apply the recommended technique.4. Measure again on a production build in Guest/Incognito mode to confirm improvement.## Reference GuidesRead the relevant reference file based on the performance area being addressed:- **[Initial Load](references/initial-load.md)**: Core Web Vitals, render-blocking resources, CDN, caching, CSR vs SSR tradeoffs, flame graph analysis. Read when investigating FCP/LCP/TTFB issues or configuring cache headers.- **[Bundle Size](references/bundle-size.md)**: Compression, chunk splitting, tree shaking, bundle analysis, dependency auditing. Read when bundle is too large, adding new dependencies, or configuring build output.- **[Lazy Loading](references/lazy-loading.md)**: React.lazy, Suspense, route-based splitting, preloading strategies, SSR considerations. Read when implementing code splitting or lazy-loaded components.- **[SSR](references/ssr.md)**: Server-side rendering, hydration, SSG, React Server Components, streaming, data fetching patterns. Read when configuring SSR behavior, fixing hydration issues, or working with RSC.- **[Interactions](references/interactions.md)**: INP optimization, long tasks, re-render elimination, state management patterns, memoization. Read when fixing slow interactions or unnecessary re-renders.- **[React Compiler](references/react-compiler.md)**: Automatic memoization, limitations, adoption guidance. Read only when the project already uses React Compiler or the user is explicitly evaluating its adoption.

Frequently asked questions