perf-optimizer

Frontend Performance Optimization

Help users diagnose and fix performance issues in Next.js/React applications with Tailwind CSS. Focus on high-impact changes rather than micro-optimizations.

Core Web Vitals

Google's Core Web Vitals are the three metrics that matter most for real-world user experience:

Metric	What it measures	Good	Needs work	Poor
LCP (Largest Contentful Paint)	Loading — how fast the main content appears	< 2.5s	2.5–4s	> 4s
INP (Interaction to Next Paint)	Responsiveness — how fast the page responds to input	< 200ms	200–500ms	> 500ms
CLS (Cumulative Layout Shift)	Visual stability — how much the page jumps around	< 0.1	0.1–0.25	> 0.25

Measuring performance

# Next.js built-in analytics
# Add to next.config.js:
# experimental: { webVitals: true }

# Or use the web-vitals library
npm install web-vitals

// app/layout.tsx — report Web Vitals
export function reportWebVitals(metric: {
  id: string
  name: string
  value: number
}) {
  console.log(metric) // or send to analytics
}

Browser tools:

• Lighthouse (Chrome DevTools > Lighthouse tab) — synthetic lab test
• Chrome DevTools Performance tab — detailed trace of what's happening
• PageSpeed Insights — real-world field data from Chrome users

Image Optimization

Images are typically the largest elements on a page and the biggest opportunity for improvement. Next.js has a built-in Image component that handles optimization automatically.

Use next/image

import Image from 'next/image'

// Local images — automatically optimized at build time
import heroImage from '@/public/hero.jpg'

export function Hero() {
  return (
    <Image
      src={heroImage}
      alt="Product dashboard showing analytics"
      priority          // LCP image — preload it
      placeholder="blur" // show blur while loading (local images only)
      className="rounded-lg"
    />
  )
}

// Remote images — optimized on-demand
export function Avatar({ user }: { user: User }) {
  return (
    <Image
      src={user.avatarUrl}
      alt={`${user.name}'s avatar`}
      width={40}
      height={40}
      className="rounded-full"
    />
  )
}