skills.rest
mohamedgshoaib
mohamedgshoaibCOMMUNITY
Explore all skills by this author →
Website𝕏@mohamedgshoaibGitHub

nextjs-performance

Optimize Next.js performance by addressing Core Web Vitals and bundle size.

5|Updated Jan 20, 2026
Search Tags:#performance#caching#react#web vitals#optimization#nextjs
One-click install
npx skills add https://github.com/mohamedgshoaib/reway --skill nextjs-performance-mohamedgshoaib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/nextjs-performance
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill nextjs-performance-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses performance bottlenecks in Next.js applications, helping developers improve Core Web Vitals, reduce bundle sizes, and implement efficient caching strategies to ensure a fast, production-grade user experience.

Core Features & Use Cases

  • Core Web Vitals Optimization: Expert guidance on fixing LCP, INP, and CLS issues using modern Next.js and React patterns.
  • Resource Optimization: Automated strategies for image and font optimization to eliminate layout shifts and reduce load times.
  • Architecture Refactoring: Techniques for converting Client Components to Server Components and implementing Suspense streaming for progressive loading.

Quick Start

Use the nextjs-performance skill to analyze the current Core Web Vitals of the application and suggest specific optimizations for the hero section images.

Frequently Asked Questions about nextjs-performance

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

FAQPage Schema
How do I optimize Core Web Vitals in a Next.js application?▼

Optimize Core Web Vitals in Next.js by addressing LCP, INP, and CLS issues through modern React patterns like Server Components, image and font optimization, and Suspense streaming. This ensures a fast, production-grade user experience.

How do I reduce bundle size in Next.js using Server Components?▼

Reduce bundle size in Next.js by converting Client Components to Server Components. This architecture refactoring offloads rendering to the server, minimizing the JavaScript sent to the client and improving overall load times.

What is the best way to optimize images and fonts in Next.js for performance?▼

Optimize Next.js images and fonts using automated resource optimization strategies. This eliminates layout shifts to improve CLS scores and significantly reduces load times for a production-grade web experience.

How do I implement efficient caching strategies for Next.js data fetching?▼

Implement efficient caching strategies in Next.js to improve data fetching performance. Proper caching reduces redundant network requests, lowers latency, and ensures fast content delivery for production-grade applications.

Can Next.js streaming patterns help fix slow loading React components?▼

Next.js streaming patterns using Suspense fix slow loading React components by progressively sending HTML chunks to the browser. This architecture refactoring enables progressive loading for a faster perceived user experience.

Related Skills

Explore More Software Engineering Skills→
yocxy2yocxy2

benchmark

Measure page load times, Core Web Vitals, and resource sizes to detect performance regressions.

Community
Advanced
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
RomualdPRomualdP

Suspense & Streaming Generator

Wrap async React/Next.js server components in nested Suspense with skeleton fallbacks.

Community
Intermediate
aegnticaegntic
4

react-expert

Provides expert guidance on React development including hooks, components, and performance optimization.

Community
Advanced