Optimize Next.js and React performance with async, bundle, and SSR best practices.
npx skills add https://github.com/cinjoff/fhhs-skills --skill nextjs-perf
Please help me install this Agent Skill. Skill: nextjs-perf Source: https://github.com/cinjoff/fhhs-skills/tree/main/.claude/skills/nextjs-perf Command: npx skills add https://github.com/cinjoff/fhhs-skills --skill nextjs-perf
This Skill addresses common performance bottlenecks in Next.js and React applications, ensuring faster load times and a smoother user experience.
Apply the Next.js performance rules to optimize the data fetching strategy for the main page component.
High-intent search queries and answers about installing and using this skill.
Fixing React and Next.js waterfalls requires parallelizing asynchronous operations rather than running them sequentially. This Skill enforces rules for deferring awaits to prevent data fetching delays and ensure faster component rendering.
Reducing JavaScript bundle size in React applications involves implementing dynamic imports and efficient module loading. This optimization decreases large JavaScript payloads, ensuring faster initial load times and improved web performance.
Optimizing Next.js server-side rendering performance requires addressing inefficient data fetching patterns and implementing strategic suspense boundaries. This ensures data loads quickly on the server, improving the perceived performance of complex pages.
Yes, you can use suspense boundaries strategically to improve Next.js performance. Implementing strategic suspense boundaries helps manage asynchronous operations and data fetching, preventing waterfalls and ensuring smoother user experiences.
Next.js e-commerce pages load slowly due to large JavaScript payloads, waterfalls, and inefficient data fetching. Optimizing these elements through dynamic imports and parallelized operations ensures images and critical data load quickly.
Dynamic imports for bundle size optimization should be avoided when critical data must load immediately. If deferring awaits or splitting modules delays essential rendering, maintaining standard loading patterns ensures better perceived performance.
jota-batutaEstablish performance baselines and budgets for APIs and web applications.
ckyeonOptimize React and Next.js application performance with rendering and data fetching guidelines.
botPhUProfile React applications with DevTools Profiler and apply memoization, code-splitting, and virtualization.
involvexCoordinate specialized agents to profile, tune, and load test application performance.
