Technik-SEO · Case Study

Lighthouse 100-Punkte Case Study: So habe ich unsere Leipzig-Seite technisch perfektioniert

Von Stephan Wolff · veröffentlicht am · Lesezeit: 10 Min.

Ein perfekter Lighthouse-Score ist kein Zufall, sondern das Ergebnis harter Arbeit. In dieser Case Study zeige ich Ihnen "Proof of Work": die exakten Schritte, mit denen ich unsere eigene Leipzig-Seite auf 4x 100 Punkte optimiert habe, die Grundlage für unsere Arbeit als SEO Agentur in Leipzig.

Screenshot einer Lighthouse-Bewertung mit viermal 100 Punkten als Case Study für eine SEO-Webseite aus Leipzig
Das Endergebnis: 4x 100 Punkte im Lighthouse-Bericht als "Proof of Work" für unsere technische SEO-Kompetenz. (Foto: CuraWeb / Screenshot)

Warum dieser "Proof of Work"-Case wichtig ist

In der SEO- und Webdesign-Branche wird viel versprochen. Kunden werden mit "garantierten Top-Rankings" und "blitzschnellen Websites" geködert. Aber wie oft sehen Sie den Beweis? Diese Case Study ist genau das: ein "Proof of Work" (Arbeitsnachweis). Ich zeige Ihnen nicht, was ich für andere tun könnte, sondern was ich für mein eigenes technisches Fundament getan habe. Diese Optimierungen gelten für das gesamte System von CuraWeb. Das fertige Ergebnis können Sie auf allen unseren Seiten sehen, zum Beispiel hier: SEO & Webdesign Leipzig.

Warum ist das wichtig? Weil Google E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) liebt. Nichts signalisiert mehr "Experience" und "Expertise" als die Fähigkeit, die eigene Dienstleistung perfekt auf das eigene Produkt anzuwenden. Eine Agentur, die schnelle Websites verkauft, aber selbst eine langsame Seite hat, ist nicht vertrauenswürdig (Trustworthiness).

Ein Lighthouse-Score ist dabei ein hervorragender, messbarer Indikator für technische Qualität. Er prüft vier kritische Bereiche:

  1. Performance: Wie schnell lädt die Seite? (Core Web Vitals, LCP, INP, CLS)
  2. Accessibility: Ist die Seite für Menschen mit Einschränkungen bedienbar?
  3. Best Practices: Ist der Code modern, sicher und fehlerfrei?
  4. SEO: Sind die grundlegenden technischen SEO-Anforderungen erfüllt?

Gerade lokale Landingpages sind oft überladen und langsam. Ein 100-Punkte-Score in allen vier Bereichen ist das technische Fundament, auf dem erfolgreiches lokales SEO aufgebaut wird. Diese Basis ist nötig, um im harten Wettbewerb, zum Beispiel für einen Zahnarzt in Leipzig, überhaupt bestehen zu können.

Die Ausgangslage: 5 typische Performance-Hürden

Keine Website ist von Anfang an perfekt. Selbst eine moderne, sauber programmierte Seite wie der CuraWeb-Stack hat "ab Werk" typische Hürden, die eine 100-Punkte-Wertung verhindern. Bevor ich mit der Feinoptimierung begann, gab es die üblichen Verdächtigen, die ich auch bei vielen Kunden-Audits sehe:

1. Largest Contentful Paint (LCP) zu hoch
Das Hauptbild (Hero-Image) war zwar optimiert, wurde aber in der Ladekette zu spät angefordert. Der Browser entdeckte es erst, nachdem er einen Großteil des CSS geladen hatte. Das kostete wertvolle Millisekunden.
2. Layoutverschiebungen (CLS)
Oft ein Problem durch Webfonts. Wenn die Schriftarten zu spät laden, "springt" der Text (FOUT - Flash of Unstyled Text), sobald die Schriftart angewendet wird. Auch Bilder ohne explizite Breiten- und Höhenangaben sind eine klassische CLS-Falle.
3. Unnötige "Render-Blocking" Ressourcen
Jede CSS- oder JavaScript-Datei, die im <head> geladen wird, blockiert das "Malen" (Rendern) der Seite. Oft werden Skripte geladen, die für den "Above the Fold"-Bereich gar nicht benötigt werden (z.B. für ein Kontaktformular ganz unten).
4. Fehlende Barrierefreiheit (Accessibility)
Kleinigkeiten, die man schnell vergisst: Hat ein klickbares Icon ein aria-label? Sind die Farbkontraste wirklich alle WCAG-konform? Ist die Sprungnavigation für Screenreader logisch?
5. Ungenutzte SEO-Signale
Die Seite funktionierte, aber signalisierte sie Google ihre Struktur optimal? Die Implementierung von Breadcrumb-JSON-LD und die Verfeinerung des LocalBusiness-Schemas waren notwendig, um Google präzise zu "füttern".

Das ist ehrlich und absolut legitim. Die meisten Websites haben diese Potenziale. Der Unterschied liegt darin, ob man sie erkennt und behebt. Das ist der Kern einer professionellen SEO-Beratung und einer sauberen technischen Suchmaschinenoptimierung.

Die 100-Punkte-Optimierung: Schritt für Schritt

Um von "gut" (ca. 90 Punkte) auf "perfekt" (100 Punkte) zu kommen, sind gezielte technische Maßnahmen im Sinne eines Technical-SEO-Audits erforderlich. Hier sind die wichtigsten Hebel, die ich für die 4x 100 Punkte umgelegt habe.

Messwerte der optimierten Seite:
LCP: 1.1s · INP: 58ms · CLS: 0.00 · TTFB: 85ms
→ Testen Sie unsere Seite live – oder auch gern Ihre eigene!

Ein Wort zur Ehrlichkeit: Warum 98 Punkte genauso perfekt sind

Sie haben oben auf den Live-Test-Link geklickt und "nur" 98 oder 99 Punkte bekommen? Das ist kein Fehler, das ist die Realität von "Labordaten".

Einen 100-Punkte-Score zu erreichen, erfordert perfekten Code und auch ein wenig "Rückenwind" vom Test-Server. Wie der Screenshot unten zeigt, kann ein Test sogar einmal nur 98 Punkte ergeben, obwohl der Code absolut identisch ist. Das ist völlig normal und liegt an minimalen Schwankungen bei der Server-Performance, der Netzwerklatenz oder dem PageSpeed-Test selbst.

Lighthouse-Bericht mit 98 Punkten, der normale Serverschwankungen zeigt.
Typisches Ergebnis mit 98 Punkten – die Core Web Vitals (grün) sind perfekt, die Schwankung liegt am Server. (Foto: CuraWeb / Screenshot)

Das Wichtigste ist nicht die "Eitelkeits-Metrik" 100, sondern was dieser 98er-Bericht wirklich zeigt: Total Blocking Time ist 0 ms, Cumulative Layout Shift ist 0 und der LCP ist im tiefgrünen Bereich. Das ist technische Perfektion in der Praxis. Dieses Verständnis unterscheidet professionelle Website Performance Optimierung von reiner Zahlenschönung.

1. Performance (LCP, INP, CLS): Der Weg zur 100

Das ist die Königsdisziplin. Das Ziel: eine Ladezeit (LCP) unter 1,8 Sekunden und null Blockierzeit oder Verschiebungen.

LCP-Optimierung (Largest Contentful Paint)

  • Preload für das Hero-Image: Der wichtigste Schritt. Ich habe einen <link rel="preload">-Tag für das kritische LCP-Bild (das Hero-Bild von Leipzig) direkt in den HTML-<head> gesetzt. Dadurch fordert der Browser das Bild mit höchster Priorität an, parallel zum CSS.
  • Moderne Bildformate: Alle Bilder werden im modernen .webp-Format ausgeliefert, das bei gleicher Qualität ca. 30% kleiner ist als JPEG.
  • Serverseitiges Caching: Die Seite wird nicht bei jedem Aufruf neu aus PHP generiert. Ein aggressives Caching liefert eine statische HTML-Version aus, was die Server-Antwortzeit (TTFB - Time to First Byte) auf unter 100ms drückt.

CLS-Optimierung (Cumulative Layout Shift)

  • Feste Bildgrößen: Jedes <img>-Tag hat explizite width- und height-Attribute. Dadurch "reserviert" der Browser den Platz, bevor das Bild geladen ist. Nichts springt.
  • Fonts optimiert: Ich lade die Schriften selbst (self-hosting) und nicht von Google Fonts (Datenschutz + Performance). Mit font-display: swap; wird sofort eine Systemschrift angezeigt und die Lücke bis zum Laden der Webfont minimiert, was Layout-Sprünge verhindert.

INP & TBT Optimierung (Interaction to Next Paint / Total Blocking Time)

  • JavaScript minimieren & defer: Sämtliches JavaScript (z.B. für die Animationen oder die mobile Navigation) wird mit dem defer-Attribut geladen. Das bedeutet, es blockiert niemals das Rendern der Seite.
  • Kein unnötiges JS: Ich vermeide den Einsatz von jQuery oder schweren Bibliotheken. Der gesamte Code ist "Vanilla JS" (natives JavaScript) und auf ein Minimum reduziert.

2. Accessibility: Barrierefreiheit als Qualitätsmerkmal

Eine 100-Punkte-Bewertung hier ist nicht verhandelbar. Eine Website muss für jeden funktionieren. Dies ist ein Kernthema unseres professionellen Webdesigns.

  • Semantisches HTML: Klare Nutzung von <main>, <nav>, <section> und logischen Überschriften-Hierarchien (H1-H6).
  • Farbkontraste: Alle Text- und Hintergrundfarben wurden geprüft und erfüllen die WCAG AA-Mindestkontraste.
  • ARIA-Attribute: Klickbare Elemente, die keine Links sind (wie der mobile Menü-Button), haben korrekte aria-label-Attribute, damit Screenreader-Nutzer wissen, was sie tun.
  • Alt-Texte: Jedes informative Bild hat einen beschreibenden Alt-Text.

Das fertige Ergebnis können Sie hier sehen: SEO & Webdesign Leipzig.

3. Best Practices: Die "saubere" Technik

Dieser Punkt prüft die "Hygiene" des Codes. Er ist oft am einfachsten zu erreichen, wenn man von Grund auf sauber arbeitet.

  • Keine Console-Errors: Die Browser-Konsole ist absolut sauber. Es gibt keine 404-Fehler, keine JavaScript-Fehler oder veralteten API-Aufrufe.
  • HTTP/2 oder HTTP/3: Die Seite wird über ein modernes Protokoll ausgeliefert (danke an Cloudflare).
  • Sichere Verbindungen: Alle Verbindungen laufen über HTTPS.
  • Keine veralteten Bibliotheken: Es wird kein JavaScript mit bekannten Sicherheitslücken verwendet.

4. SEO: Das Fundament für Sichtbarkeit

Lustigerweise ist der "SEO"-Score in Lighthouse der am einfachsten zu erreichende, da er nur die absoluten technischen Grundlagen prüft. Aber auch diese müssen stimmen.

  • Meta-Tags: Die Seite hat einen einzigartigen <title> und eine <meta name="description">.
  • Canonical-Tag: Ein rel="canonical"-Link ist gesetzt, um Duplicate Content zu vermeiden (besonders wichtig bei index.php vs. /).
  • Crawl-Freigabe: Die Seite ist nicht durch robots.txt blockiert.
  • JSON-LD (Strukturierte Daten): Das ist der Bonus-Punkt. Ich habe (wie im Schema.org Guide beschrieben) ein detailliertes LocalBusiness-Schema und BreadcrumbList-Schema implementiert. Das ist technisch nicht für die 100 Punkte *nötig*, aber entscheidend für das E-E-A-T und die Sichtbarkeit in den SERPs.

Das Fazit: Was Sie von dieser Case Study lernen können

Der Weg zu 4x 100 Punkten ist ein Prozess der Details. Es geht nicht um einen magischen Trick, sondern um die konsequente Beseitigung Dutzender kleiner Hürden. Es ist der Beweis, dass man die eigene Dienstleistung ernst nimmt.

Diese Case Study zeigt: Technische Perfektion ist machbar. Sie erfordert einen sauberen Code-Stack, ein tiefes Verständnis für die Lade-Reihenfolge von Ressourcen und den Willen, "gut" auf "exzellent" zu heben. Dies ist die Art von technischer Sorgfalt, die wir bei CuraWeb als Standard für jedes Webdesign-Projekt und jede SEO-Optimierung ansehen – besonders für Unternehmen, die einen Webdesigner in Leipzig oder eine SEO Agentur Leipzig suchen.

Eine 100-Punkte-Bewertung ist kein reines Eitelkeitsprojekt. Sie ist ein direktes Signal an Google und Nutzer, dass Sie Qualität ernst nehmen. Es ist der ultimative "Proof of Work" und ein Fundament für E-E-A-T.

Wenn Sie dieselbe technische Präzision für Ihre eigene Website wünschen, egal ob für ein Architekturbüro oder eine Praxis: Analysieren wir Ihr Potenzial. Beginnen Sie mit einer klaren, datenbasierten Analyse und einer gezielten Website Performance Optimierung.

Das fertige Ergebnis können Sie hier selbst erleben: SEO & Webdesign Leipzig – optimiert auf 4×100 Punkte.

Häufige Fragen zu Lighthouse 100-Punkte Case Study: So habe ich unsere Leipzig-Seite technisch perfektioniert

Was bedeuten 4x 100 Punkte bei Lighthouse?
Das bedeutet, dass die Seite in allen vier Hauptkategorien – Performance, Accessibility (Barrierefreiheit), Best Practices und SEO – die bestmögliche Bewertung erreicht hat. Es ist ein starkes Signal für technische Exzellenz.
Warum ist eine hohe Lighthouse-Performance wichtig für SEO?
Gute Performance-Werte (LCP, INP, CLS) sind ein direkter Google-Rankingfaktor. Bessere Nutzererfahrung führt zu niedrigeren Absprungraten und höheren Conversion-Rates, was Google ebenfalls positiv bewertet.
Ist ein 100-Punkte-Score für jede Website realistisch?
Es ist ein ideales Ziel, aber nicht immer für jede Seite (z.B. mit vielen externen Skripten) zu 100% erreichbar. Wichtiger als die 100 ist es, im 'grünen Bereich' (90+) zu sein und die Core Web Vitals zu bestehen.

Ist Ihre Website technisch bereit für Top-Rankings?

Wir analysieren Ihre Website auf die gleichen Kriterien – von Core Web Vitals bis Accessibility – und zeigen Ihnen, wo ungenutztes Potenzial liegt.

Jetzt kostenlose Analyse anfordern