Refonte de site web : les 7 étapes et les pièges à éviter (guide 2026)

Refaire un site web, c’est rarement un projet qui se passe comme prévu du premier coup. On a vu des refontes partir en vrille pour une simple raison : pas de méthode claire. Chez La Vague, on pilote des refontes WordPress et sur-mesure pour des TPE/PME depuis plusieurs années. Ce guide détaille les 7 étapes qu’on suit réellement, avec les pièges qu’on voit le plus souvent chez les clients qui arrivent après une première refonte ratée.

Avant d’entrer dans le détail, un point important sur le contexte 2026. Le mobile représente 59,6 % du trafic web mondial en 2025, et Google utilise la version mobile de votre site pour l’indexer. Les Core Web Vitals (LCP < 2,5 s, INP < 200 ms, CLS < 0,1) sont des signaux de ranking officiels. Une refonte qui ignore ces réalités est un échec annoncé.

Étape 1. Auditer le site existant avant de toucher à quoi que ce soit

C’est l’étape qu’on saute le plus souvent, et celle qui coûte le plus cher plus tard. Avant de parler design, stack ou arborescence, on part des données. Combien de pages réellement utiles ? Quel est le top 20 des URLs qui rapportent du trafic SEO ? Quelles pages ont des backlinks ? Quels formulaires convertissent ?

L’audit type couvre six axes : contenu (inventaire exhaustif des URLs), SEO (positions Search Console, backlinks, intention de recherche), performance (Core Web Vitals), design/UX, technique (hébergement, version CMS, plugins) et analytics (parcours, bounce, conversions). Sans ces données, vous refaites à l’aveugle.

Les pièges classiques de l’audit

Premier piège : refondre sans exporter la liste complète des URLs. On vous promet que « ça va aller », puis deux mois après la mise en ligne, vous perdez 40 % du trafic organique parce que personne n’a pensé aux 150 anciennes pages produit qui n’ont pas été redirigées.

Deuxième piège : confondre refonte et redesign. Si vos problèmes sont un tunnel de conversion cassé et un site trop lent, changer juste la charte graphique ne règle rien.

Indicateur de succès : vous devez pouvoir répondre sans hésiter à la question « quelles sont les 10 pages qui génèrent le plus de valeur business sur le site actuel ? » Si vous ne pouvez pas, l’audit n’est pas fini.

Étape 2. Cadrer le projet et rédiger un brief qui engage

Une fois l’audit posé, on définit ce qu’on veut obtenir. Pas « un site plus moderne », mais des objectifs chiffrés. Augmenter les demandes de devis de 30 % sur 6 mois. Réduire le coût d’acquisition. Générer 50 leads qualifiés par mois. Sans objectif mesurable, impossible de savoir si la refonte est un succès.

Le cadrage couvre aussi le périmètre fonctionnel (quoi, pas quoi), la cible (persona, parcours), le planning réaliste, le budget et les responsabilités côté client. Qui fournit les photos ? Qui valide quoi et en combien de temps ? Ces détails paraissent bateau, mais ce sont eux qui font qu’une refonte dure 6 semaines ou 6 mois.

Le cahier des charges, utile ou pas ?

Utile, oui, mais pas forcément un document de 60 pages. Pour une TPE, un CDC de 8 à 15 pages suffit largement : contexte, objectifs, cible, arborescence, liste des pages avec contenu clé, fonctionnalités attendues, contraintes techniques, planning, budget. Au-delà, c’est souvent du remplissage qui rassure mais ne sert à rien.

Indicateur de succès : le prestataire et vous êtes d’accord sur « ce qui est dans le scope » et « ce qui n’y est pas », par écrit.

Étape 3. Architecture de l’information et wireframes

Avant de dessiner quoi que ce soit de joli, on pose la structure. Arborescence (quelles pages, à quel niveau), hiérarchie du contenu sur chaque page, parcours de conversion. Cette étape se matérialise par des wireframes : des maquettes en noir et blanc, sans couleurs ni images, qui montrent uniquement les blocs et leur ordre.

L’intérêt des wireframes : on valide la logique avant l’esthétique. Trop de refontes se font valider sur un joli design Figma, et on se rend compte en production que le parcours d’achat a 3 étapes de trop ou que le menu principal oublie une catégorie clé.

Ce qu’on regarde sur les wireframes

Le premier écran (above the fold) doit répondre à trois questions en moins de 5 secondes : qu’est-ce que vous vendez, à qui, pourquoi je vous choisis. Le call-to-action principal doit être visible sans scroll sur mobile. La navigation doit tenir en 5 à 7 entrées maximum.

Piège courant : vouloir remettre toute l’info de l’ancien site sur la home. C’est exactement l’inverse qu’il faut faire. Une home page efficace guide vers la bonne page secondaire, elle ne remplace pas les pages secondaires.

Indicateur de succès : un utilisateur externe (pas vous, pas l’équipe) trouve l’info qu’il cherche en 3 clics maximum depuis la home, sans aide.

Étape 4. Design UI/UX

On passe maintenant au visuel. Charte couleurs, typographie, composants, iconographie, photos. Le design doit servir trois objectifs : refléter votre positionnement (haut de gamme, accessible, technique, créatif…), faciliter la lecture, et guider l’oeil vers les conversions.

Un bon design respecte quelques règles non négociables : contraste suffisant pour l’accessibilité (ratio WCAG AA minimum), hiérarchie typographique claire (pas plus de 2-3 tailles de titre), espace blanc généreux (les pages tassées sont des repoussoirs), cohérence des composants (un bouton = un style sur tout le site).

Le piège du design « trop agence »

Les sites récompensés aux Awwwards sont beaux, mais ne convertissent pas toujours. Un site TPE/PME n’a pas besoin d’animations complexes, de scroll parallax ou de menus cachés sophistiqués. Il a besoin que le visiteur comprenne immédiatement l’offre et trouve comment vous contacter.

Indicateur de succès : les maquettes fonctionnent aussi bien sur mobile (où se trouve la majorité du trafic) que sur desktop. Si le design mobile ressemble à « le desktop en plus petit », recommencez.

Étape 5. Intégration technique et développement

C’est la phase la plus longue en général. Choix de la stack (WordPress + Elementor, WordPress + bloc builder, headless, Next.js, Webflow, autre…), installation propre de l’environnement, développement des templates, intégration des contenus.

Sur WordPress, qui reste notre stack principale pour les TPE/PME, on privilégie les extensions à jour, bien maintenues, compatibles entre elles. On évite les thèmes trop lourds, les page builders qui empilent du code inutile, et les plugins qui dupliquent des fonctions existantes. Performance et maintenabilité priment.

Les tests qu’il faut vraiment faire

Tests cross-navigateurs (Chrome, Safari, Firefox, Edge), tests responsive (vrai smartphone, pas juste un mode responsive Chrome), tests de performance avec PageSpeed Insights et WebPageTest, tests d’accessibilité, tests fonctionnels (formulaires, tunnel de commande, espace client si applicable).

Piège courant : oublier de tester les formulaires. Un formulaire de contact cassé pendant 2 semaines, c’est des dizaines de leads perdus qu’on ne récupérera jamais.

Indicateur de succès : le site en staging passe tous les tests avant la mise en production. Pas « presque tous », tous.

Étape 6. Migration SEO et plan de redirections 301

C’est l’étape la plus critique techniquement, et celle qui fait le plus de dégâts quand elle est bâclée. Si les URLs changent entre l’ancien et le nouveau site, il faut mettre en place des redirections 301 (permanentes) qui envoient chaque ancienne URL vers sa nouvelle destination.

La méthode recommandée par Google Search Central est claire : exporter la liste complète des anciennes URLs, les mapper une à une vers leur équivalent sur le nouveau site, implémenter les 301 côté serveur, tester chaque redirection, soumettre le nouveau sitemap dans Search Console, utiliser l’outil Change of Address si le domaine change.

Les règles qui ne se négocient pas

Une 301, pas une 302 (la 302 est temporaire et ne transmet pas correctement l’autorité SEO). Pas de chaîne de redirections (URL A vers URL B vers URL C) : on redirige directement vers la destination finale. Pas de redirection massive vers la home quand une page disparaît : on envoie vers la page la plus proche en contenu, sinon Google traite ça comme une erreur « soft 404 ». On garde les 301 actives au moins 1 an, le temps que Google recrawle tout.

Piège fatal : oublier les URLs qui ont des backlinks externes. Un backlink sur une URL qui renvoie une 404, c’est de la valeur SEO partie à la poubelle. Un export depuis Search Console et Ahrefs (ou équivalent) est indispensable pour identifier ces URLs stratégiques.

Indicateur de succès : 30 jours après la mise en ligne, les positions Search Console sont stables ou en progression, pas de pic d’erreurs 404, trafic organique équivalent ou supérieur.

Étape 7. Go live et suivi post-lancement

La mise en production n’est pas la fin du projet, c’est le début de la phase la plus sensible. Les 30 premiers jours demandent un monitoring quotidien. C’est là qu’on détecte les bugs résiduels, les 404 oubliées, les formulaires qui déraillent, les problèmes de tracking.

Checklist de mise en ligne : backup complet de l’ancien site (on garde une copie complète au cas où), bascule DNS en heures creuses, vérification HTTPS, sitemap mis à jour dans Search Console, ancien site conservé en staging 30 jours minimum, vérification Analytics et Search Console.

Le suivi qui évite 90 % des catastrophes

Pendant les 48 premières heures : monitoring toutes les 2 heures (erreurs 500, pages blanches, formulaires, tunnel de commande). Les 30 premiers jours : vérification quotidienne de Search Console (erreurs d’exploration, pages indexées), Analytics (trafic, parcours), PageSpeed (Core Web Vitals).

Les études Google montrent que l’optimisation des Core Web Vitals peut réduire le taux de rebond de 24 % et augmenter les conversions de 15 %. Inversement, un site refait qui dégrade ses CWV perd en conversion ET en SEO. Le suivi n’est pas optionnel.

Indicateur de succès : à 90 jours post-lancement, les KPIs business (leads, conversions, trafic qualifié) sont en progression par rapport au site précédent. Si ce n’est pas le cas, la refonte a un problème à diagnostiquer.

Récap : combien de temps, combien ça coûte

Pour un site vitrine TPE/PME refait proprement avec ces 7 étapes, comptez entre 6 et 10 semaines de production effective, avec une implication du client sur les 3 premières étapes (audit, cadrage, validation des wireframes). Un e-commerce avec catalogue complexe et tunnel de commande, 10 à 16 semaines. Un applicatif sur-mesure, 3 à 6 mois.

Côté budget, une refonte sérieuse démarre rarement en dessous de 3 500 EUR pour un site vitrine simple, et monte rapidement à 8 000-15 000 EUR pour un e-commerce. Les offres à 500 EUR existent, mais elles sautent la moitié des étapes ci-dessus et finissent par coûter plus cher en réparations ou en re-refonte.

Les 3 pièges qui tuent une refonte

1. Pas de plan de redirections 301. On perd 30 à 60 % du trafic organique en quelques semaines. Irrécupérable sans reprise complète.
2. Pas d’objectifs mesurables. On refait parce que « le site fait daté », sans savoir ce qu’on veut obtenir. Résultat : impossible de dire si c’est un succès.
3. Pas de ressources côté client. Le prestataire attend photos, textes, validations… qui n’arrivent pas. Le projet traîne 6 mois au lieu de 2.

Combien de personnes dans votre équipe pour piloter

Côté client, une refonte propre demande l’implication active de 1 à 3 personnes maximum. Au-delà, on entre dans le terrain des comités qui multiplient les allers-retours et diluent les décisions.

Le profil idéal : un décideur final (gérant, directeur marketing, responsable digital) qui tranche les arbitrages, et optionnellement un référent contenu (interne ou externe) pour textes et photos. Si plusieurs services doivent donner leur avis (commercial, produit, RH pour la page carrière…), on consolide en amont, pas en plein dev.

Le rôle du chef de projet agence

Côté agence, un chef de projet dédié est indispensable au-delà d’un site vitrine de 5 pages. Son rôle : centraliser les demandes client, coordonner designers et développeurs, maintenir le planning, signaler les dérives. Sans lui, on perd 20 à 30 % d’efficacité en coordination interne.

Chez La Vague, Nicolas et Maya se répartissent ces rôles : Maya sur le design et la relation client, Nicolas sur le dev et le pilotage technique. Pour les clients, c’est un interlocuteur unique par domaine, pas de jeu du téléphone arabe.

Les outils qui font la différence

Quelques outils qui améliorent réellement la qualité d’une refonte (pas des gadgets marketing) :

• Figma pour les wireframes et maquettes, avec commentaires directs du client sur les designs
• Screaming Frog pour crawler l’ancien site et générer la liste d’URLs
• Google Search Console pour suivre les performances avant/après
• PageSpeed Insights pour vérifier les Core Web Vitals à chaque étape
• Trello ou Notion pour la gestion de projet partagée avec le client
• UptimeRobot pour le monitoring post-lancement

Ces outils sont quasi tous gratuits ou en freemium. Le coût n’est pas dans les outils, il est dans la méthode et le temps passé à les utiliser correctement.

Notre méthode chez La Vague

On suit ces 7 étapes à la lettre, pas pour cocher des cases, mais parce qu’on a vu ce qui se passe quand on en saute une. Audit avant tout, cadrage écrit avec objectifs chiffrés, wireframes validés avant design, développement testé avant mise en ligne, plan 301 exhaustif, suivi post-lancement sur 90 jours minimum.

Notre spécificité : on travaille sans commercial intermédiaire. Le prospect échange directement avec ceux qui vont concevoir et développer. Ça évite le téléphone arabe, les promesses commerciales qui ne tiennent pas en prod, et les budgets gonflés pour payer une structure. Pour des TPE/PME, c’est souvent la différence entre un projet qui aboutit et un projet qui s’enlise.

Si votre site actuel a plus de 4 ans, ne convertit pas, ou que vous avez un doute sur sa santé SEO avant de le refaire, on peut démarrer par un audit gratuit avec recommandations chiffrées. Ça vous évite de partir sur une refonte mal calibrée.