Performance

ScaleRocket is optimized for speed out of the box. Every page loads fast, every interaction is snappy, and your Lighthouse scores start high.

Built-in Optimizations

Next.js 16 + Turbopack

• Server-side rendering for marketing pages (instant first paint)
• Turbopack as default bundler (faster builds, optimized output)
• Automatic code splitting per route
• Static generation for pages that don't change

Font Loading

Fonts are loaded via next/font/google which:

• Self-hosts the font (zero external requests)
• Prevents layout shift with font-display: swap
• Preloads critical font files

Security Headers

CSP, HSTS, and other security headers are pre-configured in next.config.ts. Google favors secure sites in rankings.

Tailwind CSS v4

• Automatic purging of unused styles
• Minimal CSS output in production
• No runtime CSS-in-JS overhead

Core Web Vitals

Google uses three metrics to measure user experience:

How ScaleRocket helps

• LCP: Server-rendered pages, optimized fonts, no render-blocking resources
• INP: Minimal JavaScript, efficient React 19 with automatic batching
• CLS: Explicit image dimensions, font-display: swap, skeleton loading states

Performance Testing with Chrome MCP

ScaleRocket includes a built-in performance testing skill powered by Chrome DevTools MCP.

claude
> /scalerocket-perf http://localhost:3000

This runs automatically:

1. Lighthouse audit — Performance, Accessibility, SEO, Best Practices scores
2. Core Web Vitals — LCP, INP, CLS with pass/fail
3. Performance trace — Page load timeline, JavaScript execution time
4. Network analysis — Largest resources, render-blocking assets
5. Console errors — JavaScript errors, React warnings
6. Optimization suggestions — Prioritized list of fixes

Requires Chrome DevTools MCP configured in .mcp.json (pre-configured in the boilerplate).

Bundle Optimization

Analyze your bundle

npx next build

The build output shows the size of every page. Aim for:

• First Load JS < 100KB per page
• Total shared JS < 200KB

Dynamic imports

Lazy load heavy components that aren't needed on initial render:

import dynamic from "next/dynamic";

const HeavyChart = dynamic(() => import("./Chart"), {
  ssr: false,
  loading: () => <div className="h-64 animate-pulse bg-gray-100 rounded-xl" />,
});

Tree shaking

Import only what you need:

// Bad — imports entire library
import _ from "lodash";

// Good — imports only the function
import debounce from "lodash/debounce";

Image Optimization

Use the Next.js Image component for automatic optimization:

import Image from "next/image";

<Image
  src="/hero.jpg"
  alt="Hero section"
  width={1200}
  height={630}
  priority        // For above-the-fold images only
  placeholder="blur"
/>

Benefits:

• Automatic WebP/AVIF conversion
• Responsive srcSet generation
• Lazy loading by default
• Prevents layout shift (explicit dimensions)

Caching Strategies

// ISR: regenerate page every hour
export const revalidate = 3600;

export default async function BlogPage() {
  const posts = await fetchPosts();
  return <BlogList posts={posts} />;
}

const { data } = useQuery({
  queryKey: ["dashboard-stats"],
  queryFn: fetchStats,
  staleTime: 5 * 60 * 1000, // Cache 5 minutes
});

// This query is cached and updates automatically when data changes
const stats = useQuery(api.dashboard.getStats);

Performance Checklist

• All images use next/image or have explicit dimensions
• Fonts loaded with next/font (no external font requests)
• Heavy components lazy loaded with next/dynamic
• No unused dependencies in package.json
• LCP < 2.5s on all pages
• INP < 200ms on interactive pages
• CLS < 0.1 on all pages
• Lighthouse Performance > 90
• Lighthouse Accessibility > 90
• Lighthouse SEO > 90
• Run /scalerocket-perf before every deployment