How I Build SaaS Landing Pages That Score 90+ on Lighthouse

Why Lighthouse Scores Matter for SaaS

If you are a SaaS founder, your landing page is your most important sales asset. It runs 24/7, handles every first impression, and either converts visitors into signups or loses them forever.

Google Lighthouse measures four things that directly affect whether your page converts:

• Performance — How fast does your page load?
• Accessibility — Can everyone use it?
• Best Practices — Is it secure and modern?
• SEO — Can Google find and rank it?

A score below 50 means more than half your mobile visitors leave before seeing your product. That is not a technical problem. That is a revenue problem.

Let me show you exactly how I build SaaS pages that consistently hit 90+ across all four categories.

---

The Foundation: Next.js App Router

Every project I build starts with Next.js 14 and the App Router. Here is why:

Server Components by default. Most of your landing page is static content — headings, feature descriptions, pricing cards. With React Server Components, this content renders on the server and arrives as pure HTML. Zero JavaScript shipped for static sections.

Automatic code splitting. Each route only loads the JavaScript it needs. Your pricing page does not download your blog page's code.

Built-in image optimization. The Next.js Image component automatically serves AVIF/WebP, lazy loads below-fold images, and generates responsive srcsets.

// Server Component — zero client JS
export default function FeaturesSection() {
  return (
    <section>
      <h2>Why Founders Choose Us</h2>
      <FeatureGrid features={features} />
    </section>
  );
}

The key principle: 'use client' only when you need interactivity. A button that opens a modal needs client JavaScript. A heading does not.

---

Technique 1: Defer Everything Below the Fold

The single biggest performance win is not loading content the user cannot see yet.

I use a custom DeferredContent component that wraps everything below the hero section. On initial page load, only the hero renders. The rest loads when the user scrolls:

<Hero />
<DeferredContent>
  <Features />
  <Pricing />
  <Testimonials />
  <FAQ />
  <CTA />
</DeferredContent>

How it works:

• Server HTML includes all content (so crawlers see everything)
• On the client, a CSS rule hides the deferred content: content-visibility: hidden
• When the user scrolls (or after a 3.5s fallback), the content appears

Result: Zero Cumulative Layout Shift (CLS), faster Largest Contentful Paint (LCP), and lower Total Blocking Time (TBT).

---

Technique 2: Font Loading Without Layout Shift

Fonts are a sneaky source of CLS. Here is the problem: your browser renders text with a fallback font (like Arial), then swaps in your custom font when it downloads. If the fonts have different metrics, every line of text shifts.

My approach:

1. Use next/font — It automatically generates size-adjusted fallback fonts that match your custom font's metrics
2. Load only the weights you use — Most SaaS pages need 3-4 weights, not all 9
3. Preload the font file — next/font handles this automatically

import { Outfit } from 'next/font/google';

const outfit = Outfit({
  subsets: ['latin'],
  weight: ['300', '400', '500', '700'],
  display: 'swap',
  fallback: ['system-ui', '-apple-system', 'sans-serif'],
});

This eliminates font-swap CLS entirely.

---

Technique 3: Images That Do Not Block Rendering

Every image on a SaaS landing page should follow these rules:

1. Hero images get priority — This tells Next.js to preload them
2. Everything else lazy loads — Default behavior with Next.js Image
3. Use explicit width and height — Prevents layout shift
4. Serve modern formats — AVIF is 50% smaller than WebP, which is 30% smaller than JPEG

<Image
  src="/hero-dashboard.png"
  alt="SaaS dashboard showing real-time analytics"
  width={1200}
  height={800}
  priority
  sizes="(max-width: 768px) 100vw, 50vw"
/>

The sizes prop is critical. Without it, the browser downloads the largest image variant regardless of screen size. A mobile user should not download a 1200px-wide image.

---

Technique 4: Animation Without Jank

SaaS landing pages need motion — scroll animations, hover effects, entrance transitions. But bad animations destroy your Performance score.

The rules:

1. Only animate transform and opacity — These are GPU-composited. Animating width, height, top, or left triggers expensive layout recalculations
2. Load animation libraries after idle — I dynamically import GSAP with requestIdleCallback
3. Respect prefers-reduced-motion — Users who disable animations should get zero motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

4. Never animate on initial paint — Hero content should be visible immediately. Entrance animations on above-the-fold content cause CLS

---

Technique 5: Lazy Load Heavy Libraries

SaaS landing pages sometimes need heavy interactive elements — 3D globes, charts, video players, code editors.

My rule: if it is below the fold, do not load it until the user scrolls there.

const InteractiveDemo = dynamic(
  () => import('@/components/InteractiveDemo'),
  { ssr: false }
);

ssr: false means the component only loads on the client, after JavaScript executes. Combine this with IntersectionObserver-based lazy loading, and heavy components never block the initial render.

---

Real Numbers: Before and After

Here is what this approach achieves in practice. On a recent SaaS rebuild:

The performance score went from failing to near-perfect. Not because of one magic trick, but because of all these techniques working together.

---

The Checklist

Before shipping any SaaS landing page, I run through this:

• Lighthouse Performance 90+ on mobile
• All images use Next.js Image with explicit dimensions
• Only the hero image has priority
• Below-fold content is deferred
• No CSS animations on initial paint
• Fonts loaded via next/font with size-adjusted fallbacks
• Heavy libraries dynamically imported with ssr: false
• prefers-reduced-motion disables all animation
• Single <h1> per page, proper heading hierarchy
• All interactive elements have focus-visible outlines

---

Want This for Your SaaS?

Every project I take on ships with these optimizations baked in. No extra charge, no "performance package" upsell. It is just how I build.

If your current landing page scores below 70 on Lighthouse, you are leaving conversions on the table. I can tell you exactly what is wrong and how to fix it — for free.

Get a free PageSpeed audit of your site or check your score now.

---

FAQ

How long does it take to optimize an existing SaaS landing page?

Most performance rebuilds take 10-14 days. The timeline depends on the complexity of your page and how much interactive functionality it has. Simple landing pages can be done in a week.

Can I get a 100 Lighthouse score?

Yes, but it requires careful attention to every detail. A 90+ score gives you 95% of the benefit. Going from 95 to 100 often means trading off design flourishes for marginal speed gains. I aim for 90+ as the baseline and push for 100 when possible.

Does this work with any framework, or just Next.js?

The principles apply everywhere — defer non-critical content, optimize images, load fonts properly. But Next.js makes it significantly easier with built-in features like Server Components, Image optimization, and next/font. That is why I recommend it for SaaS projects.