Qualitätsbereiche im Detail

Qualitätsbereiche

• Performance

  Lighthouse 95–100, Core Web Vitals grün

  • Core Web Vitals
  • Lazy Loading
  • Responsive Images
  • AVIF / WebP
  • Brotli + GZIP
  • Tree Shaking
  • Code Splitting
  • Critical CSS
  • DNS Prefetch / Preconnect / Preload / Prefetch
  • HTTP/2 & HTTP/3
  • Long-Term Browser Cache mit Hashing

• Responsive Design

  • Mobile First
  • Tablet, Desktop, Ultrawide, Foldables
  • Landscape & Portrait
  • Responsive Typography (clamp())
  • Touch Targets ≥ 44 px

• Accessibility (BFSG / WCAG 2.2 AA)

  Lighthouse Accessibility 100

  • Semantisches HTML & Landmark Roles
  • Skip Links, volle Tastaturbedienung
  • Sichtbarer Focus, ausreichender Kontrast
  • Alt-Texte, Labels, ARIA nur wenn nötig
  • Screenreader-Test
  • prefers-reduced-motion / -color-scheme / -contrast

• SEO

  Lighthouse SEO 100

  • Title, Meta Description, Canonical
  • Robots.txt & Sitemap.xml
  • Open Graph & Twitter Card
  • JSON-LD: Organization, Breadcrumb, FAQ, Event
  • Strukturierte Überschriften & interne Verlinkung

• KI-Kompatibilität / LLM SEO

  • Semantisches, strukturiertes HTML
  • JSON-LD & eindeutige Entitäten
  • FAQs, klare Überschriften, kurze Absätze
  • Sprechende URLs, maschinenlesbare Daten
  • Vollständige Metadaten (Author, Publisher, License, Copyright)
  • Keine Kern-Infos ausschließlich in Bildern
  • Maschinenlesbare Kontaktinformationen

• PWA

  • Manifest & Icons
  • Installierbar
  • Service Worker & Offline (optional)
  • Share Target, Shortcuts

• Security

  Security-Header A / A+

  • HTTPS & HSTS
  • Content Security Policy
  • X-Frame-Options, X-Content-Type-Options
  • Referrer & Permissions Policy
  • SRI, sichere Cookies, keine Secrets im Frontend

• HTML- & CSS-Qualität

  • Valides HTML5, keine doppelten IDs
  • Keine Inline-Styles / Inline-JS
  • Modulares CSS mit Variables & @layer
  • Container Queries, :has(), clamp(), aspect-ratio
  • Lightning CSS, kein ungenutztes CSS

• JavaScript-Qualität

  • ES2024+, Module, TypeScript
  • Tree Shaking, Lazy Imports
  • Event Delegation, moderne Browser-APIs
  • Kein globaler Scope, kein unnötiges Framework

• Bilder, Video & Fonts

  • AVIF / WebP mit JPG-Fallback, <picture>, srcset, sizes
  • Lazy Loading, decoding=async, width/height gesetzt
  • EXIF entfernt
  • Video lazy, preload=none, Poster, mehrere Formate
  • WOFF2, preload, font-display: swap, Subsetting, Variable Fonts

• Social Media

  • Open Graph Previews (Titel, Beschreibung, Bild)
  • Twitter / X Card
  • Social Links
  • Share Buttons für WhatsApp, Telegram, X & Co.

• Testing & Validierung

  • Lighthouse CI
  • Playwright & Vitest
  • Accessibility- & Visual-Regression-Tests
  • HTML / CSS / JS Validierung, Broken-Link-Check

• Analytics & Datenschutz

  • Datenschutzkonform (DSGVO)
  • Consent Mode
  • Plausible / Matomo, optional GA4

• Deployment & Wartbarkeit

  • Automatischer Build & Minifizierung
  • AVIF/WebP-Generierung, Sitemap, Robots, Manifest
  • .br / .gz, Hashing, Source Maps (optional)
  • Rollback-Möglichkeit
  • Komponenten, Dokumentation, Changelog, Versionen