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.