home / skills / hoangnguyen0403 / agent-skills-standard / optimization
This skill helps you optimize Next.js performance by applying image, font, script, and metadata best practices across projects.
npx playbooks add skill hoangnguyen0403/agent-skills-standard --skill optimizationReview the files below or copy the command above to add this skill to your agents.
---
name: Next.js Optimization
description: Image, Font, Script, and Metadata optimization strategies.
metadata:
labels: [nextjs, optimization, seo, performance]
triggers:
files: ['**/layout.tsx', '**/page.tsx']
keywords: [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)
Before applying optimizations, identify bottlenecks using:
- **LCP (Largest Contentful Paint)**: Initial load speed. Target < 2.5s.
- **CLS (Cumulative Layout Shift)**: Visual stability. Target < 0.1.
- **INP (Interaction to Next Paint)**: Responsiveness. Target < 200ms.
- **Tools**: Chrome DevTools "Performance" tab, `next/speed-insights`, or `React Profiler`.
## Images (`next/image`)
- **Pattern**: Always use `next/image` to prevent CLS. Use `priority` for LCP images.
- **Responsive**: Use `sizes` (e.g., `(max-width: 768px) 100vw, 33vw`) to avoid downloading oversized images.
- **Constraints**:
- Remote domains **must** be in `next.config.js` `remotePatterns`.
- Use `placeholder="blur"` for local images (automatic) or remote (manual `blurDataURL`).
- Use `fill` with `object-fit` for parent-relative sizing.
## Fonts (`next/font`)
- **Strategy**: Self-host Google Fonts or local files via `next/font`.
- **Optimization**: Zero layout shift, no network requests for font files at runtime. Apply classes to `<body>` or specific elements.
## Metadata (SEO)
- **Static**: Export `metadata` object from `layout.tsx` or `page.tsx`.
```tsx
export const metadata: Metadata = {
title: 'Dashboard',
description: '...',
};
```
- **Dynamic**: Export `generateMetadata({ params })` function.
```tsx
export async function generateMetadata({ params }) {
const product = await getProduct(params.id);
return { title: product.name };
}
```
- **Open Graph**: Use `openGraph` key for social cards.
## Scripts (`next/script`)
- **Loading Strategy**: Control when 3rd party scripts load.
- `strategy="afterInteractive"` (Default): Google Analytics.
- `strategy="lazyOnload"`: Chat widgets, low priority.
This skill codifies Next.js optimization patterns for images, fonts, scripts, and metadata to improve Core Web Vitals and SEO. It prioritizes monitoring first, then applying targeted optimizations that reduce load time, eliminate layout shifts, and improve responsiveness. The guidance is framework-specific and practical for TypeScript-based Next.js apps.
The skill inspects and recommends usage of Next.js primitives: next/image for responsive images and CLS prevention, next/font for self-hosted fonts and zero layout shift, next/script strategies for controlled third‑party loading, and the metadata API for static and dynamic SEO. It emphasizes measuring Core Web Vitals (LCP, CLS, INP) before changing production code and prescribes concrete configuration and attributes to apply once bottlenecks are identified.
Should I optimize before measuring?
No. Always measure to find the true bottleneck. Apply targeted optimizations based on Core Web Vitals data.
When should I use placeholder='blur'?
Use blur placeholders for key images to improve perceived loading and avoid sudden layout shifts; for remote images provide a blurDataURL.