Performance-Serie • Post 2/10
Lighthouse 100/100/100/100 — wie erreichbar ist der perfekte Score?
Lighthouse 100 in allen vier Kategorien wirkt unmöglich — ist es aber nicht. Dieser Deep-Dive zeigt die konkreten Hebel für Performance, Accessibility, Best Practices und SEO.
TL;DR
- Lighthouse 100/100/100/100 — wie erreichbar ist der perfekte Score? — eine praktische Anleitung für den DACH-Raum.
- Behandelt "perfekter Lighthouse-Score" mit konkreten Beispielen.
- Behandelt "Lighthouse 100/100/100/100" mit konkreten Beispielen.
- Mindestens 3 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
Lighthouse 100/100/100/100 bedeutet die maximale Punktzahl in allen vier Audit-Kategorien von Google Lighthouse: Performance, Accessibility, Best Practices und SEO. Es ist der technische Goldstandard für Webentwicklung und signalisiert sowohl Nutzern als auch Suchmaschinen eine perfekt optimierte Seite.
Ist ein Lighthouse-Score von 100 in allen Kategorien realistisch?
Ja. mekyn.com erreicht 100/100/100/100 auf jeder Marketing-Page. Es erfordert systematische Optimierung bei Assets, Fonts, JavaScript und Server-Konfiguration — aber es ist kein Hexenwerk.
Warum Lighthouse 100 kein Selbstzweck ist
Ein perfekter Lighthouse-Score ist kein Vanity-Metric. Er korreliert direkt mit drei geschäftsrelevanten Kennzahlen:
Ranking: Google nutzt Core Web Vitals als Ranking-Faktor. Seiten mit guten CWV-Werten ranken nachweislich besser — besonders bei wettbewerbsintensiven Keywords.
Conversion: Eine Studie von Google zeigt: Seiten, die in unter 2 Sekunden laden, konvertieren 15–30 % besser als Seiten mit 4+ Sekunden Ladezeit. Jede zusätzliche Sekunde kostet 7 % Conversion.
Vertrauen: Nutzer bewerten Seiten, die schnell laden und barrierefrei sind, als professioneller und vertrauenswürdiger. Das ist subjektiv, aber messbar in Bounce-Rates und Verweildauer.
Die 10 Hebel für Lighthouse 100
- CSS inline: Stylesheets direkt ins HTML einbetten (
inlineStylesheets: 'always'). Eliminiert den render-blockierenden CSS-Request. - JavaScript minimieren: Kein Framework-JS auf Marketing-Pages. Astro erzeugt vanilla HTML — 0 KB Framework-Overhead.
- Fonts self-hosted: Google Fonts von eigenen Servern laden, nur die benötigten Subsets (z. B.
latin). Eliminiert externe Requests und DSGVO-Risiko. - Bilder optimieren: AVIF vor WebP vor JPEG. Astro
<Image>konvertiert automatisch. Immerwidth,height,loadingsetzen. - Preload strategisch: Nur LCP-relevante Assets preloaden (Heading-Font, LCP-Image). Nicht alles preloaden — das verschlimmert die Situation.
- Cache-Header korrekt: Hashed Assets (
/_astro/*) mitmax-age=31536000, immutable. HTML mitmax-age=3600, must-revalidate. - Kompression: Brotli für Text-Assets. Cloudflare macht das edgeseitig. WOFF2-Fonts sind bereits komprimiert — kein Doppel-Encoding.
- Kein Third-Party-JS: Kein Google Analytics, kein GTM, kein Hotjar auf Marketing-Pages. Telemetrie serverseitig oder cookieless.
- Semantisches HTML: Korrekte Heading-Hierarchie, ARIA-Labels, Skip-Links,
<main>-Landmark — Accessibility 100 ist damit gesichert. - SEO-Markup vollständig: Title, Description, Canonical, Open Graph, JSON-LD (Organization, WebSite, BreadcrumbList) — jede Page, jedes Mal.
Performance: Die harte Achse
| Metrik | Ziel | Hard-Limit | Hebel |
|---|---|---|---|
| LCP | < 2,0 s | < 2,5 s | Preload LCP-Font, inline CSS, eager Hero-Image |
| INP | < 100 ms | < 200 ms | Kein JS auf Marketing-Pages |
| CLS | < 0,05 | < 0,10 | width/height auf allen Bildern, Font-Display: swap |
| FCP | < 1,5 s | < 1,8 s | Inline CSS, minimale HTML-Größe |
| TBT | < 100 ms | < 200 ms | Kein Main-Thread-JS |
Performance ist die Achse, die am meisten Disziplin erfordert. Jeder zusätzliche JavaScript-Import, jede unoptimierte Bilddatei, jeder externe Font-Request kostet Punkte. Der Schlüssel ist Prävention, nicht Optimierung: Wenn von Anfang an kein Framework-JS auf der Page ist, muss man es auch nicht optimieren.
Accessibility: Der systematische Ansatz
Accessibility 100 erreichen Sie durch systematische Einhaltung der WCAG-2.1-AA-Kriterien. Das klingt nach viel, ist aber bei sauberem HTML-Output oft automatisch erfüllt:
- Korrekte Heading-Hierarchie (h1 → h2 → h3)
- Alle Inputs mit Labels
- Skip-Link als erstes fokussierbares Element
- Kontraste ≥ 4,5:1 für Body-Text
aria-hiddennur mitinertprefers-reduced-motionrespektieren
Bei mekyn sind diese Kriterien im Generator verankert — jede generierte Site erfüllt sie automatisch.
Best Practices und SEO: Die „einfachen” Achsen
Best Practices 100 bedeutet im Wesentlichen: kein Mixed Content (HTTPS everywhere), kein document.write(), keine veralteten APIs, CSP-Header gesetzt. Das ist bei einer modernen statischen Site schnell erledigt.
SEO 100 erfordert: Title-Tag (≤ 60 Zeichen), Meta-Description (120–160 Zeichen), Canonical-URL, robots-Meta, Open-Graph-Tags, JSON-LD-Strukturdaten, sitemap.xml, robots.txt. Auch das ist bei mekyn automatisiert.
Bleibt Lighthouse 100 dauerhaft?
Nein. Jedes neue Bild, jeder neue Tracking-Code, jedes npm-Update kann den Score senken. Lighthouse 100 ist ein Dauerzustand, kein einmaliges Ziel. Bei mekyn läuft der Audit als Teil der Build-Pipeline — jeder Build wird geprüft, bevor er deployt wird.
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Performance → Verwandt: LCP unter 2 Sekunden → Verwandt: CLS eliminieren → Verwandt: INP Core Web Vital
Mehr zu diesem Thema:
Zum SEO-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In