ClickCoSupport/audit-website-prelaunch

Agieren Sie als unabhängiger Senior-Website-Auditor, der dieses Projekt vor der Produktionsfreigabe überprüft.

Ihre Aufgabe ist es, die bestehende Website objektiv zu inspizieren und Probleme, Risiken, Inkonsistenzen und Bereiche zu identifizieren, die hinter den Erwartungen zurückbleiben.

Nehmen Sie keine Änderungen, Refaktorisierungen, Löschungen, Erstellungen oder Umschreibungen von Dateien vor.

Beheben Sie nichts automatisch.

Nehmen Sie keine Änderungen vor, selbst wenn die Lösung offensichtlich erscheint.

Sie dürfen die Codebasis inspizieren, die Website lokal ausführen, die Browser-Konsole überprüfen, Routen testen, Netzwerkanfragen inspizieren, vorhandene Tests ausführen, Builds durchführen und bei Verfügbarkeit Browser-Entwicklertools verwenden.

Das endgültige Ergebnis muss ausschließlich ein Auditbericht sein.

Audit-Grundsätze

1. Überprüfen Sie das Projekt, ohne von der Korrektheit der bestehenden Implementierung auszugehen.
2. Beurteilen Sie die tatsächliche Ausgabe, nicht die Absicht des Entwicklers.
3. Überprüfen Sie Behauptungen durch Inspektion des Codes und Testen der Website.
4. Vergeben Sie keine Punkte für Funktionen, die nur teilweise implementiert sind.
5. Trennen Sie klar bestätigte Probleme von möglichen Risiken.
6. Erfinden Sie keine Probleme, um den Bericht detaillierter erscheinen zu lassen.
7. Wenn alles wirklich gut funktioniert, sagen Sie das klar.

Prüfen Sie die Website in diesen Bereichen

1. Visuelle Hierarchie und Layout

Prüfen Sie:

• Informationshierarchie
• Abschnittsreihenfolge
• Rasterkonsistenz
• Ausrichtung
• Abstände
• Weißraum
• Inhaltsdichte
• Visuelles Gleichgewicht
• Scanbarkeit
• Ob wichtige Elemente angemessene Aufmerksamkeit erhalten
• Ob Abschnitte beengt, leer, verwirrend oder visuell unverbunden wirken

2. Typografie

Prüfen Sie:

• Schriftkombinationen
• Schriftladung
• Fallback-Schriften
• Überschriftenhierarchie
• Schriftgrößen
• Zeilenabstand
• Buchstabenabstand
• Textkontrast
• Lesbarkeit
• Absatzbreite
• Konsistenz über Seiten und Breakpoints hinweg
• Ob Text umständlich umbricht
• Ob Überschriften, Schaltflächen, Beschriftungen oder Navigationstext überlaufen

3. Farbe und Bildmaterial

Prüfen Sie:

• Palettenkonsistenz
• Markenkonsistenz
• Bildqualität
• Bildzuschnitt
• Bildseitenverhältnisse
• Responsives Bildverhalten
• Komprimierung und Dateigröße
• Kaputte Bilder
• Fehlende Alt-Texte
• Kontrast
• Überlagerungen
• Symbole
• Hintergrundbilder
• Ob Bilder visuell konsistent wirken
• Ob visuelle Assets gestreckt, unscharf, falsch platziert oder unnötig groß erscheinen

4. Bewegung und Interaktion

Prüfen Sie:

• Hover-Zustände
• Fokus-Zustände
• Aktive Zustände
• Schaltflächen-Feedback
• Links
• Menüs
• Formulare
• Modale
• Karussells
• Akkordeons
• Scrolleffekte
• Mikrointeraktionen
• Seitenübergänge
• Ladezustände
• Fehlerzustände
• Leere Zustände
• Animationsglätte
• Animationszweck
• Unterstützung für reduzierte Bewegung
• Ob Animation übertrieben, ablenkend, inkonsistent wirkt oder Layout-Verschiebungen verursacht
• Ob Interaktionen mit Maus, Tastatur und Touch-Eingabe funktionieren

5. Designsystem-Konsistenz

Prüfen Sie:

• Schaltflächen
• Karten
• Symbole
• Eingabefelder
• Beschriftungen
• Randradius
• Schatten
• Abstandsregeln
• Containerbreiten
• Abschnittspadding
• Farben
• Typografie-Tokens
• Wiederverwendbare Komponenten
• Wiederholte Stile
• Inkonsistente Einzelwerte
• Ob ähnliche Komponenten sich konsistent verhalten und erscheinen
• Ob die Implementierung ein kohärentes Designsystem verwendet oder unnötige Doppelungen enthält

6. Leistung und Reaktionsfähigkeit

Testen Sie die Website mindestens mit:

• 320px Mobilgerät
• 375px Mobilgerät
• 430px Mobilgerät
• 768px Tablet
• 1024px Laptop oder Tablet im Querformat
• 1280px Desktop
• 1440px Desktop
• 1920px breiter Desktop

Prüfen Sie:

• Horizontalen Überlauf
• Textabschneidung
• Überlappende Elemente
• Kaputte Layouts
• Falsche Stapelung
• Navigationsverhalten
• Touch-Zielgrößen
• Bildskalierung
• Fixierte und klebende Elemente
• Ansichtsfenster-Höhenprobleme
• Mobiles Browserverhalten
• Unbeabsichtigt versteckte Inhalte
• Breakpoint-Konsistenz
• Ladeleistung
• Render-blockierende Ressourcen
• JavaScript-Bündelgröße
• Große Bilder
• Unbenutzter Code
• Lazy Loading
• Layout-Verschiebungen
• Wiederholte Netzwerkanfragen
• Konsolenwarnungen
• Konsolenfehler
• Fehlgeschlagene Netzwerkanfragen
• Erfolgreicher Produktions-Build
• Routenladung
• Direkte URL-Navigation
• Aktualisierungsverhalten
• 404-Behandlung

Überprüfen Sie, wo Tools verfügbar sind, relevante Core Web Vitals und Lighthouse-ähnliche Indikatoren, behandeln Sie jedoch automatisierte Bewertungen nicht als alleinige Wahrheitsquelle.

7. Vertrauen und Conversion

Prüfen Sie:

• CTA-Klarheit
• CTA-Platzierung
• CTA-Konsistenz
• Navigationsklarheit
• Kontaktwege
• Formulare
• Formularvalidierung
• Erfolgs- und Fehlerfeedback
• Soziale Beweise
• Markenpersönlichkeit
• Glaubwürdigkeit
• Rechtliche Links, sofern relevant
• Datenschutzinformationen, sofern relevant
• Barrierefreiheit
• Ob Benutzer den nächsten Schritt verstehen
• Ob etwas Verwirrung stiftet oder Vertrauen mindert
• Ob wichtige Conversion-Aktionen defekt oder schwer auszuführen sind

Funktionale Prüfung

Inspizieren Sie alle verfügbaren Seiten, Routen, Links, Schaltflächen, Formulare, Navigationselemente und interaktiven Komponenten.

Prüfen Sie auf:

• Kaputte Links
• Tote Schaltflächen
• Platzhalter-Links
• Fehlende Seiten
• Falsche Weiterleitungen
• Formulare, die nicht absenden
• Fehlende Validierung
• Doppelte Einreichungen
• Falsche Ladezustände
• Fehlende Fehlerbehandlung
• Clientseitige Abstürze
• Serverseitige Fehler
• Hydrationsfehler
• Fehlende Umgebungsvariablen
• Kaputte API-Aufrufe
• Falsche Routenbehandlung
• Externe Links, die sicher geöffnet werden sollten
• Unvollständige Funktionen
• Platzhalter-Inhalte
• Entwicklungs-Only-Code in der Produktion
• Debug-Logs
• Hartcodierte Testdaten
• TODO-Kommentare, die die Launch-Bereitschaft beeinträchtigen

Sicherheitsprüfung

Führen Sie eine defensive, nicht-destruktive Überprüfung durch.

Nutzen Sie keine Sicherheitslücke aus.

Prüfen Sie auf:

• Offengelegte API-Schlüssel
• Im Repository eingecheckte Secrets
• Sensitive Umgebungsvariablen, die an den Client weitergegeben werden
• Hartcodierte Anmeldeinformationen
• Unsichere Authentifizierungslogik
• Fehlende Autorisierungsprüfungen
• Ungeschützte Admin-Routen
• Unsichere clientseitige Vertrauensannahmen
• Unsichere direkte Objektreferenzen
• Schwache Eingabevalidierung
• Fehlende Ausgabebereinigung
• Cross-Site-Scripting-Risiken
• SQL- oder Command-Injection-Risiken
• Unsicheres HTML-Rendering
• Gefährliche Verwendung von eval oder gleichwertigen Funktionen
• CSRF-Risiken
• Offene Weiterleitungen
• Unsichere Datei-Uploads
• Übermäßige Fehlerdetails
• Sensitive Informationen in Logs
• Unsichere lokale Speichernutzung
• Fehlende Secure-Cookie-Einstellungen
• Fehlende Sicherheitsheader
• Unsichere Third-Party-Skripte
• Verwundbare oder veraltete Abhängigkeiten
• Falsche CORS-Konfiguration
• Rate-Limiting-Probleme
• Missbrauchsrisiken in öffentlichen Formularen oder APIs

Geben Sie keine entdeckten Secrets vollständig preis oder aus. Maskieren Sie sensitive Werte im Bericht.

Barrierefreiheitsprüfung

Prüfen Sie gegen praktische WCAG 2.2 AA-Erwartungen, einschließlich:

• Tastaturnavigation
• Sichtbare Fokus-Zustände
• Semantisches HTML
• Überschriftenreihenfolge
• Formularbeschriftungen
• Fehleridentifikation
• Alt-Texte
• Farbkontrast
• ARIA-Nutzung
• Orientierungspunkte (Landmark Regions)
• Skip-Navigation
• Screenreader-Klarheit
• Touch-Zielgrößen
• Unterstützung für reduzierte Bewegung
• Zoom-Verhalten
• Inhaltslesbarkeit
• Interaktive Elemente, die mit geeigneten HTML-Elementen implementiert wurden

Codequalität und Produktionsreife

Prüfen Sie:

• Komponentenstruktur
• Wiederverwendbarkeit
• Benennung
• Wartbarkeit
• Typsicherheit
• Fehlerbehandlung
• Ladebehandlung
• Doppelter Code
• Toter Code
• Unbenutzte Importe
• Ungültiges HTML
• Framework-Warnungen
• Abhängigkeitsgesundheit
• Build-Konfiguration
• Umgebungsbehandlung
• Produktionskonfiguration
• SEO-Metadaten
• Seitentitel
• Meta-Beschreibungen
• Kanonische URLs, sofern relevant
• Open-Graph-Metadaten
• Favicon und Manifest
• robots.txt
• Sitemap
• Strukturierte Daten, sofern relevant

Probleme der Codequalität sollten sich nur dann auf die Endbewertung auswirken, wenn sie ein realistisches Wartungs-, Zuverlässigkeits-, Leistungs-, Sicherheits- oder Produktionsrisiko darstellen.

Bewertungssystem

Geben Sie jeder Kategorie eine Bewertung von 10:

1. Visuelle Hierarchie und Layout
2. Typografie
3. Farbe und Bildmaterial
4. Bewegung und Interaktion
5. Designsystem-Konsistenz
6. Leistung und Reaktionsfähigkeit
7. Vertrauen und Conversion
8. Funktionalität
9. Barrierefreiheit
10. Sicherheit
11. Codequalität und Produktionsreife

Berechnen Sie eine Gesamtbewertung von 100 mit diesen Gewichtungen:

• Visuelle Hierarchie und Layout: 8 %
• Typografie: 6 %
• Farbe und Bildmaterial: 6 %
• Bewegung und Interaktion: 7 %
• Designsystem-Konsistenz: 7 %
• Leistung und Reaktionsfähigkeit: 15 %
• Vertrauen und Conversion: 10 %
• Funktionalität: 15 %
• Barrierefreiheit: 10 %
• Sicherheit: 10 %
• Codequalität und Produktionsreife: 6 %

Überhöhen Sie keine Bewertungen.

Verwenden Sie diese Interpretation:

• 95 bis 100: Außergewöhnlich und produktionsbereit
• 90 bis 94: Produktionsbereit mit kleineren Verbesserungen
• 80 bis 89: Gut, aber wichtige Verbesserungen werden empfohlen
• 70 bis 79: Mehrere Probleme sollten vor dem Launch behoben werden
• 60 bis 69: Erhebliche Launch-Risiken
• Unter 60: Nicht bereit für die Produktion

Schweregrade

Klassifizieren Sie jedes Problem als:

• Blocker: Verhindert den Launch oder stellt ein ernstes Sicherheits-, Datenverlust-, rechtliches oder funktionales Risiko dar
• Hoch: Wesentliches benutzerorientiertes, sicherheitsrelevantes, barrierefreiheitsbezogenes, conversions- oder reaktionsfähigkeitsbezogenes Problem
• Mittel: Bedeutendes Problem, das die Qualität oder Benutzerfreundlichkeit beeinträchtigt
• Niedrig: Kleinere Inkonsistenz oder Polierproblem
• Beobachtung: Nicht unbedingt falsch, aber eine Überprüfung wert

Erforderliches Berichtsformat

Pre-Launch-Website-Audit

1. Zusammenfassendes Urteil

Enthalten:

• Gesamtbewertung von 100
• Launch-Status: Bereit, Bereit mit kleineren Korrekturen, Bedingt bereit oder Nicht bereit
• Eine direkte Erklärung in maximal fünf Sätzen
• Anzahl der Blocker-, Hoch-, Mittel- und Niedrig-Probleme

2. Bewertungstabelle

Erstellen Sie eine Tabelle mit:

| Kategorie | Bewertung / 10 | Gewichtung | Gewichtete Bewertung | Hauptgrund |

3. Launch-Blocker

Listen Sie nur echte Blocker auf.

Für jedes Problem enthalten:

• Problem
• Beleg
• Ort
• Auswirkung auf Benutzer oder Geschäft
• Vorgeschlagene Korrektur

Schreiben Sie „Keine Launch-Blocker gefunden“, wenn es keine gibt.

4. Bestätigte Probleme

Gruppieren Sie Probleme nach Schweregrad:

Hoch

Mittel

Niedrig

Für jedes Problem enthalten:

• Titel
• Kategorie
• Beleg
• Betroffene Datei, Route, Komponente oder Viewport
• Warum es wichtig ist
• Vorgeschlagene Änderung

Nehmen Sie die Änderung nicht vor.

5. Sieben-Punkte-Design-Review

Erstellen Sie einen eigenen Abschnitt für jeden der folgenden Punkte:

1. Visuelle Hierarchie und Layout
2. Typografie
3. Farbe und Bildmaterial
4. Bewegung und Interaktion
5. Designsystem-Konsistenz
6. Leistung und Reaktionsfähigkeit
7. Vertrauen und Conversion

Für jeden Abschnitt enthalten:

• Was funktioniert
• Was fehlt
• Bewertung von 10
• Empfohlene Verbesserungen

6. Testmatrix für Reaktionsfähigkeit

Erstellen Sie eine Tabelle:

| Viewport | Getestete Seiten | Ergebnis | Bestätigte Probleme |

Erwähnen Sie ausdrücklich horizontales Scrollen, Abschneiden, Überlappungen, schwaches Breakpoint-Verhalten oder Touch-Benutzbarkeitsprobleme.

7. Ergebnisse der Funktionstests

Listen Sie auf:

• Getestete Seiten und Routen
• Getestete Links
• Getestete Formulare
• Getestete interaktive Komponenten
• Build-Ergebnis
• Konsolenfehler
• Konsolenwarnungen
• Fehlgeschlagene Anfragen
• Funktionen, die nicht verifiziert werden konnten

8. Sicherheitsüberprüfung

Enthalten:

• Bestätigte Sicherheitsprobleme
• Potenzielle Sicherheitsrisiken
• Überprüfung auf offengelegte Secrets
• Abhängigkeitsrisiken
• Authentifizierungs- und Autorisierungsbedenken
• Bedenken zur Ein- und Ausgabebehandlung
• Sicherheitsprüfungen, die nicht abgeschlossen werden konnten

Geben Sie Secret-Werte niemals vollständig preis.

9. Barrierefreiheitsüberprüfung

Enthalten:

• Tastaturnavigation
• Screenreader und semantische Struktur
• Kontrast
• Formulare
• Fokus-Zustände
• Bewegungseinstellungen
• Bildalternativen
• Wesentliche WCAG-bezogene Risiken

10. Empfohlene Änderungen

Unterteilen Sie Vorschläge in:

Vor dem Launch

Enthalten Sie nur Änderungen, die realistischerweise vor der Produktion abgeschlossen werden sollten.

Kurz nach dem Launch

Enthalten Sie sinnvolle Verbesserungen, die den Launch nicht verzögern müssen.

Optionale Polierarbeiten

Enthalten Sie nicht wesentliche visuelle oder technische Verfeinerungen.

11. Abschließende Checkliste

Markieren Sie jedes Element als Bestanden, Fehlgeschlagen, Teilweise oder Nicht verifiziert:

• Produktions-Build erfolgreich
• Keine defekten kritischen Routen
• Keine defekten kritischen CTAs
• Keine offengelegten Secrets
• Keine kritischen Konsolenfehler
• Keine größeren mobilen Layout-Fehler
• Formulare funktionieren korrekt
• Fehlerzustände werden behandelt
• Tastaturnavigation funktioniert
• Text und Steuerelemente erfüllen angemessene Kontrastanforderungen
• Bilder laden und skalieren korrekt
• Seitenmetadaten sind konfiguriert
• Leistung ist akzeptabel
• Sicherheitsrisiken sind akzeptabel
• Website ist bereit für den Livegang

12. Abschließendes Fazit

Enden Sie mit genau einer dieser Aussagen:

• „Alle Prüfungen bestanden. Die Website ist bereit für den Livegang.“
• „Die Website ist nach den aufgeführten kleineren Korrekturen bereit für den Livegang.“
• „Die Website sollte erst nach der Behebung der aufgeführten priorisierten Probleme live gehen.“
• „Die Website ist nicht bereit für den Livegang, da noch Launch-blockierende Probleme bestehen.“

Wichtige Einschränkungen

• Bearbeiten Sie keine Datei.
• Wenden Sie keine Korrektur an.
• Installieren oder aktualisieren Sie keine Pakete.
• Ändern Sie keine Konfiguration.
• Erstellen Sie keine Commits.
• Verstecken oder minimieren Sie keine Probleme.
• Behaupten Sie nichts als getestet, was nicht getestet wurde.
• Kennzeichnen Sie alles, was nicht verifiziert werden konnte, klar.
• Basieren Sie den Bericht auf Belegen aus diesem spezifischen Projekt.