Eine moderne Website für die Versicherungsagentur Teuflisch gut versichert aus Stuttgart liefert gute Einblicke in die Leistungsfähigkeit der Jamstack-Architektur. Das Projekt löste das zentrale Problem, eine eigenständige Online-Präsenz außerhalb der standardisierten Beraterseiten der Versicherungsgesellschaft zu schaffen.
Die technische Umsetzung mit Next.js, GitHub und Netlify ermöglichte eine performante, wartungsarme Lösung. Die Website erreicht Google PageSpeed Scores von weit über 90 Punkten sowohl für Desktop als auch Mobile und bietet damit deutlich schnellere Ladezeiten als herkömmliche CMS-Systeme.
Über das Projekt
Die Versicherungsagentur Teuflisch gut versichert unter Leitung von Andreas Teufel betreut Kunden im Raum Stuttgart. Als selbstständiger Generalagent der Württembergischen Versicherung konzentriert sich das dreiköpfige Team auf private Vorsorge.
Der Leistungsbereich umfasst private Krankenversicherung, private Zahnzusatzversicherung, ETF-Rentenversicherung und betriebliche Altersvorsorge. Die Agentur hat ihren Standort in der Regerstraße 19 in Stuttgart und setzt auf persönliche Beratung vor Ort sowie online.
Die Herausforderung
Alle Unterseiten der Berater auf der Hauptseite der Württembergischen Versicherung folgen einem identischen Layout. Der Anpassungsspielraum beschränkt sich auf minimale Textänderungen. Die Corporate-Design-Vorgaben lassen keine individuelle Gestaltung zu.
Andreas Teufel benötigte einen zusätzlichen Akquisekanal für seine Fokusgebiete. Gleichzeitig sollte eine professionelle digitale Visitenkarte entstehen. Die Anforderungen umfassten eine eigenständige und Cookie-freie Website mit vollständiger Gestaltungsfreiheit, Unabhängigkeit vom Corporate Design der Versicherung, Fokus auf individuelle Beratungsschwerpunkte sowie technische Voraussetzungen für eine organische Reichweite durch erfolgreiche Suchmaschinenoptimierung.
Warum eine Jamstack-Architektur?
Jamstack steht für JavaScript, APIs und Markup. Diese Architektur trennt Frontend und Backend konsequent. Statische Seiten werden zur Build-Zeit generiert und über Content Delivery Networks ausgeliefert. Die Vorteile für ein Versicherungsbüro liegen auf der Hand.
Hohe Performance: Vorab gerenderte Seiten reduzieren Ladezeiten drastisch.
Verbesserte Sicherheit: Fehlende Datenbank-Angriffsflächen zur Laufzeit minimieren Risiken.
Einfache Skalierbarkeit: Problemloses Handling von Traffic-Spitzen.
Kosteneffizienz: Hosting spart monatliche Ausgaben.
Versicherungsmakler benötigen keine dynamischen Inhalte wie Shop-Systeme. Der Fokus liegt auf Informationsvermittlung und Kontaktaufnahme.
Der Tech-Stack im Detail
| Technologie | Funktion | Begründung | Details |
|---|---|---|---|
| Next.js 14 | Frontend-Framework | React-basiertes Framework mit Server-Side Rendering und Static Site Generation. Bietet optimale Performance durch automatisches Code-Splitting und Image-Optimierung. | App Router, TypeScript-Support |
| GitHub | Versionsverwaltung | Zentrale Code-Verwaltung mit Branch-Management. Trigger für automatisierte Deployments über Git-Commits. | Main Branch für Production |
| Netlify | Hosting & CDN | Globales Content Delivery Network mit automatischem HTTPS. Serverless Functions für Formular-Verarbeitung. | Edge-Locations weltweit |
| Tailwind CSS | Styling-Framework | Utility-First CSS-Framework für responsive Designs. Minimiert CSS-Dateigrößen durch Purging ungenutzter Klassen. | JIT-Compiler aktiviert |
| React 19 | UI-Komponenten | Moderne Komponentenarchitektur für wiederverwendbare UI-Elemente. Hooks für State-Management. | Functional Components |
Die Technologien greifen nahtlos ineinander. Als Entwickler committen wir unseren Work und Code in das GitHub-Repository. Netlify erkennt automatisch Änderungen im Main Branch. Der Build-Prozess startet. Next.js generiert statische HTML-Seiten. Das Ergebnis wird auf Netlify Edge-Servern deployed. Besucher erhalten vorab gerenderte Seiten vom nächstgelegenen Server.
Projektverlauf und Umsetzung
Das Projekt wurde in einem Zeitraum von 9 Wochen realisiert:
Anforderungsanalyse und Konzeption: Workshop mit dem Kunden zur Erfassung aller Anforderungen. Erstellung eines Wireframe-Prototyps. Definition der Seitenstruktur und Informationsarchitektur. Abstimmung der Designrichtung und Farbschemata.
Design und UI/UX-Entwicklung: Erstellung der Designvorlagen. Entwicklung eines responsiven Layouts für alle Bildschirmgrößen. Definition der Typografie und Farben. Optimierung der User Journey für Conversion.
Technische Implementierung: Setup des Next.js-Projekts mit TypeScript. Entwicklung aller Seiten und Komponenten. Integration von Tailwind CSS für das Styling. Anbindung von Kontaktformularen über Netlify Forms folgt. Implementierung der Bildoptimierung.
Testing und Deployment: Performance-Tests mit Lighthouse. Cross-Browser-Testing. Mobile-Testing auf verschiedenen Geräten. Finale Abnahme durch den Kunden. Deployment auf Netlify Production.
Website-Konzept und UI/UX-Design
Das Design folgt modernen Webstandards und die Farbgebung orientiert sich am Markennamen mit dezenten Akzenten. Die Navigation beschränkt sich auf fünf Hauptpunkte für optimale Übersichtlichkeit. Call-to-Action-Buttons in auffälliger Farbe leiten Besucher zur Kontaktaufnahme. Das Hero-Element auf der Startseite kommuniziert sofort den Leistungskern.
Portraits der drei Teammitglieder sind in Produktion und schaffen Vertrauen. Die Typografie nutzt systemschonende Webfonts für schnelle Ladezeiten. Whitespace sorgt für Lesbarkeit. Die mobile Ansicht optimiert die Navigation durch ein Burger-Menü. Alle Interaktionselemente haben ausreichende Touch-Targets. Kontrastverhältnisse erfüllen WCAG-Standards für Barrierefreiheit.
Content-Strategie und Struktur
Die Informationsarchitektur umfasst fünf Hauptseiten. Die Startseite präsentiert das Leistungsversprechen und das Team. Vier Leistungsseiten erklären private Krankenversicherung, private Zahnzusatzversicherung, ETF-Rentenversicherung und betriebliche Altersvorsorge. Kontaktmöglichkeiten sind auf jeder Seite prominent platziert.
Die Suchmaschinenoptimierung erfolgte durch Keyword-Recherche für jede Leistung inkl. Texterstellung auf Basis eines Content Templates. Meta-Titel und Descriptions folgen Best Practices. Strukturierte Daten nach Schema.org verbessern die Darstellung in Suchergebnissen. Headlines folgen einer logischen Hierarchie. Relevante interne Links stärken die Seitenstruktur.
Technische Implementierung
Next.js wurde mit Static Site Generation konfiguriert. Alle Seiten werden zur Build-Zeit gerendert. Das App-Router-System organisiert die Seitenstruktur. GitHub speichert den gesamten Source Code. Ein Commit in den Main Branch triggert automatisch einen Build auf Netlify. Der Build-Prozess dauert durchschnittlich 90 Sekunden.
Netlify führt den Build aus und deployed die Ergebnisse. Performance-Optimierungen umfassen:
Automatisches Code-Splitting: Next.js teilt JavaScript-Bundles nach Routes auf.
Image-Komponente: Optimiert Bilder automatisch (WebP-Format).
Lazy Loading: Bilder werden erst beim Scrollen geladen.
Critical CSS: Wird inline eingebunden für schnelles Initial Rendering.
Performance-Messwerte und Ergebnisse
Die Performance-Analyse erfolgte mit Google PageSpeed Insights auf der Live-URL:
Desktop Score: 98 / 100
Mobile Score: 97 / 100
LCP (Largest Contentful Paint): 1 Sekunde
FID (First Input Delay): < 100 ms
CLS (Cumulative Layout Shift): < 0,1
TTFB (Time to First Byte): Ø 200 ms
Diese Werte übertreffen branchentypische WordPress-Websites deutlich. Vergleichbare CMS-basierte Versicherungswebsites erreichen oft nur Scores zwischen 60 und 80 Punkten.
SEO-Optimierung der Website
On-Page-Optimierungen erfolgten für alle Seiten. Meta-Titel enthalten relevante Keywords und bleiben unter 60 Zeichen. Meta-Descriptions fassen den Seiteninhalt in 150-160 Zeichen zusammen. Canonical Tags verhindern Duplicate Content. Open Graph Tags optimieren die Social-Media-Darstellung. Strukturierte Daten erhöhen die Sichtbarkeit. Die XML-Sitemap wird automatisch generiert. Robots.txt steuert das Crawling. Core Web Vitals erfüllen Googles Anforderungen. Interne Verlinkung folgt einer Hierarchie. Alle Bilder haben beschreibende Alt-Tags.
Responsive Design und Mobile Optimierung
Die Mobile-First-Strategie prägte die Entwicklung von Beginn an. Breakpoints wurden bei 640px, 768px, 1024px und 1280px definiert. Die mobile Navigation nutzt ein Hamburger-Menü. Touch-Targets haben mindestens 44x44 Pixel. Schriftgrößen skalieren zwischen 16px und 18px für optimale Lesbarkeit. Bilder passen sich automatisch an die Bildschirmbreite an.
Die Desktop-Navigation zeigt alle Menüpunkte horizontal. Hover-Effekte funktionieren nur auf Desktop-Geräten. Mobile PageSpeed Scores über 95 belegen die erfolgreiche Optimierung. Der Lighthouse-Report zeigt grüne Werte für alle Core Web Vitals.
Deployment-Prozess mit GitHub und Netlify
Das Git-Repository folgt einer Main-Branch-Strategie. Feature-Entwicklung erfolgt in separaten Branches. Pull Requests ermöglichen Code-Reviews vor dem Merge. Ein Push in den Main Branch triggert automatisch ein Deployment. Netlify erhält eine Webhook-Benachrichtigung.
Der Build-Server zieht den aktuellen Code. Next.js Build-Command generiert die statischen Assets. Der Build-Prozess dauert 60 bis 120 Sekunden. Preview Deploys entstehen automatisch für jeden Pull Request.
Jeder Branch erhält eine eigene Preview-URL. Rollbacks sind mit einem Klick möglich. Branch Deploys ermöglichen A/B-Testing verschiedener Versionen.
Hosting und Infrastruktur
Netlify hostet die Website auf einem globalen Content Delivery Network. Edge-Locations in Europa, Nordamerika und Asien liefern die Inhalte aus. Die Bandbreite skaliert automatisch bei Traffic-Spitzen. HTTPS-Verschlüsselung erfolgt automatisch über Let's Encrypt.
Die Kosten belaufen sich auf null Euro monatlich im Free-Plan. Bei höherem Traffic würde der Personal-Plan 9 USD monatlich kosten. Die Skalierbarkeit ermöglicht problemlos mehrere tausend Besucher täglich. CDN-Caching reduziert die Serverlast auf nahezu null.
Sicherheitsaspekte der Jamstack-Architektur
Statische Websites eliminieren gängige Sicherheitsrisiken. SQL-Injection ist unmöglich ohne Datenbank-Verbindung zur Laufzeit. Cross-Site-Scripting-Angriffe haben weniger Angriffsfläche. Die Trennung von Frontend und Backend schützt Systeme. HTTPS-Verschlüsselung läuft standardmäßig. DDoS-Attacken fangen CDN-Provider ab.
Updates beschränken sich auf das Build-System. npm-Pakete werden regelmäßig auf Vulnerabilities geprüft. Dependabot warnt automatisch bei Sicherheitslücken. Das Prinzip der minimierten Angriffsfläche erhöht die Gesamtsicherheit signifikant.
Content-Verwaltung und Aktualisierung
Inhaltsänderungen erfolgen direkt im Source Code. Die Markdown-Dateien enthalten alle Texte. Änderungen werden lokal in einem Editor vorgenommen. Ein Git Commit speichert die Änderungen. Der Push in das Repository startet den Build. Nach 90 Sekunden sind Änderungen live. Technische Kenntnisse in Markdown sind erforderlich.
Ein Headless CMS wäre für umfangreichere Content-Anforderungen sinnvoll. Der aktuelle Workflow eignet sich für seltene Content-Updates. Bilder werden im Public-Ordner gespeichert. Die Build-Zeit bleibt auch bei Hunderten von Bildern unter zwei Minuten.
Conversion-Optimierung und Call-to-Actions
Primäre Conversion-Ziele sind Kontaktanfragen per Telefon oder E-Mail. Die Telefonnummer erscheint prominent im Header auf allen Seiten. Call-to-Action-Buttons nutzen kontrastreiche Farben. Der Hauptbutton trägt die Aufschrift "Jetzt Beratung vereinbaren".
Die E-Mail-Adressen aller drei Teammitglieder sind verlinkt. Social Proof durch zukünftige Teamfotos und persönliche Statements schafft Vertrauen. Die User Journey führt von Information zu Kontaktmöglichkeiten. Exit-Intent-Popups wurden bewusst vermieden.
Rechtliche Anforderungen und Datenschutz
Die DSGVO-Konformität prägte die technische Umsetzung. Das Impressum nennt Agenturinhaber, Anschrift, Kontaktdaten und zuständige Aufsichtsbehörde. Die Datenschutzerklärung erklärt die Verarbeitung personenbezogener Daten.
Auf Cookies oder Tracking-Instrumente wurde ganzheitlich verzichtet. SSL-Verschlüsselung schützt die Datenübertragung.
Kosten und Projektbudget
Gesamtkosten: 812 Euro (inkl. aller Texte und Entwicklung).
Laufende Kosten: 0 EUR monatlich für Hosting (Netlify Free Plan).
Domain: ca. 12 EUR jährlich.
Ersparnis: Keine Wartungskosten für Datenbanken oder Server. Im Vergleich zu WordPress (oft 20-50 EUR/Monat Hosting + Wartung) spart Jamstack über fünf Jahre mehrere hundert Euro.
Projektdauer und Zeitplan
Das Projekt startete am 01.07.2025 und endete am 30.09.2025. Die Gesamtdauer betrug neun Wochen. Konzeption und Design dauerten drei Wochen. Die Implementierung beanspruchte vier Wochen. Testing und Optimierung nahmen zwei Wochen in Anspruch.
Verzögerungen gab es bei der Content-Erstellung durch den Kunden. Die technische Umsetzung verlief plangemäß. Netlify-Setup funktionierte schneller als eingeplant. Die initiale Domain-Konfiguration dauerte 24 Stunden.
Für wen eignet sich diese Lösung?
Jamstack-Websites eignen sich für verschiedene Unternehmenstypen. Versicherungsmakler profitieren von Performance und Sicherheit. Einzelunternehmer benötigen professionelle digitale Visitenkarten. Rechtsanwälte und Steuerberater setzen auf Seriosität. Handwerksbetriebe präsentieren Leistungen und Referenzen.
Kleine bis mittlere Unternehmen ohne E-Commerce-Anforderungen sind ideal. Anforderungen umfassen ein Budget von etwa 1.000 EUR.
Bereitschaft zur modernen Technologie ist notwendig. Content-Updates sollten nicht täglich erfolgen (sonst wird einfach ein Headless CMS implementiert). Technische Grundkenntnisse erleichtern die Pflege.
Fokus auf Information und Lead-Generierung passt optimal.
Wann ist Jamstack die beste Wahl?
Corporate Websites profitieren von Geschwindigkeit und Sicherheit. Portfolio-Websites für Kreative zeigen Arbeiten optimal. Landing Pages für Marketing-Kampagnen laden blitzschnell. Blogs mit regelmäßigen Updates funktionieren hervorragend.
Content-Strukturen mit Hierarchie eignen sich gut. Monatliche Updates sind völlig ausreichend. Besucherzahlen zwischen 1.000 und 100.000 monatlich sind ideal. Höhere Traffic-Spitzen handhabt das CDN problemlos.
Was sollte vermieden werden?
Komplexe Webanwendungen mit User-Dashboards passen weniger. User-generierter Content erfordert Backend-Systeme. Echtzeit-Features wie Chat benötigen Server. Große E-Commerce-Shops mit tausenden Produkten sind anspruchsvoll. Häufige Content-Updates mehrmals täglich erschweren Workflows. Technische Hürden entstehen bei komplexen Datenstrukturen. Häufige Fehler umfassen falsche Technology-Auswahl. Mangelnde Build-Optimierung verlängert Deploy-Zeiten.
Wie sieht Erfolg aus?
Erfolgreiche Jamstack-Projekte erfüllen definierte KPIs. Google PageSpeed Score über 90 für Desktop und Mobile. Ladezeit der Startseite unter zwei Sekunden. Core Web Vitals im grünen Bereich bei allen Metriken. Conversion-Rate-Steigerung um 20 bis 30 Prozent.
Bessere Suchmaschinen-Rankings für Ziel-Keywords. Qualitative Faktoren umfassen Kundenzufriedenheit mit Performance. Reduzierter Wartungsaufwand spart Zeit und Kosten. Positive Anwendererfahrung durch schnelle Ladezeiten. Keine Sicherheitsvorfälle oder Ausfälle.
Learnings aus dem Projekt
Die Jamstack-Architektur überzeugte durch Stabilität. Next.js Image-Optimierung sparte Entwicklungszeit. Tailwind CSS beschleunigte das Styling erheblich. Netlify funktionierten ohne großen Aufwand.
Die Herausforderung bestand in der initialen Build-Zeit-Optimierung. Code-Splitting musste manuell optimiert werden. Der Kunde benötigte Einarbeitung in Git-Workflows. Content-Updates dauerten länger als bei WordPress. Bei einem größeren Projekt könnte ein Headless CMS sinnvoll sein.
Vergleich: Jamstack vs. WordPress
| Kriterium | Jamstack (Next.js) | WordPress |
|---|---|---|
| Performance | 90+ PageSpeed Score | 60-80 PageSpeed Score |
| Sicherheit | Minimale Angriffsfläche | Regelmäßige Updates nötig |
| Wartungsaufwand | Gering, keine Updates | Hoch, Plugin-Updates |
| Kosten | 0-9 USD monatlich | 20-100 USD monatlich |
| Skalierbarkeit | Automatisch via CDN | Server-Upgrade nötig |
| Flexibilität | Volle Kontrolle | Theme-Abhängigkeit |
| Lernkurve | Steiler für Nicht-Entwickler | Niedriger |
| Hosting-Optionen | Netlify, Vercel, AWS, Cloudflare | Shared, VPS, Managed |
Jamstack punktet bei Performance und Sicherheit. WordPress bietet einfachere Content-Verwaltung. Die richtige Wahl hängt von Anforderungen und Budget ab.
Best Practices für Jamstack-Projekte
Frühzeitige Performance-Analyse: etabliert Benchmarks. Lighthouse-Tests ab Tag eins integrieren.
Component-basierte Architektur: ermöglicht Wiederverwendbarkeit. Atomic Design Principles anwenden.
Bildoptimierung: von Anfang an einplanen. Next.js Image-Komponente konsequent nutzen. WebP und AVIF-Formate bereitstellen.
Git-Workflow: im Team definieren. Branch-Strategie dokumentieren. Code-Reviews etablieren.
CI/CD-Pipeline: früh aufsetzen. Automatische Tests vor Deployment. Preview-Deployments für Reviews nutzen.
Dokumentation: für Kunden erstellen. Markdown-Syntax erklären. Git-Grundlagen vermitteln.
Monitoring: von Anfang an aktivieren. Core Web Vitals tracken. Error-Tracking implementieren.
Barrierefreiheit: in Design integrieren. WCAG-Standards erfüllen. Kontraste und Alt-Tags prüfen.
Fazit und Zusammenfassung
Die Case Study Website für Teuflisch gut versichert zeigt die Stärken der Jamstack-Architektur. Next.js ermöglichte performante statische Generierung bei vollständiger Gestaltungsfreiheit. GitHub und Netlify automatisierten den Deployment-Prozess vollständig. Die Ergebnisse überzeugen mit PageSpeed Scores über 95 und minimalen Ladezeiten. Hauptvorteile sind Performance, Sicherheit und niedrige Betriebskosten.
Das Projekt eignet sich als Vorbild für KMU mit Informations-Websites. Der Lösungsweg lässt sich auf Unternehmer, Dienstleister und Handwerksbetriebe übertragen. Vielen Dank an Andreas und Eva Teufel das Projekt als Teil unserer Case Studies und als Webdesign-Inspiration verwenden zu dürfen.