Lighthouse 100/100/100/100: Performance-Optimierung mit Next.js 15

Definition: Was bedeutet Lighthouse 100/100/100/100?

Lighthouse 100/100/100/100 bedeutet, dass eine Website in allen vier Kategorien des Google Lighthouse Audits die maximale Punktzahl erreicht: Performance, Accessibility, Best Practices und SEO. Weniger als 1% aller Websites weltweit erreichen diese Scores konsistent.

Auf erdinc.ai haben wir dieses Ziel erreicht — nicht als Selbstzweck, sondern als direkte Umsetzung der Cost of Retrieval Optimierung. Denn perfekte Performance-Scores minimieren die Kosten, die Google hat, um unsere Seiten zu crawlen, zu verarbeiten und zu ranken.

Dieser Praxisbericht dokumentiert die konkreten Techniken und Entscheidungen, die zu diesem Ergebnis geführt haben. Von der Three.js-Optimierung über die Font-Strategie bis zur Static-Export-Architektur — jede Massnahme hatte einen messbaren Impact.

Context: Warum Performance entscheidend ist

Im Kontext moderner SEO sind Core Web Vitals ein direkter Ranking-Faktor. Google hat im Juni 2021 die Page Experience als Ranking-Signal eingeführt und seither kontinuierlich verschärft.

Die drei Core Web Vitals

Performance und Topical Authority

Die Performance einer Website beeinflusst die Topical Authority direkt über den Cost of Retrieval:

• •Schnellere Seiten = niedrigere Crawl Costs
• •Weniger JavaScript = niedrigere Processing Costs
• •Optimierte Bilder = niedrigere Serving Costs

Eine Website mit perfekten Lighthouse Scores signalisiert Google: Diese Seite ist technisch exzellent und effizient zu verarbeiten.

Information: Unsere Performance-Techniken

1. Three.js Conditional Loading

Die Hero-Section von erdinc.ai verwendet eine interaktive 3D-Visualisierung mit Three.js. Das Problem: Three.js ist eine grosse Library, die auf mobilen Geräten weder performant noch notwendig ist.

Unsere Lösung: Conditional Loading

Statt Three.js auf allen Geräten zu laden, verwenden wir einen zweistufigen Ansatz:

• •Desktop (> 768px): Three.js wird dynamisch geladen und rendert die 3D-Szene
• •Mobile (≤ 768px): Ein CSS-basierter Fallback mit Gradient-Animationen wird angezeigt

Die Implementierung nutzt Next.js Dynamic Imports mit ssr: false:

const Scene3D = dynamic(
  () => import("@/components/hero/Scene3D"),
  {
    ssr: false,
    loading: () => 
  }
);

Ergebnis:

• •Mobile Bundle-Grösse: -340 KB
• •Mobile LCP: 1.2s → 0.8s
• •Desktop Experience: Unverändert interaktiv

2. Font-Strategie: display: optional

Die Font-Strategie ist einer der grössten versteckten Performance-Killer. Viele Websites verwenden font-display: swap, was zu sichtbaren Layout Shifts führt (CLS).

Unsere Strategie:

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

Warum optional statt swap?

• •swap: Font wird nachgeladen, Text springt (CLS)
• •optional: System-Font wird verwendet, wenn der Custom-Font nicht rechtzeitig lädt

Ergebnis:

• •CLS: 0.15 → 0.0
• •Kein sichtbarer Font-Swap mehr
• •Minimaler visueller Unterschied (System-Fonts sind heute hervorragend)

3. Lazy Loading mit Intersection Observer

Alle Bilder und nicht-kritische Komponenten werden mit dem Intersection Observer lazy-loaded:

const [isVisible, setIsVisible] = useState(false);
const ref = useRef(null);

useEffect(() => {
  const observer = new IntersectionObserver(
    ([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.disconnect();
      }
    },
    { rootMargin: "200px" }
  );
  if (ref.current) observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

Root Margin von 200px: Komponenten werden 200px bevor sie sichtbar werden geladen — der Nutzer bemerkt kein Lazy Loading.

4. Static Export Architecture

erdinc.ai verwendet Next.js 15 mit Static Export (output: 'export'). Das bedeutet:

• •Keine Server-Logik: Alle Seiten sind reines HTML + CSS + minimales JS
• •CDN-First: Netlify liefert die Seiten vom nächsten Edge-Server aus
• •Maximales Caching: Immutable Assets mit Content-Hashing
• •Null TTFB: Keine Server-Verarbeitung nötig

5. Image Optimization

Alle Bilder durchlaufen eine Optimierungspipeline:

Responsive Images mit dem Element:

• •Mobile: max. 640px breit
• •Tablet: max. 1024px breit
• •Desktop: max. 1440px breit

6. CSP Headers und Security

Content Security Policy Headers verbessern nicht nur die Sicherheit, sondern auch den Best Practices Score:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self' https://generativelanguage.googleapis.com;

7. Accessibility-Optimierung

Lighthouse Accessibility 100 erfordert:

• •Semantisches HTML: Korrekte Heading-Hierarchie (H1 → H2 → H3)
• •ARIA Labels: Alle interaktiven Elemente beschriftet
• •Kontrastverhältnisse: WCAG AAA (7:1) für alle Texte
• •Tastaturnavigation: Alle Elemente per Tab erreichbar
• •Skip Links: Direkter Sprung zum Hauptinhalt

8. SEO-Score Optimierung

Für Lighthouse SEO 100:

• •Meta Tags: Title, Description, Canonical auf jeder Seite
• •Open Graph: Vollständige OG-Tags für Social Media
• •Structured Data: Schema.org @graph auf jeder Seite
• •Mobile Viewport: Korrekt konfiguriert
• •Robots.txt: Vorhanden und korrekt
• •Sitemap: Automatisch generiert

Messbare Ergebnisse

Vorher vs. Nachher

Key Takeaways

1. Three.js Conditional Loading war der grösste einzelne Performance-Gewinn

2. font-display: optional hat CLS auf 0 reduziert

3. Static Export eliminiert TTFB komplett

4. Image Optimization hat die grösste Bandbreiten-Einsparung gebracht

5. CSP Headers waren überraschend einfach zu implementieren

Fazit

Lighthouse 100/100/100/100 ist erreichbar — erfordert aber systematische Optimierung in allen vier Kategorien. Die wichtigste Erkenntnis: Performance-Optimierung ist keine einmalige Aufgabe, sondern ein kontinuierlicher Prozess. Für die Triple-Optimization von SEO, GEO und AEO bildet technische Performance das Fundament.

Kernbotschaft: Perfekte Performance ist kein Nice-to-Have, sondern die Basis für Topical Authority!