gitwalter Frontend Performance
Core Web Vitals optimization, code splitting, and React performance patterns
Frontend Performance Optimization
Process
- Review the task requirements.
- Apply the skill's methodology.
- Validate the output against the defined criteria.
1. Core Web Vitals Optimization
Largest Contentful Paint (LCP) - Optimize the largest element load time:
// Optimize images with next/image
import Image from 'next/image';
export function HeroSection() {
return (
<Image
src="/hero-image.jpg"
alt="Hero"
width={1200}
height={600}
priority // Preload above-the-fold images
placeholder="blur" // Show blur placeholder while loading
quality={85} // Optimize quality vs size
/>
);
}
First Input Delay (FID) - Reduce JavaScript execution time:
// Use React.memo for expensive components
import { memo } from 'react';
export const ExpensiveList = memo(({ items }: { items: Item[] }) => {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}, (prevProps, nextProps) => {
// Custom comparison function
return prevProps.items.length === nextProps.items.length;
});
Cumulative Layout Shift (CLS) - Prevent layout shifts:
// Reserve space for dynamic content
export function ProductCard({ product }: { product: Product }) {
return (
<div className="card" style={{ minHeight: '400px' }}>
{product.image && (
<img
src={product.image}
alt={product.name}
width={300}
height={300}
style={{ display: 'block' }} // Prevent inline spacing
/>
)}
</div>
);
}
2. React Performance Patterns
useMemo and useCallback Strategy:
import { useMemo, useCallback, useState } from 'react';
export function ProductList({ products }: { products: Product[] }) {
const [filter, setFilter] = useState('');
// Memoize expensive computations
const filteredProducts = useMemo(() => {
return products.filter(p =>
p.name.toLowerCase().includes(filter.toLowerCase())
);
}, [products, filter]);
// Memoize callbacks to prevent child re-renders
const handleClick = useCallback((id: string) => {
console.log('Clicked:', id);
}, []);
return (
<div>
<input
value={filter}
=> setFilter(e.target.value)}
/>
{filteredProducts.map(product => (
<ProductItem
key={product.id}
product={product}
/>
))}
</div>
);
}
3. Code Splitting with Dynamic Imports
// Lazy load heavy components
import { lazy, Suspense } from 'react';
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));
export function Dashboard() {
return (
<div>
<Suspense fallback={<div>Loading chart...</div>}>
<HeavyChart />
</Suspense>
{isAdmin && (
<Suspense fallback={<div>Loading admin...</div>}>
<AdminPanel />
</Suspense>
)}
</div>
);
}
4. Font Optimization
// next/font for automatic font optimization
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap', // Prevent invisible text during font load
preload: true,
});
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html className={inter.className}>
<body>{children}</body>
</html>
);
}
5. Bundle Analysis
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({
// Your Next.js config
experimental: {
optimizePackageImports: ['@mui/material', 'lodash'],
},
});
6. Server Component Streaming
// app/dashboard/page.tsx
import { Suspense } from 'react';
async function SlowData() {
const data = await fetchData(); // Server component
return <div>{data}</div>;
}
export default function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Suspense fallback={<Skeleton />}>
<SlowData />
</Suspense>
</div>
);
}
7. Caching Strategies
// Route segment config for Next.js App Router
export const revalidate = 3600; // ISR: revalidate every hour
// Or per-request caching
async function getData() {
const res = await fetch('https://api.example.com/data', {
next: {
revalidate: 60, // Cache for 60 seconds
tags: ['products'] // Tag-based revalidation
}
});
return res.json();
}
Best Practices
- Code Splitting: Use dynamic imports and React.lazy to split code by route and component, reducing initial bundle size
- Lazy Loading: Lazy load images, components, and routes that aren't immediately visible to improve initial load time
- Image Optimization: Use Next.js Image component or similar with proper sizing, formats (WebP/AVIF), and lazy loading
- Memoization: Use React.memo, useMemo, and useCallback strategically to prevent unnecessary re-renders
- Bundle Analysis: Regularly analyze bundle size with webpack-bundle-analyzer to identify and eliminate large dependencies
- Font Optimization: Use next/font or font-display: swap to prevent invisible text during font load (FOIT)
- Caching Strategies: Implement proper caching (ISR, SSG, SWR) for static and dynamic content to reduce server load
- Performance Monitoring: Set up Core Web Vitals monitoring and performance budgets to track and maintain performance
Output
- Optimized React components with memoization
- Code-split routes and components
- Optimized images and fonts
- Bundle analysis reports
- Core Web Vitals improvements (target: LCP < 2.5s, FID < 100ms, CLS < 0.1)
- Caching configuration for static and dynamic content
- Performance monitoring setup
When to Use
This skill should be used when strict adherence to the defined process is required.
Prerequisites
- Basic understanding of the agent factory context.
- Access to the necessary tools and resources.