skills.rest
daniel-dihardja
daniel-dihardjaCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-performance

Optimize Next.js 16+ applications for Core Web Vitals performance.

Updated Nov 16, 2025
Search Tags:#performance#nextjs#isr#server-components#code-splitting#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/daniel-dihardja/menuyukti --skill nextjs-performance-daniel-dihardja
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-performance
Source: https://github.com/daniel-dihardja/menuyukti/tree/main/.agents/skills/nextjs-performance
Command: npx skills add https://github.com/daniel-dihardja/menuyukti --skill nextjs-performance-daniel-dihardja

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js applications often struggle with slow First Contentful Paint and interactivity due to large bundles, suboptimal image/font loading, and insufficient caching. This skill provides a structured approach to identify bottlenecks and apply proven techniques to deliver faster, more reliable performance.

Core Features & Use Cases

  • CWV optimization for LCP, INP, and CLS across pages and routes.
  • Image and font optimization using next/image and next/font to reduce layout shifts.
  • Caching and ISR patterns including unstable_cache and revalidateTag for data-heavy pages.
  • Server Components adoption and Client-to-Server conversion to minimize client JS.
  • Streaming with Suspense for progressive loading and better TTFB.
  • Bundle size reduction through code-splitting, dynamic imports, and optimized dependencies.
  • Use cases include tuning existing Next.js apps, migrating to Server Components, and implementing robust performance budgets.

Quick Start

Identify current CWV bottlenecks and apply server components, image/font optimization, caching, and streaming patterns to improve LCP, CLS, and INP.

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 Next.js?▼

Improve Next.js Core Web Vitals like LCP, INP, and CLS by adopting server components, optimizing images and fonts, implementing caching, and using streaming patterns to reduce client-side bottlenecks.

What is the best way to reduce bundle size in Next.js?▼

Reduce Next.js bundle size by converting client components to server components, applying code-splitting, using dynamic imports, and optimizing dependencies to minimize client-side JavaScript payload.

How do I use ISR and caching to speed up data-heavy Next.js pages?▼

Speed up data-heavy Next.js pages by leveraging Incremental Static Regeneration and caching patterns like unstable_cache and revalidateTag to serve content instantly while revalidating in the background.

Does this Next.js performance optimization approach work with Server Components?▼

Yes, this Next.js optimization approach targets Server Components by adopting client-to-server conversion to minimize client JS, and using Suspense for streaming to achieve progressive loading and better TTFB.

How does streaming with Suspense improve Next.js performance?▼

Streaming with Suspense improves Next.js performance by enabling progressive loading of UI sections, which enhances Time to First Byte and prevents blocking the entire page render for faster interactivity.

Related Skills

Explore More Software Engineering Skills→
JordiNodeJSJordiNodeJS

performance-optimization

Optimize Next.js 16 performance by targeting Core Web Vitals and caching.

Community
Advanced
Gekkos-techGekkos-tech
4

core-web-vitals

Optimize LCP, INP, and CLS metrics for web pages.

Official
Intermediate
sustinbebustinsustinbebustin

react-best-practices

Optimize React and Next.js application performance with data fetching and bundle size strategies.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate