Next.js Performance Tips for SaaS Landing Pages
App Router patterns that keep LCP tight, bundles small, and Core Web Vitals green on marketing sites.
Modern Next.js (App Router) makes it easy to accidentally ship heavy client islands. Here is how we keep Lumen fast.
Prefer Server Components
Marketing sections—hero, features, blog listing—should stay on the server. Reserve "use client" for interactivity only.
Split interactive widgets
Drop-in components (ROI calculator, pricing matrix) belong in isolated client bundles. Do not mark the entire page as client.
Optimize fonts and images
Use next/font with display: swap. When you add imagery, always set width/height or use next/image.
Cache static content
Blog posts and legal pages are ideal static routes. Generate them at build time with generateStaticParams.
Measure, do not guess
Run Lighthouse on / and /blog before launch. Watch LCP on mobile throttling.
Quick wins checklist
- Audit client boundaries
- Lazy-load below-the-fold widgets
- Preconnect Stripe only on checkout pages
- Keep third-party scripts off the landing page
Performance is a feature your buyers feel in the first second.