Performance Optimization

Optimizes React and Next.js apps with code-splitting, caching strategies, and SSR improvements.

Updated Feb 8, 2026

Search Tags:#performance #react #nextjs #bundling #server-components #code-splitting

Ready to run

npx skills add https://github.com/joabeoliveira/kit-skills --skill performance-optimization-joabeoliveira

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Performance Optimization
Source: https://github.com/joabeoliveira/kit-skills/tree/main/.skills/performance-optimization
Command: npx skills add https://github.com/joabeoliveira/kit-skills --skill performance-optimization-joabeoliveira

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many React/Next.js apps suffer from slow page loads due to suboptimal data fetching, large bundles, and inefficient SSR patterns.

Core Features & Use Cases

Code-splitting and dynamic imports to reduce initial payloads
Image optimization and caching strategies to improve LCP and TBT
Use case: A mid-sized site reduces Time to Interactive from 6s to 1.8s by applying these techniques.

Quick Start

Run the recommended performance checks and optimizations on your Next.js project to achieve faster page loads.

Frequently Asked Questions about Performance Optimization

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

FAQPage Schema

How do I improve Next.js performance and reduce slow page loads?▼

Improve Next.js performance by applying code-splitting, dynamic imports, and efficient data fetching to reduce large bundles and suboptimal SSR patterns. These techniques lower initial payloads and accelerate page load times for modern web stacks.

How do I optimize React Server Components for faster Time to Interactive?▼

Optimize React Server Components by implementing efficient data fetching and caching strategies across server and client boundaries. This ensures reliable, fast user experiences by minimizing unnecessary client-side rendering and reducing Time to Interactive.

What's the best way to reduce initial bundle size in a Next.js app?▼

Reduce initial bundle size by applying code-splitting and dynamic imports to your Next.js app. This performance optimization technique ensures users only download the JavaScript required for the current view, drastically improving initial load times.

Does this performance optimization approach work with strict type checking?▼

Yes, this performance optimization approach requires setting up strict type checking and performance profiling. These guardrails ensure reliable and fast user experiences when applying code-splitting, dynamic imports, and caching strategies.

How does image optimization improve LCP and TBT in Next.js?▼

Image optimization improves LCP and TBT by implementing efficient caching strategies and serving properly sized assets. This reduces the Largest Contentful Paint and Total Blocking Time metrics, delivering blazing-fast Next.js apps.

Why does my Next.js app have a slow Time to Interactive despite using SSR?▼

Your Next.js app may have a slow Time to Interactive due to suboptimal data fetching, large bundles, and inefficient SSR patterns. Applying code-splitting, dynamic imports, and caching strategies across server and client boundaries resolves these bottlenecks.