react-performance: Speeding Up React & Next.js
機械翻訳 / Machine-translated
cccskills
21時間前・17分で読める
機械翻訳 / Machine-translated
Original article: React・Next.jsの高速化を進めるreact-performance (cccskills)
Skill page: react-performance
Key takeaways
If you're developing with React/Next.js, adding react-performance lets you investigate the causes of slow pages together with an AI agent.
The inspection order is: data-fetching wait times, bundle size, then re-renders.
This article walks through the eight areas the skill covers, how to install it, example prompts, and things to keep in mind.
You can have the agent investigate the causes of slowness in order, starting with the highest-impact areas.
For example, you might ask:
The initial display of this page is slow.
Investigate the causes in order of priority and suggest fixes.
The first thing the agent checks is data-fetching wait times.
If independent awaits are lined up sequentially, it rewrites them to run in parallel using Promise.all.
For sequential awaits inside a Server Component, it proposes splitting them into child components that run concurrently.
Next, it looks at the amount of JavaScript shipped on the initial load.
Candidate fixes include replacing barrel-file imports (the pattern of re-exporting everything from index.ts) with individual imports, and lazy-loading heavy components using next/dynamic.
External scripts like analytics tools are deferred with next/script so they load after the page is visible.
Re-renders and fine-grained processing speed are checked after that.
react-performance is a skill that gives the agent a reference table of 70+ improvement rules, organized into eight areas and sorted by priority.
It is based on react-best-practices published by Vercel Labs.
| Priority | Area | Main targets |
|---|---|---|
| 1 (Critical) | Eliminating data-fetching wait times | Places where independent awaits run sequentially |
| 2 (Critical) | Reducing bundle size | Initial-load JavaScript, external libraries |
| 3 (High) | Server-side processing | Server Components, Server Actions, API routes |
| 4 (Medium–High) | Client-side data fetching | SWR, TanStack Query, fetch inside hooks |
| 5 (Medium) | Reducing re-renders | Frequent state updates, parent-to-child cascades |
| 6 (Medium) | Rendering speed | Long lists, animations, hydration |
| 7 (Low–Medium) | JavaScript processing | Heavy loops, frequent memory allocation |
| 8 (Low) | Advanced patterns | Stable references, effect and event coordination |
Data-fetching wait times are the top priority because each sequential await adds an entire round-trip latency on top of the previous one.
The skill's approach is to resolve wait times and bundle size before worrying about fine-grained coding style.
The skill also includes a mapping table that shows which areas to check for each Lighthouse and Web Vitals metric.
This table helps the agent decide which area to look at first when a metric's score is poor.
| Metric | Primary areas to check |
|---|---|
| LCP (time until the largest element is displayed) | Data-fetching wait times, bundle size, resource preloading |
| INP (time from interaction to next paint) | Re-renders, rendering speed, JavaScript processing |
| CLS (layout shift) | Rendering speed (Suspense placement, image dimensions) |
| TBT (total time the main thread is blocked) | Bundle size, JavaScript processing, deferring external scripts |
Review criteria are also included.
Because functions marked "use server" become externally callable entry points, the agent flags any that lack authentication and authorization checks inside the function body.
Storing state in server-module-level variables—which would cause it to be shared across users—is also checked.
You can install the skill either by running a command or by asking the agent directly.
The command below lets you choose which agent to install it into—Claude Code, Codex, and others are supported.
npx skills add https://github.com/affaan-m/ECC --skill react-performance
To have the agent install it, send exactly the following message:
次の Agent Skill をインストールしてください。
https://github.com/affaan-m/ECC/tree/main/skills/react-performance
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/react-performance/、Codex なら ~/.agents/skills/react-performance/ に配置してください。
The installation location depends on whether you want to use it across all projects or only in a specific project.
| Agent | Use across all projects | Use in a specific project only |
|---|---|---|
| Claude Code | ~/.claude/skills/ | .claude/skills/ inside the project |
| Codex | ~/.agents/skills/ | .agents/skills/ inside the project |
Writing a specific area to investigate in your prompt helps narrow the scope.
Here are three representative examples.
Find places in this page where data fetching is happening sequentially and fix them to run in parallel.
Independent fetch operations are consolidated into Promise.all.
This also includes deferring await until inside the branch where the data is actually used.
Conditions that can be evaluated locally—like whether a prop is present—are reordered to be checked before making a network request.
Identify places where the initial JavaScript bundle size can be reduced.
Candidates include barrel-file imports and components like heavy chart widgets that can be loaded lazily.
Modules that are only needed conditionally—such as admin-only screens—are also candidates.
@next/bundle-analyzer is recommended as a way to visually inspect bundle size.
Review this PR from a performance perspective. Also check for unnecessary re-renders.
The first thing flagged is any subscription to a value that's only used inside a callback.
Values that can be computed during rendering but are being created inside useEffect, and component definitions nested inside other components, are also flagged.
Whether Server Actions include authentication is checked at the same time.
This skill provides improvement guidance—it is not a measurement tool.
Measure actual numbers with Lighthouse or similar tools before and after making changes to verify the effect.
Whether to apply a suggested rewrite should be decided by looking at the actual code and measurement results.
The targets are React 18/19 and Next.js, and required versions vary by feature.
after(), which runs processing after a response has been sent, requires Next.js 15. <Activity>, which toggles content visibility, requires React 19.
The setting that automatically optimizes barrel files is available from Next.js 13.5 onward.
For projects that have adopted React Compiler, rules for manually suppressing re-renders are used only as review checks.
Adding useMemo or useCallback by hand is left to the compiler.
The skill contains only SKILL.md—no scripts are included.
Related entries in SKILL.md mention agents and commands such as react-reviewer, but these are not included in this skill.
The license is MIT, and so is the source material's license.
It's a good idea to read through the contents once before installing.
The accessibility skill in the same repository helps make web interfaces compatible with screen readers and keyboard navigation, and audits them against WCAG 2.2.
It pairs well with this skill when you want to review usability at the same time you're revisiting page performance.
Yes.
Rules for manually suppressing re-renders will be limited to use as review checks, but the data-fetching wait times and bundle size areas are outside the scope of the compiler.
The highest-priority areas work just as they are.
The targets are React 18/19 and Next.js.
Many rules covering the React side—such as reducing re-renders and rendering long lists—are included.
Next.js-specific items like next/dynamic and after() apply only when you're using Next.js.
No.
Only SKILL.md is included.
There is a mapping table between Web Vitals metrics and the areas to check, so a good way to use it is to share your Lighthouse results with the agent and have it investigate from there.
react-performance is a skill that equips an agent with guidance for investigating React/Next.js slowness in order: data-fetching wait times, bundle size, then re-renders.
With 70+ rules across eight areas sorted by priority, you'll never be at a loss for where to start.
It can also be used to check performance and Server Actions authentication during PR reviews.
You can get started from the cccskills page.
This article is a repost of "React・Next.jsの高速化を進めるreact-performance" from cccskills.
Full skill details and installation instructions are on the react-performance page at cccskills.