# 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.

- Skill: `desenvolvweb/react-web-perf` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add desenvolvweb/react-web-perf`
- Raw SKILL.md: https://api.skillmd.com/api/skills/desenvolvweb/react-web-perf/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: desenvolvweb (https://skillmd.com/u/desenvolvweb)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/desenvolvweb/react-web-perf

---


# Web Performance Fundamentals

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

## Investigation Workflow

When 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 Guides

Read 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.