KlarDev Webentwicklung
Technische Fallstudie

100/100 Lighthouse für JCI-Medizintourismus

Skalierbare Plattform für 30+ Kliniken und 200+ Ärzte. Astro Content Collections, Zod-Validierung und Fuse.js Suche für maximale Performance und Datensicherheit.

#Astro 5.0 #Tailwind #Zod Schema #Fuse.js
Herausforderung

Komplexität trifft auf Performance-Schulden

Die Aufgabe bestand nicht nur darin, eine langsame Seite zu optimieren. Es galt, ein komplexes Ökosystem aus 4 verknüpften Content-Typen performant abzubilden. Der Legacy-Code litt unter massiven Render-Blockaden.

Relationale Datenstruktur

Dynamische Verknüpfung von Ärzten, JCI-Kliniken und Behandlungen ohne Datenbank-Overhead.

Echtzeit-Indizierung

Client-Side Suche (Fuse.js) über 1000+ medizinische Einträge mit weniger als 100ms Latenz.

Layout-Thrashing

95ms Blockierzeit im Main-Thread durch aggressive Event-Listener im alten Header.

2.5s LCP Verzögerung

Kritischer Pfad blockiert durch nicht-async geladene Leaflet-Maps und schwere Bundles.

Lösungsansätze

1. Typensichere Content-Architektur

Statt lose gekoppelter JSON-Dateien setzte ich auf Astro Content Collections mit strenger Zod-Validierung. Dies garantiert Datenintegrität über alle Relationen (Ärzte ↔ Kliniken) hinweg bereits zur Build-Zeit.
content/config.ts
const doctors = defineCollection({
  type: 'content',
  schema: z.object({
    name: z.string(),
    // Referentielle Integrität garantiert
    hospitalId: reference('hospitals'),
    specialties: z.array(z.string()).min(1),
    isJciCertified: z.boolean().default(false)
  })
});

2. Island Architecture & Lazy Hydration

Schwere Komponenten wie interaktive Karten blockierten den LCP. Durch Astros Island Architecture und manuelles Hydration-Handling wurde dies behoben. Der Code wird erst geladen, wenn der Nutzer zur Sektion scrollt.
MapIsland.js
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    // Lädt Leaflet.js (140KB) nur bei Bedarf
    await import('../libs/leaflet-map.js');
    initMap(data);
    observer.disconnect();
  }
});

Offline-First (PWA)

Service Worker Strategie für Caching von kritischen Ressourcen. Ermöglicht Zugriff auf Daten auch ohne Netz.

Next-Gen Assets

Automatische Konvertierung zu AVIF/WebP. Aggressives Caching reduziert Wiederholungsbesuche um 70%.

Zero Layout Shift

Reservierung von Platzhaltern (Skeletons) für asynchrone Inhalte. CLS Score von stabilen 0.005.

Datenschutz & Analytics

Granulares Consent-Management. Tracking-Skripte (GA4) werden erst nach expliziter Zustimmung geladen.

Projektstart

Bereit für den nächsten Schritt?

Unverbindlich, strukturiert und ohne Verkaufsdruck

Bereit für den nächsten Schritt?

Beschreiben Sie kurz Ihr Vorhaben. Sie erhalten eine konkrete Ersteinschätzung zu Machbarkeit, Budget und Timeline — in der Regel innerhalb von 24h.

Antwortgarantie

Ihre Daten sind sicher (DSGVO-konform). Keine Kaltakquise.