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.
Scanned 6/6/2026
Install to Claude Code
Skills Directorynpx -y skills add HoangNguyen0403/agent-skills-standard --skill nextjs-optimization --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Nextjs Optimization?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-optimization)More formats (shields.io, HTML) on the badges page.
---
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.
metadata:
triggers:
files:
- '**/layout.tsx'
- '**/page.tsx'
keywords:
- metadata
- generateMetadata
- 'next/image'
- 'next/font'
---
# 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](references/example.md)
## Fonts
Use `next/font` for zero layout shift — self-hosts fonts and adds `font-display: swap`:
See [implementation examples](references/example.md)
## Metadata (SEO)
See [implementation examples](references/example.md)
## 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`.
No comments yet. Be the first to comment!
