TEST & AUDIT • IA & DÉVELOPPEMENT WEB
J’ai créé un site web avec l’IA : est-il réellement prêt à être livré à un client ?
Les générateurs de sites web basés sur l’intelligence artificielle sont désormais capables de produire une interface complète en quelques minutes. Mais entre un site qui semble professionnel et un site réellement prêt à être livré à un client, il peut y avoir une différence importante.
J’ai donc décidé de faire le test avec Lovable. Je lui ai donné le brief d’une entreprise fictive de rénovation intérieure, puis j’ai analysé le résultat comme je le ferais avant la livraison d’un véritable projet client.
Design, responsive, performances, SEO, accessibilité, code, fonctionnalités et maintenabilité : voici ce que j’ai réellement trouvé.
Le principe du test
Pour éviter de biaiser l’expérience, je n’ai pas demandé à l’IA d’utiliser une architecture technique particulière.
Je ne lui ai pas non plus donné une longue liste d’instructions concernant Lighthouse, le SEO technique, l’accessibilité ou l’optimisation du code.
Je lui ai donné quelque chose de beaucoup plus proche de ce qu’un client pourrait fournir à un prestataire : un brief.
L’entreprise fictive s’appelle RÉNOVA. Elle est spécialisée dans la rénovation intérieure.
Le site devait notamment contenir :
- une page d’accueil ;
- une présentation des services ;
- des réalisations ;
- une page À propos ;
- un formulaire de demande de devis ;
- une navigation responsive ;
- une identité visuelle premium et chaleureuse.
J’ai également demandé une identité utilisant principalement du beige, du crème et du terracotta, avec de grandes photographies et une mise en page plus éditoriale que « startup ».
Une fois la première version générée, j’ai volontairement évité de multiplier les corrections avant de commencer mon analyse.
Le résultat obtenu avec un seul prompt m’a surpris
Je m’attendais à obtenir quelque chose de relativement générique.
Pourtant, le résultat est beaucoup plus convaincant que prévu.
Lovable a correctement interprété la direction artistique demandée : tons crème, beige et terracotta, grandes photographies, typographie éditoriale et relativement peu d’effets visuels inutiles.
La page d’accueil possède également une vraie structure :
- hero ;
- présentation de l’entreprise ;
- services ;
- réalisations ;
- comparaison avant/après ;
- chiffres clés ;
- témoignages ;
- appel à l’action.
Visuellement, nous ne sommes clairement plus face à un simple prototype généré à la va-vite.
À ce stade, quelqu’un qui regarde uniquement l’interface pourrait facilement penser que le site est pratiquement terminé.
Mais une jolie homepage n’est évidemment pas suffisante pour juger un projet web.
J’ai donc commencé par lancer Lighthouse.
Les résultats Lighthouse m’ont mis une première claque
C’est probablement à ce moment-là que mon expérience a commencé à prendre une tournure différente de celle que j’avais imaginée.
Voici les résultats obtenus sur la version générée.
| Critère | Mobile | Desktop |
|---|---|---|
| ⚡ Performance | 80 | 99 |
| ♿ Accessibilité | 96 | 96 |
| ✅ Bonnes pratiques | 100 | 100 |
| 🔎 SEO | 100 | 100 |
Un score de 99 en performance sur ordinateur et 100 en SEO dès cette première version est difficile à ignorer.
Surtout que mon prompt ne disait pas : « Obtiens-moi un score Lighthouse de 100 ».
Premier constat : l’IA faisait déjà mieux que ce que j’avais imaginé avant de commencer le test.
Mais attention.
Un score Lighthouse de 100 ne signifie absolument pas qu’un site est terminé ou prêt à être livré.
Lighthouse contrôle certains critères techniques. Il ne sait pas si une demande de devis arrive réellement chez le client, si le projet sera facilement maintenable ou si toutes les fonctionnalités métier sont réellement connectées.
Il fallait donc aller plus loin.
J’ai ensuite ouvert le code généré par l’IA
C’était probablement la partie que j’attendais le plus.
Une IA peut parfaitement produire une belle interface tout en générant derrière une architecture difficile à comprendre ou à reprendre.
J’ai donc récupéré le projet généré pour regarder ce qu’il y avait réellement derrière.
Et là encore : première surprise.
La base du projet est plutôt correctement structurée.
On retrouve notamment :
- React ;
- TypeScript ;
- TanStack Start / Router ;
- Tailwind CSS ;
- des routes séparées ;
- des composants réutilisables ;
- des données centralisées ;
- une organisation relativement cohérente.
Le header et le footer sont par exemple isolés dans leurs propres composants.
Les services, projets, témoignages et informations principales sont également centralisés plutôt que recopiés manuellement partout dans le projet.
Je m’attendais à trouver beaucoup plus de code jetable. Ce n’est pas ce que j’ai trouvé.
Puis j’ai trouvé quelque chose d’intéressant dans le formulaire
C’est ici que l’on commence réellement à voir la différence entre une interface qui semble terminée et un site réellement prêt pour un client.
La page de contact contient un formulaire complet avec :
- nom ;
- prénom ;
- e-mail ;
- téléphone ;
- type de projet ;
- localisation ;
- budget ;
- message.
Visuellement, tout semble fonctionner.
Lorsque l’utilisateur valide le formulaire, l’interface lui indique même :
« Votre demande est bien enregistrée »
Mais en regardant le code, voilà ce que j’ai trouvé :
function onSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
setEnvoye(true);
}
Le formulaire empêche simplement le comportement classique du navigateur puis affiche l’écran de confirmation.
Dans cette version, il n’y a pas encore :
- d’appel vers une API ;
- d’envoi d’e-mail ;
- d’enregistrement dans une base de données.
Pour une démonstration, cela peut parfaitement se comprendre.
Pour un vrai client en revanche, je ne pourrais évidemment pas livrer le formulaire dans cet état.
Le SEO obtient 100/100… mais est-il vraiment terminé ?
C’est un excellent exemple des limites d’une note automatique.
Le travail généré est déjà sérieux.
Les différentes routes possèdent notamment leurs propres titres et meta descriptions.
Des métadonnées sociales sont également présentes sur plusieurs pages.
Le document utilise correctement la langue française :
<html lang="fr">
Le projet contient également un fichier robots.txt.
Mais avant de considérer le SEO réellement terminé pour un client, j’ajouterais encore plusieurs éléments :
- des URL canoniques ;
- une image Open Graph correctement configurée ;
- des données structurées adaptées à l’entreprise ;
- un sitemap XML vérifié ;
- une vérification de l’indexation ;
- une véritable stratégie de mots-clés ;
- un travail SEO local.
100/100 dans Lighthouse ne signifie donc pas 100 % du travail SEO réalisé.
L’accessibilité est mieux traitée que je ne l’imaginais
Lighthouse obtient ici un score de 96/100.
L’inspection du code montre également plusieurs bonnes pratiques.
Les champs du formulaire sont associés à des labels, les images possèdent des textes alternatifs et le bouton du menu mobile dispose par exemple d’un libellé accessible :
aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
Ce sont des détails simples, mais ils sont encore régulièrement oubliés dans des sites développés manuellement.
Je ne considérerais toutefois jamais Lighthouse comme un audit d’accessibilité complet.
Pour une vraie livraison, je contrôlerais encore :
- la navigation entièrement au clavier ;
- les états de focus ;
- l’ordre de tabulation ;
- les contrastes ;
- les composants interactifs ;
- le comportement avec les technologies d’assistance.
Performance : excellent sur desktop, perfectible sur mobile
Le résultat desktop est particulièrement impressionnant avec 99/100.
Sur mobile, le score descend à 80/100.
Ce n’est absolument pas un mauvais résultat pour une première génération, mais cela montre qu’un travail d’optimisation reste possible.
Sur une véritable mise en production, j’analyserais plus précisément :
- les formats WebP ou AVIF ;
- les dimensions réellement servies selon les écrans ;
- le Largest Contentful Paint ;
- le chargement des polices ;
- le JavaScript réellement nécessaire ;
- le comportement sur une connexion mobile plus lente.
Est-ce que je pourrais reprendre et maintenir ce code ?
Pour moi, c’est l’une des questions les plus importantes.
Un site peut obtenir d’excellentes performances aujourd’hui et devenir un cauchemar à maintenir dans deux ans.
Sur ce point, la base générée par Lovable est loin d’être mauvaise.
Les pages sont séparées, certains composants sont mutualisés et les données principales sont regroupées.
Cela signifie qu’un développeur qui récupère le projet n’est pas obligé de repartir immédiatement de zéro.
J’ai néanmoins remarqué une quantité relativement importante de composants UI et de dépendances pour un site finalement assez simple.
Ce n’est pas forcément dramatique pour les performances finales, notamment grâce au tree-shaking.
Mais pour un projet que je dois maintenir plusieurs années, je préférerais nettoyer les éléments inutilisés.
C’est toute la différence entre :
« Le code fonctionne. »
et :
« Je suis prêt à maintenir ce projet pendant plusieurs années. »
Il faut cependant prendre en compte une grosse limite dans mon test
J’ai réalisé cette expérience avec la version gratuite de Lovable.
Et surtout : j’ai atteint ma limite de crédits avant de pouvoir finaliser complètement le projet.
Il serait donc malhonnête de prendre le formulaire actuel et de conclure :
« Lovable est incapable de faire fonctionner un formulaire. »
Ce que cette expérience permet réellement de dire est :
« Voici jusqu’où j’ai réussi à aller avec cette première génération et les crédits disponibles pendant mon test. »
Avec davantage de crédits et d’itérations, il aurait été possible de continuer à connecter les fonctionnalités manquantes.
Et cela soulève finalement une nouvelle question que je trouve presque plus intéressante que le test initial :
Combien de crédits, d’itérations et de temps faut-il réellement pour passer de « wow, l’IA m’a créé un site » à « OK, je peux maintenant le livrer à mon client » ?
Le bulletin de cette première version
Ces notes évaluent uniquement la V1 obtenue pendant cette expérience.
Il ne s’agit pas d’une note définitive de Lovable.
| Critère | Note | Mon constat |
|---|---|---|
| 🎨 Design | 9/10 | Direction artistique cohérente et résultat très crédible dès la première génération. |
| 📱 Responsive | 9/10 | Bonne adaptation générale et navigation mobile dédiée. |
| ⚡ Performance | 8,5/10 | 99 desktop et 80 mobile. Très solide pour une V1. |
| 🔎 SEO technique | 9/10 | Excellentes bases mais le travail SEO complet va au-delà de Lighthouse. |
| ♿ Accessibilité | 9/10 | 96 Lighthouse et plusieurs bonnes pratiques déjà intégrées. |
| 👨💻 Qualité du code | 8,5/10 | Structure beaucoup plus propre et organisée que ce que j’imaginais. |
| 🔧 Maintenabilité | 8/10 | Bonne base, avec néanmoins un nettoyage possible des dépendances et composants inutiles. |
| ⚙️ Fonctionnalités | 6/10 | La vitrine fonctionne, mais certaines fonctionnalités n’ont pas pu être finalisées dans cette V1. |
Je ne donne volontairement pas de note précise à la sécurité.
La version testée est essentiellement un site vitrine sans véritable backend métier, authentification ou traitement de données complexe.
Une note de sécurité serait beaucoup plus pertinente après l’ajout de ces fonctionnalités.
Alors… est-ce que je livrerais ce site à un client ?
Dans son état actuel : non.
Mais cette réponse est beaucoup moins négative que ce que j’imaginais avant de commencer cette expérience.
Je ne le livrerais pas principalement parce que certaines fonctionnalités doivent encore être finalisées et parce que je voudrais effectuer quelques contrôles supplémentaires avant la mise en production.
Mais si la question devient :
« Cette première version constitue-t-elle une base suffisamment sérieuse pour devenir un vrai site client ? »
Ma réponse est clairement : oui.
Et c’est probablement la conclusion qui m’a le plus surpris.
Avant ce test, j’imaginais que le rôle du développeur serait principalement de venir corriger tout ce que l’IA avait mal fait.
Après avoir réellement testé le résultat, je vois plutôt son rôle évoluer.
Le développeur doit désormais être capable de :
- définir correctement le besoin ;
- donner les bonnes instructions à l’IA ;
- contrôler ce qu’elle produit ;
- identifier ce qui fonctionne réellement ou seulement en apparence ;
- connecter les fonctionnalités métier ;
- sécuriser le projet ;
- optimiser ce qui doit l’être ;
- garantir sa maintenabilité.
L’IA ne supprime donc pas forcément le travail du développeur. Elle est peut-être surtout en train de déplacer une partie de son travail.
Et vu la vitesse à laquelle ces outils progressent, je pense que la question va devenir de plus en plus intéressante.
→ Tester vous-même le site RÉNOVA généré pendant cette expérience
La prochaine expérience
Ce premier test m’a surtout donné envie d’aller plus loin.
La question n’est finalement plus vraiment :
« Est-ce qu’une IA sait créer un site web ? »
La réponse commence à devenir assez évidente.
La question qui m’intéresse maintenant est plutôt :
Jusqu’où peut-on réellement aller avec l’IA avant d’avoir besoin d’intervenir soi-même dans le code ?
C’est ce que je vais continuer à tester dans les prochains articles.
FAQ
Peut-on réellement créer un site professionnel avec Lovable ?
Cette expérience montre que Lovable peut produire une base très convaincante pour un site professionnel. Une vérification humaine et la finalisation des fonctionnalités restent cependant nécessaires avant une véritable livraison.
Un score Lighthouse de 100 signifie-t-il que le site est parfait ?
Non. Lighthouse contrôle un ensemble de critères techniques mais ne vérifie pas l’intégralité du fonctionnement métier, de la maintenabilité, du SEO avancé ou de la sécurité d’un projet.
Faut-il encore savoir développer pour utiliser une IA comme Lovable ?
Pas nécessairement pour générer une première version. Les compétences techniques deviennent en revanche particulièrement utiles lorsqu’il faut auditer, corriger, connecter, sécuriser et maintenir le projet.
Pourquoi le formulaire ne fonctionne-t-il pas réellement dans ce test ?
La version analysée affiche une confirmation côté interface mais ne possède pas encore de traitement backend. Le test ayant été réalisé avec des crédits gratuits limités, le projet n’a pas pu être poussé jusqu’à cette étape.
Est-ce que je pourrais reprendre le code généré par Lovable ?
Sur ce projet précis, oui. L’architecture obtenue est suffisamment claire pour servir de base à une reprise par un développeur, même si je procéderais à plusieurs vérifications et nettoyages avant de poursuivre le développement.