Performance Optimization | Bootspring Docs

Patterns for optimizing Next.js application performance.

Overview#

Performance optimization improves user experience and SEO. This pattern covers:

Image optimization
Font optimization
Script optimization
Server component patterns
Database query optimization

Prerequisites#

# Font optimization
npm install @next/font
# Bundle analysis
npm install @next/bundle-analyzer

Code Example#

Image Optimization#

// components/OptimizedImage.tsx
import Image from 'next/image'

// Use Next.js Image for automatic optimization
export function HeroImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Load immediately for above-the-fold
      quality={85}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,/9j..."
    />
  )
}

// Responsive images
export function ResponsiveImage() {
  return (
    <Image
      src="/feature.jpg"
      alt="Feature"
      fill
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      className="object-cover"
    />
  )
}

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30 // 30 days
  }
}

Font Optimization#

// app/layout.tsx
import { Inter, JetBrains_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter'
})

const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono'
})

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`}>
      <body className="font-sans">{children}</body>
    </html>
  )
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
        mono: ['var(--font-mono)', 'monospace']
      }
    }
  }
}

Script Optimization#

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* Load after page is interactive */}
        <Script
          src="https://www.googletagmanager.com/gtag/js?id=G-XXX"
          strategy="afterInteractive"
        />

        {/* Load when browser is idle */}
        <Script
          src="/analytics.js"
          strategy="lazyOnload"
        />

        {/* Inline script with strategy */}
        <Script
          id="show-banner"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              // Analytics initialization
              window.dataLayer = window.dataLayer || [];
            `
          }}
        />
      </body>
    </html>
  )
}

Server Component Optimization#

// Prefer Server Components for data fetching
// app/posts/page.tsx
import { prisma } from '@/lib/db'

// This runs on the server - no client JS shipped
export default async function PostsPage() {
  const posts = await prisma.post.findMany({
    select: {
      id: true,
      title: true,
      excerpt: true,
      createdAt: true
    },
    orderBy: { createdAt: 'desc' },
    take: 20
  })

  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )
}

// Only make interactive parts Client Components
// components/PostCard.tsx
import { LikeButton } from './LikeButton' // 'use client'

export function PostCard({ post }: { post: Post }) {
  return (
    <article>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
      <LikeButton postId={post.id} />
    </article>
  )
}

Database Query Optimization#

// lib/queries.ts
import { prisma } from '@/lib/db'

// Select only needed fields
export async function getPostList() {
  return prisma.post.findMany({
    select: {
      id: true,
      title: true,
      slug: true,
      excerpt: true,
      publishedAt: true,
      author: {
        select: {
          name: true,
          avatar: true
        }
      }
    }
  })
}

// Use include sparingly
export async function getPostWithComments(id: string) {
  return prisma.post.findUnique({
    where: { id },
    include: {
      author: true,
      comments: {
        take: 20, // Limit nested queries
        orderBy: { createdAt: 'desc' }
      }
    }
  })
}

// Batch related queries
export async function getDashboardData(userId: string) {
  const [user, posts, notifications] = await Promise.all([
    prisma.user.findUnique({ where: { id: userId } }),
    prisma.post.findMany({ where: { authorId: userId }, take: 10 }),
    prisma.notification.findMany({ where: { userId }, take: 5 })
  ])

  return { user, posts, notifications }
}

Streaming and Suspense#

// app/dashboard/page.tsx
import { Suspense } from 'react'
import { UserHeader, SlowStats, RecentActivity } from './components'

export default function DashboardPage() {
  return (
    <div>
      {/* Fast data - renders immediately */}
      <UserHeader />

      {/* Slower data - streams in */}
      <Suspense fallback={<StatsSkeleton />}>
        <SlowStats />
      </Suspense>

      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  )
}

// components/SlowStats.tsx
async function SlowStats() {
  // This can take time - page won't block
  const stats = await getComplexStats()
  return <StatsDisplay stats={stats} />
}

Package Import Optimization#

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: [
      'lucide-react',
      '@radix-ui/react-icons',
      'date-fns',
      'lodash'
    ]
  }
}

// Instead of importing the whole library
// import { format, parse, addDays } from 'date-fns'

// Import specific functions
import { format } from 'date-fns/format'
import { parseISO } from 'date-fns/parseISO'

// Lodash - use per-function imports
import debounce from 'lodash/debounce'
// NOT: import { debounce } from 'lodash'

Memoization in React#

// components/ExpensiveList.tsx
'use client'

import { useMemo, useCallback, memo } from 'react'

// Memoize expensive computations
export function ExpensiveList({ items, filter }: Props) {
  const filteredItems = useMemo(
    () => items.filter(item => item.name.includes(filter)),
    [items, filter]
  )

  const handleClick = useCallback((id: string) => {
    // Handle click
  }, [])

  return (
    <ul>
      {filteredItems.map(item => (
        <MemoizedItem
          key={item.id}
          item={item}
          onClick={handleClick}
        />
      ))}
    </ul>
  )
}

// Memoize components that receive stable props
const MemoizedItem = memo(function Item({
  item,
  onClick
}: {
  item: Item
  onClick: (id: string) => void
}) {
  return (
    <li onClick={() => onClick(item.id)}>
      {item.name}
    </li>
  )
})

Usage Instructions#

Use Next.js Image for all images
Self-host fonts with next/font
Load third-party scripts strategically
Keep most components as Server Components
Select only needed database fields

Best Practices#

Measure first - Use Lighthouse and Core Web Vitals
Reduce bundle size - Analyze and optimize imports
Defer non-critical - Use Suspense and lazy loading
Optimize images - Proper sizing, formats, and loading
Minimize client JS - Server Components by default
Cache aggressively - Use appropriate caching strategies
Monitor continuously - Track performance over time

Lazy Loading - Load on demand
Caching - Cache strategies
Bundle Analysis - Analyze bundles
Profiling - Find bottlenecks