perf-optimization

Optimize rendering performance and bundle size in React and Next.js applications.

Updated Aug 19, 2025

Search Tags:#performance #react #optimization #bundle size #rendering #next.js

Ready to run

npx skills add https://github.com/wannysim/mumak-www --skill perf-optimization

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: perf-optimization
Source: https://github.com/wannysim/mumak-www/tree/main/.cursor/skills/perf-optimization
Command: npx skills add https://github.com/wannysim/mumak-www --skill perf-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow rendering and large bundle sizes in React and Next.js applications, ensuring a smoother and faster user experience.

Core Features & Use Cases

Rendering Optimization: Prevents unnecessary re-renders using React.memo, useMemo, and useCallback.
Next.js Specifics: Optimizes images, fonts, and code splitting for faster load times.
RSC Best Practices: Guides on efficient data fetching and minimizing client-side payload.
Use Case: Improve the perceived performance of your e-commerce site by optimizing product image loading and reducing the JavaScript needed for interactive components.

Quick Start

Optimize the rendering performance of the ProductCard component in my Next.js application.

Frequently Asked Questions about perf-optimization

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

FAQPage Schema

How do I optimize React rendering performance and stop unnecessary component re-renders?▼

Fix slow rendering by applying React.memo, useMemo, and useCallback to prevent unnecessary component updates. These techniques ensure components only re-render when dependencies change, improving overall UI responsiveness and user experience.

What's the best way to reduce JavaScript bundle size in Next.js applications?▼

Reduce JavaScript bundle size in Next.js by implementing code splitting, Next.js image and font optimization, and React Server Components. These methods minimize client-side payload and ensure faster load times for your application.

How does React Server Components improve data fetching and client payload?▼

React Server Components improve data fetching by executing on the server, which minimizes client-side JavaScript payload. Following RSC best practices ensures efficient data retrieval and reduces the amount of code shipped to the browser.

Can I use Next.js image and font optimization to speed up e-commerce site loading?▼

Yes, you can use Next.js image and font optimization to speed up e-commerce site loading. This improves perceived performance by optimizing product image loading and reducing the JavaScript needed for interactive components.

When should I use useCallback vs useMemo for React performance optimization?▼

Use useCallback to memoize callback functions and useMemo to memoize computed values during React performance optimization. Both prevent unnecessary re-renders and inefficient component updates by maintaining referential equality across renders.