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 9/6/2026
Install to Claude Code
Skills Directorynpx -y skills add FilippoDeSilva/skills --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/filippodesilva-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.
license: MIT
version: 1.0.0
author: "[Filippo De Silva](https://github.com/FilippoDeSilva)"
tags:
- nextjs
- optimization
- performance
- core-web-vitals
- lcp
- cls
- inp
- metadata
- generate-metadata
- next-image
- next-font
- next-script
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`.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
