Onlineshop Performance — Lighthouse 100/100/100/100
Lighthouse 100 in allen 4 Kategorien ist möglich. Wir haben es bei xaicore.de erreicht — 100/100/100/100 Mobile + Desktop. Hier konkret welche Hebel wirklich wirken und welche reine Theorie sind.
Die 4 Lighthouse-Kategorien
- Performance — wie schnell lädt die Seite
- Accessibility — wie barrierefrei ist sie
- Best Practices — moderne Web-Standards
- SEO — kann Google die Seite verstehen
Hebel für Performance 100
1. Critical CSS inline
Above-the-fold CSS direkt in <head>. Render-Blocking entfällt. Tools: Critters (Astro), critical (Webpack).
2. JavaScript splitten + lazy-loaden
Nicht alles JS upfront laden. Code-Splitting per Route. Dynamic Imports für Module die erst nach Interaktion gebraucht werden (z.B. Video-Player).
3. Image-Optimierung
- WebP/AVIF statt JPEG/PNG
loading="lazy"für below-foldfetchpriority="high"für Hero-Bild- Explizite width/height für CLS-Free
- Responsive srcset für mehrere Auflösungen
4. Fonts lokal hosten + preload
Keine Google Fonts CDN. Self-Hosting mit font-display: optional oder swap. Preload nur die Hauptweight die direkt oben sichtbar ist.
5. Third-Party-Scripts kontrollieren
Cookies, Tracking, Chat-Widgets — alle als async/defer. Idealerweise erst nach User-Interaction laden.
6. Server-Performance
Hetzner-Hosting, Caching mit Redis/Memcached, CDN für statische Assets (Cloudflare/BunnyCDN).
Hebel für SEO 100
- Meta-Title + Meta-Description auf jeder Seite
- Canonical-URLs
- JSON-LD Schemas (Organization, Product, Breadcrumb, FAQ)
- Mobile-Viewport gesetzt
- HTTP-Status korrekt (200, kein 404 für interne Links)
- Hreflang bei Multi-Language
Hebel für Accessibility 100
- Alt-Tags auf ALLEN Bildern (auch dekorativ →
alt="") - Form-Labels für jeden Input
- Farbkontrast min 4.5:1 für normalen Text
- Heading-Hierarchie ohne Sprünge (h1 → h2 → h3)
- Focus-Indicators sichtbar
- ARIA-Labels bei interaktiven Elementen ohne sichtbaren Text
Best Practices 100
- HTTPS-only
- Keine console.errors in Produktion
- Browser-Errors abfangen
- HTTP/2 oder HTTP/3
- Bildformate korrekt für Browser
Was NICHT wirkt
- HTTP/3 nur kosmetisch — Effekt < 50ms
- Cache-First Service Worker ohne Strategie
- Async-Loading aller Scripts — manche brauchen Reihenfolge
- Minify allein — JS-Größe ist nicht der Hauptfaktor, sondern Execution-Time
Realistische Erwartung
Für Shopify-Themes ohne Custom-Code: Lighthouse 70-85 ist normal. Mit Theme-Optimization + App-Audit: 85-95. Für 100 brauchen Sie Headless (Hydrogen, Next.js) oder ein extrem gut optimiertes Theme.
Anfrage: xaicore.de/#contact · Mehr zu Webseiten