Lighthouse 95+ Optimization: Der SaaS-Leistungsleitfaden

Kurzfassung: Ein Lighthouse-Score von 95+ geht es nicht um das Jagen nach einer Zahl – es geht darum, eine performante Nutzererfahrung zu entwickeln, die direkten Einfluss auf SaaS-Konversionsraten hat. Dieser Praxisleitfaden behandelt Core Web Vitals-Optimierung, SSR mit Streaming, Critical CSS, Bundle-Splitting, Bildoptimierung und Caching-Strategien. Jede Empfehlung ist umsetzbar und produktionserprobt. Eine 30-Punkte-Checkliste ist am Ende enthalten.

Einleitung: Warum Lighthouse 95+ für SaaS wichtig ist

Bei SaaS zählt jede Millisekunde. Googles Forschung hat wiederholt gezeigt, dass eine Verzögerung von einer Sekunde bei der mobilen Seitenladezeit die Konversionsraten um bis zu 20 % reduziert. Bei einem B2B-SaaS-Produkt mit 100 $ monatlichem ARPU und 10.000 Anmeldungen pro Monat bedeutet diese Verzögerung einen jährlichen Umsatzverlust von über 2 Mio. $.

Aber die Auswirkungen gehen tiefer:

SEO-Rankings: Google nutzt Core Web Vitals als Rankingfaktor. Eine Website mit einem Lighthouse-Score unter 50 hat kaum Chancen, wettbewerbsfähig zu ranken.
Nutzervertrauen: Lighthouse-Scores korrelieren stark mit der wahrgenommenen Zuverlässigkeit.
Werbeeffizienz: Niedrigere Quality Scores bei Google Ads bedeuten höhere Kosten pro Klick.

Lighthouse 95+ ist ein verbundener Wachstumshebel, der gleichzeitig Akquise, Aktivierung und Bindung beeinflusst.

Core Web Vitals verstehen

Metrik	Was sie misst	Zielwert
LCP (Largest Contentful Paint)	Lade-Performance	<= 2,5 s
CLS (Cumulative Layout Shift)	Visuelle Stabilität	<= 0,1
INP (Interaction to Next Paint)	Interaktivität	<= 200 ms

Performance-Budgets: Ziele von Anfang an definieren

Definieren Sie Budgets für:

JavaScript-Bundle-Größe: 150 KB (komprimiert) für kritische Route, 300 KB Maximum
Time to Interactive: < 3 s bei 3G
LCP: < 2,0 s
Gesamtseitengewicht: < 500 KB (komprimiert)

In der CI durchsetzen:

javascript

// lighthouse-budget.js
module.exports = {
  ci: {
    collect: { numberOfRuns: 3, settings: { preset: 'desktop' } },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.95 }],
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        'total-blocking-time': ['error', { maxNumericValue: 200 }],
      },
    },
  },
};

LCP-Optimierung

1. SSR mit Streaming

Streaming SSR liefert HTML progressiv an den Browser und verbessert LCP erheblich, indem Above-the-Fold-Inhalte sofort gerendert werden. Eine detaillierte Erklärung, wie Streaming SSR unter der Haube funktioniert, finden Sie in unserem Streaming SSR Deep Dive. TanStack Start unterstützt Streaming SSR out of the box:

tsx

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  // Streaming is enabled by default in TanStack Start
});

Bei Deployment auf Cloudflare Workers nutzt Streaming SSR Edge-Infrastruktur, um TTFB zu minimieren und HTML von Edge-Locations bereitzustellen, die Ihren Nutzern am nächsten liegen – was die Performance-Vorteile des serverseitigen Renderns weiter verstärkt.

2. Critical CSS

Inlinen Sie das CSS, das für Above-the-Fold-Inhalte benötigt wird. Verzögern Sie den Rest:

html

<head>
  <style>
    /* Critical CSS — inline above-the-fold styles */
    header, .hero, .cta-button { /* essential styles */ }
  </style>
  <link rel="preload" href="/styles/full.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="/styles/full.css" /></noscript>
</head>

3. Schriftladen

Verwenden Sie font-display: swap und preladen Sie Ihre Hauptschrift:

css

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

Praeladen Sie sie im HTML-Head:

html

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />

4. Das LCP-Element optimieren

Praeloden: <link rel="preload" as="image" href="/hero.webp" />
Responsive Bilder für verschiedene Viewports verwenden
Lazy Loading für das LCP-Element vermeiden

CLS-Optimierung

1. Explizite Dimensionen setzen

html

<img
  src="/dashboard-screenshot.webp"
  width="1200"
  height="675"
  alt="Dashboard preview"
  loading="lazy"
/>

2. Schrift-Fallback-Metriken

css

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

3. Platz für dynamische Inhalte reservieren

css

.newsletter-signup-placeholder {
  min-height: 120px;
  /* Reserve space while async content loads */
}

JavaScript-Optimierung

1. Route-basiertes Code-Splitting

TanStack Router unterstützt route-basiertes Code-Splitting nativ:

tsx

// routes/dashboard.tsx
export const Route = createLazyRoute('/dashboard')({
  component: DashboardComponent,
});

2. Tree Shaking

Benannte Imports verwenden: import { useQuery } from '@tanstack/react-query'
Seiten-effektfreie Pakete markieren: "sideEffects": false

3. Nicht-kritischen Code verzögert laden

html

<script>
  window.addEventListener('load', () => {
    setTimeout(() => {
      const script = document.createElement('script');
      script.src = 'https://widget.example.com/loader.js';
      script.async = true;
      document.body.appendChild(script);
    }, 3000);
  });
</script>

Bildoptimierung

1. Responsive Bilder mit srcset

html

<img
  src="/hero-1200.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  width="1200" height="675" alt="Product dashboard"
/>

2. Moderne Formate: WebP und AVIF

html

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" width="1200" height="675" alt="Hero" />
</picture>

Caching-Strategie

1. CDN-Caching

Cache-Control: public, max-age=31536000, immutable  # Versioned assets
Cache-Control: public, max-age=3600, s-maxage=86400  # HTML pages

2. TanStack Query Caching

tsx

const { data } = useQuery({
  queryKey: ['pricing-plans'],
  queryFn: fetchPricingPlans,
  staleTime: 5 * 60 * 1000,
  gcTime: 30 * 60 * 1000,
});

30-Punkte-Performance-Checkliste

Kritisch

Hohe Priorität

Mittlere Priorität

Fazit

Ein Lighthouse-Score von 95+ bedeutet, eine schnelle, zuverlässige und angenehme Nutzererfahrung zu entwickeln, die direkt zum Wachstum Ihres SaaS-Unternehmens beiträgt. Der Ansatz ist systematisch:

Budgets setzen, bevor Sie Code schreiben
Kontinuierlich messen im Labor und im Feld
Den kritischen Pfad optimieren: SSR-Streaming, Critical CSS, Schriftladen, Bilder
JavaScript kontrollieren mit Route-Splitting und verzögertem Laden
Alles aggressiv cachen

Beginnen Sie mit der Checkliste. Wählen Sie zuerst die kritischen Punkte. Führen Sie Lighthouse CI bei jedem PR aus. Ihre Nutzer – und Ihr Umsatz – werden es Ihnen danken. Eine vollständige Anleitung zum Deployment einer optimierten SaaS-App in die Produktion finden Sie im TanStack Start Deployment Guide.