パフォーマンス改善
Core Web Vitals、バンドルサイズ、レンダリング最適化など、フロントエンドのパフォーマンスをAIと一緒に改善します。
Core Web Vitals
LCP
Largest Contentful Paint
目標: 2.5秒以内
INP
Interaction to Next Paint
目標: 200ms以内
CLS
Cumulative Layout Shift
目標: 0.1以下
AIに分析を依頼
パフォーマンス診断
このNext.jsコンポーネントのパフォーマンスを分析してください。
```tsx
export default function ProductList() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('/api/products').then(res => res.json())
.then(data => setProducts(data));
}, []);
return (
<div>
{products.map(p => (
<img src={p.image} alt={p.name} />
))}
</div>
);
}
```
改善点を指摘してください。
改善後
import Image from 'next/image';
export default async function ProductList() {
// Server Componentでデータ取得
const products = await fetch('/api/products').then(r => r.json());
return (
<div>
{products.map(p => (
<Image
src={p.image}
alt={p.name}
width={300}
height={200}
loading="lazy" // 遅延読み込み
placeholder="blur"
/>
))}
</div>
);
}
バンドルサイズ削減
AIへの指示
バンドルサイズを削減する方法を教えてください。 現在のサイズ: - First Load JS: 450kB - lodash: 70kB - moment: 65kB - 大きな画像コンポーネント: 120kB
最適化テクニック
- ✓lodash → lodash-es + tree shaking
- ✓moment → date-fns または dayjs
- ✓dynamic import で遅延読み込み
- ✓next/dynamic でコンポーネント分割
まとめ
- ✓Core Web Vitals を意識した改善
- ✓Image最適化 - next/image、lazy loading
- ✓バンドル分割 - dynamic import活用