performance-optimization

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

Updated Jan 31, 2026

Search Tags:#performance #caching #Next.js #bundle analysis #Lighthouse #image optimization #Core Web Vitals

Ready to run

npx skills add https://github.com/JordiNodeJS/.github-config --skill performance-optimization-jordinodejs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: performance-optimization
Source: https://github.com/JordiNodeJS/.github-config/tree/main/.github/skills/performance-optimization
Command: npx skills add https://github.com/JordiNodeJS/.github-config --skill performance-optimization-jordinodejs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables developers to systematically optimize Next.js 16 applications to improve performance metrics and user experience.

Core Features & Use Cases

Core Web Vitals optimization: target LCP, CLS, FID/INP, FCP, and TTFB improvements.
Caching and data fetching strategies: smart revalidation, ISR, and edge caching to reduce server load.
Image and bundle optimization: use next/image, code-splitting, dynamic imports, and bundle analysis to reduce payloads.
Use Case: When pages are slow or Lighthouse scores are poor, apply this Skill to implement improvements and measure results.

Quick Start

Run a Lighthouse audit to identify top bottlenecks and baseline scores.
Enable dynamic imports and static optimization where appropriate in your Next.js configuration.
Review bundle analysis and optimize large dependencies to reduce bundle size.
Re-run performance measurements to verify improvements against targets.

Frequently Asked Questions about performance-optimization

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

FAQPage Schema

How do I improve Core Web Vitals like LCP and CLS in Next.js 16?▼

Improve Core Web Vitals by running a Lighthouse audit to identify bottlenecks, then applying dynamic imports, static optimization, and next/image to reduce payload and layout shift. This targets LCP, CLS, FCP, INP, and TTFB improvements.

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

The best way to reduce bundle size is reviewing bundle analysis reports to identify large dependencies, then applying code-splitting and dynamic imports in your Next.js configuration to minimize payloads and improve load times.

How does caching and ISR work to reduce server load in Next.js 16?▼

Caching and ISR reduce server load by implementing smart revalidation and edge caching strategies. This allows data fetching to serve stale content while revalidating in the background, decreasing direct server requests.

Can I use next/image to optimize images and improve Lighthouse scores?▼

Yes, you can use next/image to optimize images by serving appropriately sized formats and lazy loading. This directly reduces Largest Contentful Paint times and improves overall Lighthouse performance scores.

Why does my Next.js page have a slow TTFB and how can I fix it?▼

A slow TTFB often results from inefficient data fetching or server processing. Fix it by implementing edge caching and smart revalidation strategies to serve cached responses closer to the user.

Do I need to run Lighthouse before and after Next.js performance optimization?▼

Yes, you need to run Lighthouse before to establish baseline scores and identify bottlenecks, and after to verify that bundle analysis, dynamic imports, and caching changes produced measurable metric improvements.