Agent-Skills.md

Agent Skills: Optimization

Optimize images, fonts, scripts, and metadata for Next.js performance and Core Web Vitals. Use when configuring next/image for LCP, next/font for zero layout shift, next/script loading strategies, or generateMetadata for SEO. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)

UncategorizedID: hoangnguyen0403/agent-skills-standard/nextjs-optimization

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/nextjs/nextjs-optimization

Skill Files

Browse the full folder contents for nextjs-optimization.

Download Skill

Loading file tree…

skills/nextjs/nextjs-optimization/SKILL.md

Skill Metadata

Name
nextjs-optimization
Description
"Optimize images, fonts, scripts, and metadata for Next.js performance and Core Web Vitals. Use when configuring next/image for LCP, next/font for zero layout shift, next/script loading strategies, or generateMetadata for SEO. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)"

Optimization

Priority: P1 (HIGH)

Core optimization primitives provided by Next.js. Monitor First, Optimize Later.

Monitoring (Core Web Vitals)

  • LCP (Largest Contentful Paint): Target < 2.5s.
  • CLS (Cumulative Layout Shift): Target < 0.1.
  • INP (Interaction to Next Paint): Target < 200ms.
  • Tools: Chrome DevTools "Performance" tab, next/speed-insights, React Profiler.

Images

Always use next/image to prevent CLS and enable automatic optimization:

See implementation examples

Fonts

Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:

See implementation examples

Metadata (SEO)

See implementation examples

Scripts

Use next/script with appropriate loading strategies:

  • beforeInteractive: Critical scripts (polyfills).
  • afterInteractive: Analytics (Google Analytics).
  • lazyOnload: Chat widgets, social embeds.

Bundle & Components

  • Analyze with @next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies.
  • Use dynamic imports with Suspense for large components not needed at initial render.
  • Enable ppr: true (Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.

Anti-Patterns

  • No <img> tag: Use next/image to prevent CLS and enable automatic optimization.
  • No Google Fonts CDN link: Use next/font to self-host and eliminate layout shift.
  • No metadata in _document.tsx: Use export const metadata or generateMetadata().
  • No 3rd-party scripts in <head>: Use next/script with appropriate strategy.