Deployment-Checkliste: Von localhost zu Production

Der Moment wenn deine Website von localhost auf Production geht ist der gefährlichste im gesamten Projekt. Auf localhost funktioniert alles perfekt — schnelles Internet, keine echten Nutzer, keine Suchmaschinen-Crawler. Production ist eine andere Welt: Langsame Mobilverbindungen, echte Browser-Vielfalt, Google das deine Seite bewertet, und Menschen die in 3 Sekunden entscheiden ob sie bleiben.

Diese Checkliste hat fünf Kategorien. Jeder Punkt ist eine Ja/Nein-Frage. Wenn ein Punkt „Nein" ist, fix ihn vor dem Deploy.

Merksatz: „Der teuerste Bug ist der den du nach dem Deploy findest."

Warum eine Deployment-Checkliste?

Der Unterschied zwischen localhost und Production

| localhost | Production |

|-----------|-----------|

| Dein Rechner (schnell) | Server irgendwo (Latenz) |

| Dein Browser (einer) | Alle Browser (hunderte Versionen) |

| Dein Netzwerk (Glasfaser) | Mobiles Internet (3G–5G) |

| Keine echten Nutzer | Echte Menschen mit Erwartungen |

| Kein Google | Google crawlt und bewertet |

| Keine Sicherheitsrisiken | Bots, Scanner, Hacker |

Was auf localhost funktioniert, kann auf Production scheitern. Diese Checkliste schließt die Lücke.

Kategorie 1 — Performance

Warum wichtig: Google misst die Ladezeit deiner Seite (Core Web Vitals). Nutzer erwarten unter 3 Sekunden. Jede Sekunde Verzögerung kostet 7% Conversion. (→ Core Web Vitals erklärt)

• [ ] Lighthouse Score > 90? Chrome DevTools → Lighthouse → Performance. Unter 90 = Handlungsbedarf.

• [ ] Bilder optimiert? WebP oder AVIF Format, responsive Sizes, Lazy Loading. Ein einziges 5 MB JPEG kann die Ladezeit verdoppeln. Tools: Squoosh, Next.js Image Component.

• [ ] Bundle Size unter Kontrolle? npm run build → Bundle-Größe prüfen. Über 500 KB JavaScript ist ein Warnsignal. Ursachen: Zu viele Dependencies, fehlendes Tree Shaking, nicht genutzter Code.

• [ ] Fonts optimiert? Webfonts mit font-display: swap laden. Maximal 2–3 Font-Dateien. Google Fonts über CDN oder selbst hosten (DSGVO!).

• [ ] Caching konfiguriert? Statische Assets (Bilder, CSS, JS) mit langen Cache-Zeiten ausliefern. Vercel und Netlify machen das automatisch — trotzdem prüfen.

Kategorie 2 — Security

Warum wichtig: Ein Sicherheitsproblem kann deine Website lahmlegen, Daten leaken oder Google-Rankings zerstören (Malware-Warnung). (→ Anti-Pattern Vibe Coding)

• [ ] HTTPS aktiv? Jede Seite muss über HTTPS erreichbar sein. HTTP → HTTPS Redirect eingerichtet. Bei Vercel/Netlify: automatisch. Bei eigenem Hosting: Let's Encrypt.

• [ ] Environment Variables gesetzt? API-Keys, Datenbank-Passwörter, Secret Keys — alles in Environment Variables auf dem Hosting-Provider. Nicht im Code. Nicht in Git.

• [ ] API-Keys nicht im Frontend? Öffne den Browser-Quellcode (View Source) und suche nach API-Keys, Tokens oder Passwörtern. Wenn du welche findest: sofort rotieren und in Backend/Server-Functions verschieben.

• [ ] Security Headers gesetzt? Mindestens: X-Content-Type-Options: nosniff, X-Frame-Options: DENY, Strict-Transport-Security. Bei Vercel: über next.config.js oder vercel.json.

• [ ] npm audit sauber? npm audit ausführen. Kritische Vulnerabilities vor dem Deploy fixen. Moderate können warten, High/Critical nicht.

• [ ] Kontaktformulare geschützt? Rate Limiting und Honeypot-Felder gegen Spam-Bots. reCAPTCHA wenn nötig.

Kategorie 3 — SEO

Warum wichtig: Wenn Google deine Seite nicht korrekt crawlen kann, existiert sie für Suchmaschinen nicht — egal wie gut der Content ist. (→ Technisches SEO einfach erklärt)

• [ ] Meta-Tags auf jeder Seite? Title (50–60 Zeichen), Description (150–160 Zeichen). Jede Seite braucht einzigartige Meta-Tags. Kein „Untitled" oder „Welcome to my website".

• [ ] Open Graph Tags? og:title, og:description, og:image für Social-Media-Vorschauen. Teste mit dem Facebook Sharing Debugger oder Twitter Card Validator.

• [ ] XML-Sitemap vorhanden? Unter /sitemap.xml erreichbar. Enthält alle indexierbaren Seiten. Bei Next.js: next-sitemap Package oder App Router Sitemap.

• [ ] robots.txt korrekt? Unter /robots.txt erreichbar. Erlaubt Googlebot das Crawlen. Enthält Sitemap-Verweis. Kein Disallow: / (blockiert alles!).

• [ ] Canonical-Tags gesetzt? Jede Seite hat einen self-referencing Canonical. Verhindert Duplicate Content zwischen www/non-www, HTTP/HTTPS, Trailing Slash.

• [ ] Strukturierte Daten? Mindestens: Article/BlogPosting für Blogbeiträge, LocalBusiness für lokale Unternehmen, FAQ für FAQ-Sektionen. Teste mit Google Rich Results Test.

• [ ] 404-Seite eingerichtet? Custom 404-Seite mit Navigation zurück zur Startseite. Nicht die Standard-Fehlerseite des Frameworks.

Kategorie 4 — Accessibility

Warum wichtig: 15% der Weltbevölkerung haben eine Behinderung. Barrierefreiheit ist nicht optional — in der EU wird sie ab 2025 (European Accessibility Act) für viele digitale Dienste Pflicht.

• [ ] Alt-Texte für alle Bilder? Jedes braucht ein alt-Attribut. Beschreibe was auf dem Bild zu sehen ist. Dekorative Bilder: alt="" (leer, aber vorhanden).

• [ ] Keyboard-Navigation? Kannst du die gesamte Website mit Tab, Enter und Escape bedienen? Ist der Fokus sichtbar (kein outline: none in CSS)?

• [ ] Kontrast ausreichend? Text-Hintergrund-Kontrast mindestens 4.5:1 (AA-Standard). Prüfen mit: Chrome DevTools → Accessibility oder WebAIM Contrast Checker.

• [ ] Heading-Hierarchie korrekt? H1 → H2 → H3 in logischer Reihenfolge. Keine übersprungenen Ebenen. Nur eine H1 pro Seite.

• [ ] Formulare beschriftet? Jedes Input-Feld hat ein zugehöriges . Fehlermeldungen sind verständlich und sichtbar.

Kategorie 5 — Monitoring & Backup

Warum wichtig: Nach dem Deploy musst du wissen wenn etwas kaputtgeht — bevor deine Nutzer es merken.

• [ ] Uptime Monitoring aktiv? Dienste wie UptimeRobot (kostenlos), Pingdom oder Better Stack prüfen alle 5 Minuten ob deine Seite erreichbar ist und alarmieren per E-Mail/SMS bei Ausfall.

• [ ] Error Tracking eingerichtet? Sentry (kostenloser Plan) oder Vercel Analytics fangen JavaScript-Fehler auf Production ab. Du siehst welche Fehler echte Nutzer erleben.

• [ ] Google Search Console eingerichtet? Property verifiziert, Sitemap eingereicht. Die Search Console ist dein Frühwarnsystem für Indexierungsprobleme und Crawl-Fehler.

• [ ] Analytics aktiv? Google Analytics, Plausible, oder Vercel Analytics — du brauchst Daten über Besucherverhalten. Ohne Daten optimierst du blind.

• [ ] Backup-Strategie? Git-Repository ist dein Code-Backup. Datenbank-Backups bei Supabase/PlanetScale automatisch. Trotzdem prüfen: Sind automatische Backups aktiv?

• [ ] DNS korrekt? Domain zeigt auf den richtigen Server. SSL-Zertifikat aktiv. www → non-www Redirect (oder umgekehrt) eingerichtet.

Die Kompakt-Checkliste (zum Ausdrucken)

Performance (5 Punkte)

• [ ] Lighthouse > 90
• [ ] Bilder optimiert (WebP, Lazy Loading)
• [ ] Bundle < 500 KB
• [ ] Fonts optimiert
• [ ] Caching aktiv

Security (6 Punkte)

• [ ] HTTPS aktiv + Redirect
• [ ] Environment Variables gesetzt
• [ ] Keine API-Keys im Frontend
• [ ] Security Headers
• [ ] npm audit sauber
• [ ] Formulare geschützt

SEO (7 Punkte)

• [ ] Meta-Tags auf jeder Seite
• [ ] Open Graph Tags
• [ ] XML-Sitemap
• [ ] robots.txt korrekt
• [ ] Canonical-Tags
• [ ] Strukturierte Daten
• [ ] Custom 404-Seite

Accessibility (5 Punkte)

• [ ] Alt-Texte für Bilder
• [ ] Keyboard-Navigation
• [ ] Kontrast ≥ 4.5:1
• [ ] Heading-Hierarchie
• [ ] Formulare beschriftet

Monitoring (6 Punkte)

• [ ] Uptime Monitoring
• [ ] Error Tracking
• [ ] Search Console
• [ ] Analytics
• [ ] Backup aktiv
• [ ] DNS korrekt

Gesamt: 29 Punkte. Ziel: 29/29 vor dem Go-Live.