From bopen-tools
Optimizes Next.js frontend performance using Lighthouse audits, bundle analysis, and animation best practices. Diagnoses slow pages, reduces bundle size, and improves Core Web Vitals (LCP, TBT, CLS).
How this skill is triggered — by the user, by Claude, or both
Slash command
/bopen-tools:frontend-performanceThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Diagnose and fix performance issues in Next.js applications.
Diagnose and fix performance issues in Next.js applications.
# Performance audit (headless)
npx lighthouse http://localhost:3000 --output=json --output-path=./lighthouse.json --chrome-flags="--headless" --only-categories=performance
# Parse key metrics
cat lighthouse.json | jq '{
score: .categories.performance.score,
FCP: .audits["first-contentful-paint"].displayValue,
LCP: .audits["largest-contentful-paint"].displayValue,
TBT: .audits["total-blocking-time"].displayValue,
CLS: .audits["cumulative-layout-shift"].displayValue
}'
# Find slow scripts
cat lighthouse.json | jq '.audits["bootup-time"].details.items | .[0:8]'
# Main thread breakdown
cat lighthouse.json | jq '.audits["mainthread-work-breakdown"].details.items'
Important: Always test production builds (next build && next start), not dev mode. Dev mode has 2-10x overhead from HMR, source maps, and no optimizations.
# Install
bun add -d @next/bundle-analyzer
# Run analysis
ANALYZE=true bun run build
Configure in next.config.js:
import bundleAnalyzer from '@next/bundle-analyzer'
const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
})
export default withBundleAnalyzer(nextConfig)
For libraries with many exports (icons, utilities, animation libraries):
// next.config.js
const nextConfig = {
experimental: {
optimizePackageImports: [
'framer-motion',
'lucide-react',
'@phosphor-icons/react',
'lodash',
'date-fns',
'@heroicons/react',
],
},
}
This ensures tree-shaking works correctly - only imports you use get bundled.
WRONG - Creates N animation controllers:
// Each element has its own animation state - expensive!
{items.map((item, i) => (
<motion.div
key={i}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: i * 0.05 }} // Individual delays
>
{item}
</motion.div>
))}
RIGHT - Single controller with staggerChildren:
// Parent controls all children - efficient!
const containerVariants = {
hidden: {},
visible: {
transition: {
staggerChildren: 0.05,
},
},
}
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: { type: 'spring' as const, damping: 15 }
},
}
<motion.div
variants={containerVariants}
initial="hidden"
animate="visible"
>
{items.map((item, i) => (
<motion.div key={i} variants={itemVariants}>
{item}
</motion.div>
))}
</motion.div>
Also avoid:
filter: blur() in animations - very expensivetransition props on children when using variantsKeep these out of client bundles:
shiki server-side, not prism-react-rendererIntl.DateTimeFormat// Always use next/image
import Image from 'next/image'
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority // For LCP images
placeholder="blur" // Reduces CLS
/>
// app/layout.tsx
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap', // Prevents FOIT
preload: true,
})
Prevent server-only packages from being bundled:
// next.config.js
const nextConfig = {
serverExternalPackages: ['sharp', 'canvas'],
}
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤2.5s | 2.5-4s | >4s |
| FCP | ≤1.8s | 1.8-3s | >3s |
| TBT | ≤200ms | 200-600ms | >600ms |
| CLS | ≤0.1 | 0.1-0.25 | >0.25 |
optimizePackageImports for icon/utility librariesfilter: blur() from animationspriority to LCP imagesnext/font with display: swapnpx claudepluginhub b-open-io/claude-plugins --plugin bopen-toolsOptimizes frontend performance via Core Web Vitals (LCP, INP, CLS), code splitting, tree shaking, image/font optimization (WebP, AVIF, lazy loading), service workers, and webpack-bundle-analyzer. Use for diagnosing slow loads, bundle size reduction, and CI budgets.
Diagnoses web performance issues, fixes Core Web Vitals (LCP, INP, CLS), optimizes bundles, assets, and render performance. Use for slow pages or dropping traffic due to speed.
Systematically measures, analyzes, and improves page loading speed, Core Web Vitals, bundle size, and runtime performance using Lighthouse audits and web performance best practices.