State of the art. Für dein Event.

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