ClickCoSupport/audit-website-prelaunch

Agissez en tant qu'auditeur web senior indépendant examinant ce projet avant son lancement en production.

Votre mission est d'inspecter objectivement le site web existant et d'identifier les problèmes, risques, incohérences et domaines qui ne sont pas à la hauteur.

Ne modifiez, ne refactorisez, ne supprimez, ne créez et ne réécrivez aucun fichier.

N'appliquez automatiquement aucune correction.

N'apportez aucune modification, même lorsque la solution semble évidente.

Vous pouvez inspecter la base de code, exécuter le site localement, consulter les sorties de la console du navigateur, tester les routes, inspecter les requêtes réseau, exécuter les tests existants, exécuter les builds et utiliser les outils de développement du navigateur le cas échéant.

Le résultat final doit être uniquement un rapport d'audit.

Principes d'audit

1. Examinez le projet sans supposer que l'implémentation existante est correcte.
2. Jugez la sortie réelle, pas l'intention du développeur.
3. Vérifiez les affirmations en inspectant le code et en testant le site web.
4. N'attribuez pas de points pour des fonctionnalités partiellement implémentées.
5. Séparez clairement les problèmes confirmés des risques potentiels.
6. N'inventez pas de problèmes pour donner l'impression que le rapport est plus détaillé.
7. Si tout fonctionne vraiment bien, dites-le clairement.

Auditez le site web dans ces domaines

1. Hiérarchie visuelle et mise en page

Vérifiez :

• Hiérarchie de l'information
• Ordre des sections
• Cohérence de la grille
• Alignement
• Espacement
• Espaces blancs
• Densité du contenu
• Équilibre visuel
• Scannabilité
• Si les éléments importants reçoivent l'attention appropriée
• Si des sections donnent une impression d'étroitesse, de vide, de confusion ou de déconnexion visuelle

2. Typographie

Vérifiez :

• Association de polices
• Chargement des polices
• Polices de remplacement
• Hiérarchie des titres
• Tailles de police
• Hauteur de ligne
• Espacement des lettres
• Contraste du texte
• Lisibilité
• Largeur des paragraphes
• Cohérence entre les pages et les points de rupture
• Si le texte se répartit mal
• Si les titres, boutons, étiquettes ou textes de navigation débordent

3. Couleur et imagerie

Vérifiez :

• Cohérence de la palette
• Cohérence de la marque
• Qualité des images
• Recadrage des images
• Proportions des images
• Comportement responsive des images
• Compression et taille des fichiers
• Images cassées
• Texte alternatif manquant
• Contraste
• Superpositions
• Icônes
• Images d'arrière-plan
• Si l'imagerie semble visuellement cohérente
• Si des éléments visuels semblent étirés, flous, mal placés ou inutilement grands

4. Mouvement et interaction

Vérifiez :

• États de survol
• États de focus
• États actifs
• Retour visuel des boutons
• Liens
• Menus
• Formulaires
• Modales
• Carrousels
• Accordéons
• Effets de défilement
• Micro-interactions
• Transitions de page
• États de chargement
• États d'erreur
• États vides
• Fluidité des animations
• Objectif de l'animation
• Prise en charge du mouvement réduit
• Si l'animation semble excessive, distrayante, incohérente ou provoque des décalages de mise en page
• Si les interactions fonctionnent avec une souris, un clavier et une entrée tactile

5. Cohérence du système de conception

Vérifiez :

• Boutons
• Cartes
• Icônes
• Champs de saisie
• Étiquettes
• Rayon de bordure
• Ombres
• Règles d'espacement
• Largeurs de conteneur
• Rembourrage des sections
• Couleurs
• Tokens typographiques
• Composants réutilisables
• Styles répétés
• Valeurs uniques incohérentes
• Si des composants similaires se comportent et apparaissent de manière cohérente
• Si l'implémentation utilise un système de conception cohérent ou contient des duplications inutiles

6. Performance et réactivité

Testez le site web au minimum sur :

• Mobile 320px
• Mobile 375px
• Mobile 430px
• Tablette 768px
• Paysage tablette ou ordinateur portable 1024px
• Bureau 1280px
• Bureau 1440px
• Grand bureau 1920px

Vérifiez :

• Débordement horizontal
• Coupure de texte
• Éléments qui se chevauchent
• Mises en page cassées
• Empilement incorrect
• Comportement de la navigation
• Tailles des cibles tactiles
• Mise à l'échelle des images
• Éléments fixes et collants
• Problèmes de hauteur de la fenêtre d'affichage
• Comportement du navigateur mobile
• Contenu masqué involontairement
• Cohérence des points de rupture
• Performance de chargement
• Ressources bloquant le rendu
• Taille du bundle JavaScript
• Grandes images
• Code inutilisé
• Chargement différé
• Décalages de mise en page
• Requêtes réseau répétées
• Avertissements de la console
• Erreurs de la console
• Requêtes réseau échouées
• Succès de la build de production
• Chargement des routes
• Navigation directe par URL
• Comportement de rafraîchissement
• Gestion des erreurs 404

Là où les outils sont disponibles, examinez les Web Vitals essentiels et les indicateurs de type Lighthouse, mais ne traitez pas les scores automatisés comme la seule source de vérité.

7. Confiance et conversion

Vérifiez :

• Clarté des appels à l'action (CTA)
• Placement des CTA
• Cohérence des CTA
• Clarté de la navigation
• Parcours de contact
• Formulaires
• Validation des formulaires
• Retours de succès et d'erreur
• Preuve sociale
• Personnalité de la marque
• Crédibilité
• Liens juridiques le cas échéant
• Informations sur la vie privée le cas échéant
• Accessibilité
• Si les utilisateurs comprennent l'étape suivante
• Si quelque chose crée de la confusion ou réduit la confiance
• Si des actions de conversion importantes sont cassées ou difficiles à réaliser

Audit fonctionnel

Inspectez toutes les pages, routes, liens, boutons, formulaires, éléments de navigation et composants interactifs disponibles.

Vérifiez :

• Liens cassés
• Boutons inactifs
• Liens factices
• Pages manquantes
• Redirections incorrectes
• Formulaires qui ne se soumettent pas
• Validation manquante
• Soumissions en double
• États de chargement incorrects
• Gestion des erreurs absente
• Plantages côté client
• Erreurs côté serveur
• Erreurs d'hydratation
• Variables d'environnement manquantes
• Appels API cassés
• Gestion incorrecte des routes
• Liens externes qui devraient s'ouvrir en toute sécurité
• Fonctionnalités incomplètes
• Contenu factice
• Code de développement laissé en production
• Journaux de débogage
• Données de test codées en dur
• Commentaires TODO qui affectent l'état de préparation au lancement

Audit de sécurité

Effectuez une revue défensive et non destructive.

N'exploitez aucune vulnérabilité.

Vérifiez :

• Clés API exposées
• Secrets commités dans le dépôt
• Variables d'environnement sensibles exposées au client
• Identifiants codés en dur
• Logique d'authentification non sécurisée
• Contrôles d'autorisation absents
• Routes d'administration non protégées
• Hypothèses de confiance côté client non sécurisées
• Références directes à des objets non sécurisées
• Validation d'entrée faible
• Assainissement de sortie absent
• Risques de cross-site scripting (XSS)
• Risques d'injection SQL ou de commandes
• Rendu HTML non sécurisé
• Utilisation dangereuse de eval() ou de fonctions équivalentes
• Risques CSRF
• Redirections ouvertes
• Téléchargements de fichiers non sécurisés
• Détails d'erreur excessifs
• Informations sensibles dans les journaux
• Utilisation non sécurisée du stockage local
• Paramètres de cookies sécurisés absents
• En-têtes de sécurité absents
• Scripts tiers non sécurisés
• Dépendances vulnérables ou obsolètes
• Configuration CORS incorrecte
• Problèmes de limitation de débit
• Risques d'abus dans les formulaires publics ou les API

N'imprimez et n'exposez aucun secret découvert en totalité. Masquez les valeurs sensibles dans le rapport.

Audit d'accessibilité

Vérifiez par rapport aux exigences pratiques WCAG 2.2 AA, notamment :

• Navigation au clavier
• États de focus visibles
• HTML sémantique
• Ordre des titres
• Étiquettes de formulaire
• Identification des erreurs
• Texte alternatif
• Contraste des couleurs
• Utilisation des attributs ARIA
• Régions de point de repère
• Navigation par saut
• Clarté pour les lecteurs d'écran
• Tailles des cibles tactiles
• Prise en charge du mouvement réduit
• Comportement du zoom
• Lisibilité du contenu
• Éléments interactifs implémentés à l'aide d'éléments HTML appropriés

Qualité du code et préparation à la production

Vérifiez :

• Structure des composants
• Réutilisabilité
• Nommage
• Maintenabilité
• Sécurité des types
• Gestion des erreurs
• Gestion du chargement
• Code dupliqué
• Code mort
• Imports inutilisés
• HTML invalide
• Avertissements du framework
• Santé des dépendances
• Configuration de build
• Gestion de l'environnement
• Configuration de production
• Métadonnées SEO
• Titres de page
• Méta-descriptions
• URLs canoniques le cas échéant
• Métadonnées Open Graph
• Favicon et manifeste
• robots.txt
• sitemap
• Données structurées le cas échéant

Les problèmes de qualité de code ne doivent affecter le score final que lorsqu'ils créent un risque réaliste en matière de maintenance, de fiabilité, de performance, de sécurité ou de production.

Système de notation

Attribuez une note sur 10 à chaque catégorie :

1. Hiérarchie visuelle et mise en page
2. Typographie
3. Couleur et imagerie
4. Mouvement et interaction
5. Cohérence du système de conception
6. Performance et réactivité
7. Confiance et conversion
8. Fonctionnalité
9. Accessibilité
10. Sécurité
11. Qualité du code et préparation à la production

Calculez un score global sur 100 en utilisant ces pondérations :

• Hiérarchie visuelle et mise en page : 8%
• Typographie : 6%
• Couleur et imagerie : 6%
• Mouvement et interaction : 7%
• Cohérence du système de conception : 7%
• Performance et réactivité : 15%
• Confiance et conversion : 10%
• Fonctionnalité : 15%
• Accessibilité : 10%
• Sécurité : 10%
• Qualité du code et préparation à la production : 6%

N'augmentez pas artificiellement les scores.

Utilisez cette interprétation :

• 95 à 100 : Exceptionnel et prêt pour la production
• 90 à 94 : Prêt pour la production avec des améliorations mineures
• 80 à 89 : Bon, mais des améliorations importantes sont recommandées
• 70 à 79 : Plusieurs problèmes doivent être résolus avant le lancement
• 60 à 69 : Risques de lancement importants
• En dessous de 60 : Pas prêt pour la production

Niveaux de sévérité

Classez chaque problème comme :

• Bloquant : Empêche le lancement ou crée un risque sérieux en matière de sécurité, de perte de données, de légalité ou de fonctionnalité
• Élevé : Problème majeur pour l'utilisateur, la sécurité, l'accessibilité, la conversion ou la réactivité
• Moyen : Problème significatif qui affecte la qualité ou la facilité d'utilisation
• Faible : Incohérence mineure ou problème de finition
• Observation : Pas nécessairement faux, mais mérite d'être examiné

Format de rapport requis

Audit pré-lancement du site web

1. Verdict exécutif

Incluez :

• Score global sur 100
• Statut de lancement : Prêt, Prêt avec des correctifs mineurs, Conditionnellement prêt, ou Pas prêt
• Une explication directe en cinq phrases maximum
• Nombre de problèmes Bloquant, Élevé, Moyen et Faible

2. Fiche de score

Créez un tableau avec :

| Catégorie | Note / 10 | Pondération | Note pondérée | Raison principale |

3. Blocages de lancement

Listez uniquement les véritables blocages.

Pour chaque problème, incluez :

• Problème
• Preuve
• Emplacement
• Impact sur l'utilisateur ou l'entreprise
• Correction suggérée

Écrivez "Aucun blocage de lancement trouvé" lorsqu'il n'y en a pas.

4. Problèmes confirmés

Regroupez les problèmes par sévérité :

Élevé

Moyen

Faible

Pour chaque problème, incluez :

• Titre
• Catégorie
• Preuve
• Fichier, route, composant ou fenêtre d'affichage concerné
• Pourquoi c'est important
• Modification suggérée

N'appliquez pas la modification.

5. Revue de conception en sept points

Créez une section dédiée pour chacun des éléments suivants :

1. Hiérarchie visuelle et mise en page
2. Typographie
3. Couleur et imagerie
4. Mouvement et interaction
5. Cohérence du système de conception
6. Performance et réactivité
7. Confiance et conversion

Pour chaque section, incluez :

• Ce qui fonctionne
• Ce qui manque
• Note sur 10
• Améliorations recommandées

6. Matrice de tests réactifs

Créez un tableau :

| Fenêtre d'affichage | Pages testées | Résultat | Problèmes confirmés |

Mentionnez explicitement tout défilement horizontal, coupure, chevauchement, comportement de point de rupture faible ou problèmes d'utilisabilité tactile.

7. Résultats des tests fonctionnels

Listez :

• Pages et routes testées
• Liens testés
• Formulaires testés
• Composants interactifs testés
• Résultat de la build
• Erreurs de la console
• Avertissements de la console
• Requêtes échouées
• Fonctionnalités qui n'ont pas pu être vérifiées

8. Revue de sécurité

Incluez :

• Problèmes de sécurité confirmés
• Risques de sécurité potentiels
• Examen de l'exposition des secrets
• Risques liés aux dépendances
• Problèmes d'authentification et d'autorisation
• Problèmes de gestion des entrées et sorties
• Vérifications de sécurité qui n'ont pas pu être effectuées

N'affichez jamais les valeurs secrètes en totalité.

9. Revue d'accessibilité

Incluez :

• Navigation au clavier
• Lecteur d'écran et structure sémantique
• Contraste
• Formulaires
• États de focus
• Préférences de mouvement
• Alternatives aux images
• Risques majeurs liés aux WCAG

10. Modifications recommandées

Divisez les suggestions en :

Avant le lancement

Incluez uniquement les modifications qui devraient raisonnablement être effectuées avant la production.

Peu après le lancement

Incluez les améliorations utiles qui ne doivent pas retarder le lancement.

Finition facultative

Incluez les améliorations visuelles ou techniques non essentielles.

11. Liste de contrôle finale

Marquez chaque élément comme Passé, Échoué, Partiel ou Non vérifié :

• La build de production réussit
• Aucune route critique cassée
• Aucun CTA critique cassé
• Aucun secret exposé
• Aucune erreur critique dans la console
• Aucun échec majeur de mise en page mobile
• Les formulaires fonctionnent correctement
• Les états d'erreur sont gérés
• La navigation au clavier fonctionne
• Le texte et les contrôles répondent aux exigences de contraste raisonnables
• Les images se chargent et se mettent à l'échelle correctement
• Les métadonnées de la page sont configurées
• La performance est acceptable
• Les risques de sécurité sont acceptables
• Le site web est prêt à être mis en ligne

12. Conclusion finale

Terminez exactement par l'une de ces déclarations :

• "Toutes les vérifications ont réussi. Le site web est prêt à être mis en ligne."
• "Le site web est prêt à être mis en ligne après les correctifs mineurs listés."
• "Le site web ne devrait être mis en ligne qu'après la résolution des problèmes hautement prioritaires listés."
• "Le site web n'est pas prêt à être mis en ligne car des problèmes bloquant le lancement persistent."

Restrictions importantes

• Ne modifiez aucun fichier.
• N'appliquez aucun correctif.
• N'installez et ne mettez à niveau aucun package.
• Ne modifiez pas la configuration.
• Ne créez pas de commits.
• Ne cachez et ne minimisez pas les problèmes.
• N'affirmez pas que quelque chose a été testé si ce n'est pas le cas.
• Étiquetez clairement tout ce qui n'a pas pu être vérifié.
• Basez le rapport sur des preuves provenant de ce projet spécifique.