Lighthouse 100: Wie man perfekte Performance erreicht

· 15 Min

100 Punkte in Lighthouse sind kein Mythos. Es ist das Ergebnis systematischer Arbeit an jeder Metrik: vom ersten Byte bis zum letzten Pixel. In dieser Anleitung erkläre ich, wie Sie alle Aspekte der Performance für ein perfektes Ergebnis optimieren.

Was Sie lernen werden:

  • ✅ Wie der Lighthouse-Bewertungsalgorithmus funktioniert
  • ✅ Optimierung von LCP, INP, CLS bis in die grüne Zone
  • ✅ Accessibility und Best Practices für 100 Punkte
  • ✅ SEO-Optimierung ohne Kompromisse

Wie Lighthouse funktioniert

Lighthouse ist Googles Audit-Tool, das Websites in fünf Kategorien bewertet: Performance, Accessibility, Best Practices, SEO und PWA. Für eine Gesamtwertung von 100 benötigen Sie maximale Punkte in allen Kategorien.

Die Kategorie Performance (Gewichtung 30%) basiert auf Core Web Vitals [^1^]:

  • LCP (Largest Contentful Paint) — Ladezeit des Hauptinhalts. Ziel: < 2,5 Sek
  • INP (Interaction to Next Paint) — Reaktionszeit auf Interaktion. Ziel: < 200 ms [^5^]
  • CLS (Cumulative Layout Shift) — visuelle Stabilität. Ziel: < 0,1 [^1^]
  • TTFB (Time to First Byte) — Zeit bis zum ersten Byte. Ziel: < 800 ms
  • FCP (First Contentful Paint) — erster Inhalt. Ziel: < 1,8 Sek

💡 Wichtig: Lighthouse verwendet Lab-Daten (Simulation), keine echten Nutzerdaten (CrUX). Für 100 Punkte müssen Sie beide Quellen optimieren.

LCP-Optimierung: Hauptinhalt in 2,5 Sekunden

LCP misst, wann Nutzer den Hauptinhalt der Seite sehen. Normalerweise ist das ein großes Bild oder Textblock.

1. Bildoptimierung

Bilder verursachen 70% des langsamen LCP [^4^]. Maßnahmen:

  • Verwenden Sie WebP (30% Einsparung) oder AVIF (50% Einsparung) [^4^]
  • Geben Sie width und height an, um CLS zu verhindern
  • Verwenden Sie fetchpriority="high" für LCP-Bilder [^8^]
  • Komprimieren Sie mit Squoosh, ImageOptim oder Sharp
<!-- Richtig: Priorität + Abmessungen -->
<img 
  src="hero.avif" 
  width="1200" 
  height="630" 
  fetchpriority="high"
  alt="Beschreibung"
>

2. Eliminierung render-blockierender Ressourcen

CSS und JavaScript blockieren das Rendering. Lösungen [^4^]:

  • Kritisches CSS inline (< 14KB)
  • Nicht-kritisches CSS verzögern via media="print" mit onload
  • defer oder async für Skripte verwenden
<!-- Kritisches CSS inline -->
<style>/* critical.css */</style>

<!-- Verzögertes CSS -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- Nicht-blockierendes JavaScript -->
<script src="app.js" defer></script>

3. Verbesserung von TTFB

Langsame Server töten LCP. Optimierungen [^4^]:

  • CDN verwenden (Cloudflare, Fastly) — bis zu 600ms Verbesserung
  • Server-Caching aktivieren (Redis, Memcached)
  • Datenbankabfragen optimieren
  • Edge Computing in Betracht ziehen (Cloudflare Workers, Vercel Edge)

4. Server-Side Rendering

SSR beschleunigt LCP um 1000ms durch Senden von fertigem HTML [^4^]. Für React/Next.js:

// Next.js App Router — Server Component standardmäßig
export default async function Page() {
  const data = await fetchData(); // Auf dem Server
  return <Hero data={data} />;
}

INP-Optimierung: Antwort in 200ms

INP ersetzte 2024 FID und misst die Verzögerung aller Interaktionen auf der Seite [^5^]. Schlechtes INP = frustrierte Nutzer.

Aufbrechen langer Aufgaben

JavaScript blockiert den Haupt-Thread. Lösungen [^4^]:

  • Code in Chunks aufteilen (Code Splitting) [^7^]
  • setTimeout verwenden, um den Haupt-Thread freizugeben
  • Web Workers für schwere Berechnungen
  • Nicht verwendeten Code entfernen (Tree Shaking)
// Schlecht: blockiert für 500ms
function processItems(items) {
  return items.map(heavyCalculation);
}

// Gut: gibt Haupt-Thread frei
async function processItems(items) {
  const results = [];
  for (const item of items) {
    results.push(heavyCalculation(item));
    await new Promise(r => setTimeout(r, 0)); // Yield
  }
  return results;
}

Optimierung von Event-Handlern

  • Debouncing/Throttling für Scroll und Resize [^4^]
  • Passive Listener: { passive: true }
  • Erzwungene synchrone Layouts vermeiden

Reduzierung der DOM-Größe

Große DOMs verlangsamen das Rendering. Ziele [^4^]:

  • Weniger als 1500 Knoten insgesamt
  • Tiefe nicht mehr als 32 Ebenen
  • Nicht mehr als 60 Kindelemente pro Elternelement

CLS-Optimierung: Null Verschiebungen

CLS misst, wie sehr Inhalte beim Laden "springen". Selbst kleine Verschiebungen ärgern Nutzer [^1^].

Feste Abmessungen für Medien

Geben Sie immer Abmessungen für Bilder und Videos an [^4^]:

/* CSS: Platzreservierung */
.image-container {
  aspect-ratio: 16 / 9;
  background: #f0f0f0; /* Platzhalterfarbe */
}

img {
  width: 100%;
  height: auto;
}

Schriftarten ohne Verschiebungen

Web-Schriftarten verursachen FOIT/FOUT. Lösungen [^4^]:

  • font-display: swap — Fallback sofort anzeigen
  • Kritische Schriftarten vorladen: <link rel="preload">
  • System-Schriftarten für maximale Geschwindigkeit
  • Variable Fonts statt mehrerer Dateien

Platzreservierung für Werbung

Fügen Sie niemals Inhalte über bestehende ohne Interaktion ein [^4^]. Verwenden Sie:

.ad-slot {
  min-height: 250px; /* Reserve für Banner */
  background: #f5f5f5;
}

Accessibility: 100 Punkte ohne Kompromisse

Barrierefreiheit ist 2026 Pflicht. Der European Accessibility Act (EAA) gilt seit 2025.

Semantisches HTML

  • Korrekte Tags verwenden: nav, main, article, aside
  • Ein h1 pro Seite, logische Überschriftenhierarchie
  • ARIA-Attribute nur wenn nötig

Kontrast und Lesbarkeit

  • Textkontrast 4,5:1 minimum (WCAG AA)
  • Schriftgröße mindestens 16px für Body
  • Zeilenhöhe 1,5

Tastaturnavigation

  • Alle interaktiven Elemente via Tab erreichbar
  • Sichtbarer Fokus: outline: 2px solid
  • Logische Fokus-Reihenfolge

Best Practices: Sicherheit und Modernität

Sicherheit

  • HTTPS obligatorisch
  • Content Security Policy (CSP) Header
  • Keine veralteten APIs (document.write)

Moderne Standards

  • Keine veralteten Bibliotheken (jQuery, alte Polyfills)
  • Verwendung von HTTP/2 oder HTTP/3
  • Korrekte MIME-Typen für alle Ressourcen

SEO: Technische Exzellenz

Meta-Tags

  • Einzigartiger <title> (50-60 Zeichen)
  • Einzigartige meta description (150-160 Zeichen)
  • Canonical URL auf jeder Seite

Strukturierte Daten

JSON-LD Markup für Article, BreadcrumbList, FAQ [^2^]:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Lighthouse 100: Wie man perfekte Performance erreicht",
  "author": { "@type": "Person", "name": "Pavel Levdin" },
  "datePublished": "2026-03-31"
}
</script>

Mobile Optimierung

Google verwendet Mobile-First Indexing. Prüfen Sie [^2^]:

  • Viewport Meta-Tag
  • Klickbare Elemente mindestens 48×48px
  • Lesbarer Text ohne Zoom

Checkliste für 100 Punkte

⚡ Performance

  • ✅ LCP < 2,5 Sek
  • ✅ INP < 200 ms
  • ✅ CLS < 0,1
  • ✅ TTFB < 800 ms
  • ✅ FCP < 1,8 Sek
  • ✅ WebP/AVIF für Bilder
  • ✅ Kritisches CSS inline
  • ✅ JavaScript mit defer/async

♿ Accessibility

  • ✅ Semantisches HTML
  • ✅ Alt-Texte für Bilder
  • ✅ Kontrast 4,5:1
  • ✅ Tastaturnavigation
  • ✅ ARIA-Labels wo nötig
  • ✅ Seitensprache angegeben

🔒 Best Practices

  • ✅ HTTPS
  • ✅ CSP Header
  • ✅ HTTP/2 oder HTTP/3
  • ✅ Keine veralteten APIs
  • ✅ Moderne Bibliotheken

🔍 SEO

  • ✅ Einzigartiger Titel/Beschreibung
  • ✅ JSON-LD Markup
  • ✅ Canonical URLs
  • ✅ XML Sitemap
  • ✅ Robots.txt
  • ✅ Mobile-friendly

Analyse-Tools

  • Lighthouse CI — automatisierter Audit in CI/CD
  • PageSpeed Insights — Lab + Field Daten
  • Chrome DevTools — Performance, Coverage Tabs
  • WebPageTest — detaillierte Ladeanalyse
  • DebugBear — Core Web Vitals Monitoring [^1^]

Hilfe bei der Optimierung nötig?

Ich führe ein Audit Ihrer Website durch und bringe alle Metriken in die grüne Zone. Erfahrung mit der Optimierung von 50+ Projekten für 90+ Lighthouse-Punkte.

Audit bestellenCases ansehen

Fazit

100 Punkte in Lighthouse sind kein Zufall, sondern das Ergebnis eines systematischen Ansatzes. Grundprinzipien:

  • Messen — Lab- und Field-Daten verwenden
  • Priorisieren — mit den größten Problemen beginnen
  • Automatisieren — Lighthouse CI in der Pipeline
  • Überwachen — Performance verschlechtert sich mit der Zeit

Denken Sie daran: Perfekte Performance ist eine Investition in User Experience und SEO. Jede Millisekunde Ladezeit beeinflusst die Conversion.

Viel Erfolg bei der Optimierung! ⚡