Micro-Sites · Qualitätsstandard 2026

State of the art. Für dein Event.

Eine moderne Website wird 2026 nicht mehr nur an „responsive + SEO" gemessen. Wir bauen jede Event-Micro-Site nach ca. 20 Qualitätsbereichen — von Performance über Barrierefreiheit nach BFSG bis LLM-Kompatibilität. Live-Beispiel: flashbacks.electronic-events.de.

Qualitätsbereiche im Detail

Performance

Ziel: 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)

Ziel: 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

Ziel: Lighthouse SEO 100

  • Title, Meta Description, Canonical
  • Robots.txt & Sitemap.xml
  • Open Graph & Twitter Card
  • JSON-LD: Event, Organization, Breadcrumb, FAQ
  • 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

Ziel: 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 (Instagram, SoundCloud, …)
  • 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

Qualitätsziele

Konkrete Kennzahlen, an denen wir jede Micro-Site messen.

Lighthouse Performance
95–100
Lighthouse Accessibility
100
Lighthouse Best Practices
100
Lighthouse SEO
100
WCAG
2.2 AA
HTML / CSS / JS Validation
0 Fehler
Core Web Vitals
alle grün
Security Header
A / A+
Structured Data
fehlerfrei
Mobile Friendly
100 %