Les quality gates qui empêchent le slop IA.

Le slop IA, c'est le contenu généré qui passe la vérification superficielle mais qui contient des défauts substantiels : faute sémantique, lien cassé, accessibilité défaillante, performance dégradée, copy générique, ou bug visuel sur mobile. C'est le contenu qui paraît OK en preview mais qui ne tient pas la prod.

La source du slop : un LLM optimise la vraisemblance, pas la qualité technique. Il génère du HTML qui ressemble à du HTML, mais qui peut avoir trois h1, des attributs alt vides, un score Lighthouse à 50, et un rendu cassé en 320px. Sans vérification automatique, ces défauts passent en prod et ressortent comme reviews négatives, taux de conversion bas, ou pénalités SEO.

Les quality gates sont la réponse industrielle au problème. On ne fait pas confiance au LLM pour produire de la qualité, on vérifie automatiquement chaque livrable contre des critères mesurables.

Le premier gate est la performance brute, mesurée par Lighthouse sur mobile et desktop. Les seuils : 90+ en Performance, 90+ en Accessibility, 90+ en Best Practices, 90+ en SEO. Un site qui échoue à l'un de ces seuils est renvoyé en regénération avec une contrainte ciblée.

Les causes typiques d'échec : images non-optimisées (PNG 2 MB), fonts trop nombreuses, JavaScript bloquant inutile, attributs alt manquants, headings désordonnés. Chaque cause a une stratégie de correction automatisée : compression d'image en WebP, subset des fonts, defer du JS, génération d'alts cohérents avec le contenu.

Le gate Lighthouse est non-négociable : un site ne sort pas tant qu'il n'est pas vert. C'est un seuil dur, pas un objectif souple. La conséquence : on ne livre jamais de site avec un LCP à 5 secondes ou une accessibilité à 60.

Le deuxième gate est le rendu visuel testé par Playwright sur plusieurs breakpoints (320px, 768px, 1024px, 1440px). Playwright prend des screenshots, vérifie qu'aucun débordement horizontal n'existe (signe de overflow non maîtrisé), que tous les CTAs restent cliquables, et que la hiérarchie visuelle reste lisible.

Les bugs détectés à ce gate : titre qui déborde sur mobile parce que la font-size n'a pas de clamp, capture produit qui passe sous le hero en tablet, bouton qui sort de son container en 320px, image qui casse le ratio sur certains breakpoints.

C'est le gate qui rattrape le plus de problèmes de viewport. La règle d'Eufya, écrite en dur : aucune section ne doit déborder du viewport entre 320px et 2560px. Si Playwright détecte un overflow, c'est une regénération automatique.

Le troisième gate vérifie la structure HTML sémantique. Un seul h1 par page, hiérarchie des h2/h3/h4 cohérente (pas de saut de h2 à h4), présence des landmarks ARIA (header, nav, main, footer), labels sur tous les inputs de formulaire, alt text sur toutes les images de contenu.

Ces vérifications sont triviales mais ratées par 60 % des sites du web. La cause : on génère du HTML qui « ressemble » à du HTML sans vérifier qu'il est sémantiquement correct. Or la sémantique impacte directement l'accessibilité (lecteurs d'écran), le SEO (Google lit la structure), et la maintenabilité.

Le gate sémantique est rapide à exécuter (parsing du DOM) et bloque les défauts les plus communs. Les corrections sont aussi automatiques : si deux h1 sont détectés, l'un est rétrogradé en h2 selon le contexte.

Le quatrième gate est l'accessibilité visuelle, en particulier les contrastes texte/fond. La norme WCAG AA exige un contraste de 4.5:1 pour le texte normal et 3:1 pour le texte large. Beaucoup de sites IA génèrent du gris clair sur fond clair pour des sous-titres, ce qui passe l'œil mais échoue le test.

Le gate parcourt toutes les paires texte/fond du site et vérifie chaque ratio. Si un contraste insuffisant est détecté, le pipeline regénère la palette de cette zone avec une contrainte de contraste accrue.

À ce gate s'ajoute la vérification de l'accessibilité au clavier : tous les éléments interactifs doivent être atteignables par Tab, avec un focus visible. Les sites générés sans cette discipline ont souvent des focus invisibles ou inexistants, ce qui les rend inutilisables pour 5 % des utilisateurs.

Le cinquième gate vérifie la copy. Pas de fautes d'orthographe évidentes (vérification automatique), pas de buzzwords interdits par la charte éditoriale Eufya (innovant, next-gen, révolutionnaire, synergie, cutting-edge), pas de témoignages fabriqués, pas de chiffres non sourcés.

Les témoignages et chiffres sont particulièrement surveillés. Si le brief ne contient pas de témoignages réels fournis par l'utilisateur, le pipeline ne génère pas de témoignages fictifs — il insère un placeholder marqué « à compléter » ou il supprime la section. Pareil pour les chiffres : pas de stat inventée pour faire jolie.

Le gate de copy est partiellement automatique (détection de buzzwords, vérification orthographique) et partiellement basé sur les règles fournies par le brief (présence ou absence de logos clients réels, métriques fournies versus inventées).

Le sixième gate vérifie la présence et la validité du schema structuré. Au minimum : un schema Organization (avec nom, URL, logo, sameAs) et un schema WebSite (avec searchAction si applicable). Si le site est un blog, ajout du schema BlogPosting. Si c'est une landing produit, schema Product.

Les meta tags essentiels sont aussi vérifiés : title unique sous 60 caractères, description sous 160, og:title, og:description, og:image (vraie URL d'image, pas placeholder), twitter:card, canonical URL, et lang attribut sur le html.

Ce gate ne rend pas le site « SEO-optimisé » au sens compétitif (ça demande de la stratégie de contenu sur la durée), mais il garantit le SEO de base : pas de pénalité pour structure cassée, indexation correcte, partages sociaux propres. C'est le seuil de qualité minimum pour ne pas se tirer une balle dans le pied.

On pourrait imaginer un humain qui review chaque site avant livraison. C'est ce que font les agences. Le problème : c'est lent (1-2h par site review en profondeur), coûteux, et incohérent (deux reviewers humains ne détecteront pas exactement les mêmes problèmes).

Les quality gates automatisés sont rapides (3-5 minutes pour tous les gates), cohérents (les mêmes critères pour tous les sites), et exhaustifs (un humain oublie de tester en 320px, Playwright n'oublie jamais).

Le corollaire : les gates ne remplacent pas le jugement humain sur les questions de signature visuelle ou de positionnement stratégique. Ils s'occupent du socle technique mesurable, ce qui libère le temps humain pour les questions de fond. C'est la séparation qu'on défend : automatiser le vérifiable, humaniser le subjectif.