Exemple : refonte Next.js d'un cabinet de conseil

Exemple de situation. Cet article décrit une situation type, construite pour illustrer la démarche de refonte du site d'un cabinet de conseil. Ce n'est pas un projet client, et nous ne publions pas de chiffres de résultat : ils dépendent de chaque cabinet.

#Le point de départ : un site WordPress ancien

Prenons un cabinet de conseil en transformation organisationnelle, dont la clientèle est composée d'ETI et de grandes entreprises. Le positionnement est premium, les missions se négocient à un montant élevé et le cycle de vente est long. Dans cet univers, la réputation et la preuve sociale comptent plus que tout. Et pourtant, le site ressemble à celui d'une petite agence de communication d'il y a sept ans — parce que c'est exactement ce qu'il est.

Années sans refonte majeure, thème WordPress acheté il y a longtemps et jamais retravaillé, plugins qui s'accumulent (dont certains sans mise à jour depuis très longtemps), images non optimisées, aucun schéma de données structurées, un blog alimenté sans stratégie sémantique cohérente.

La direction prend conscience du problème en retravaillant son positionnement : elle veut aller chercher les marchés ETI en région, au-delà de son réseau existant. Pour cela, il faut exister sur Google. Et pour exister sur Google, il faut un site capable de performer.

---

#Diagnostic : l'audit complet

Avant toute ligne de code, une semaine d'audit exhaustif. Quatre dimensions sont analysées en parallèle.

Core Web Vitals et performance technique. On mesure le TTFB (Time to First Byte), le LCP (Largest Contentful Paint), le CLS (Cumulative Layout Shift) et les scores PageSpeed mobile et desktop, sur plusieurs jours pour lisser les variations. Un hébergement mutualisé d'entrée de gamme, non dimensionné pour le trafic ni pour le cache, explique l'essentiel d'un TTFB dégradé. Des images lourdes, non compressées, en JPEG sans WebP ni AVIF, expliquent un mauvais LCP.

SEO technique et sémantique. Profil de backlinks, pages indexées, contenus dupliqués, balises title et méta-descriptions manquantes, absence de balisage Schema.org. Les données de Search Console sur 12 mois révèlent des impressions et des clics faibles, une position moyenne médiocre : le site n'existe pas sur les requêtes à intention commerciale.

Conversion et analytics. Taux de rebond, durée de session, pages vues par session, et surtout le nombre de leads qualifiés (MQL) que le site génère réellement. Souvent, les leads viennent du réseau direct (LinkedIn, bouche-à-oreille) et non du site : il est consulté par des prospects déjà convaincus pour valider une décision prise ailleurs.

Expérience utilisateur et contenu. Aucune page de cas clients structurée. Aucun outil de calcul ou d'aide à la décision. Formulaire de contact standard en bas de page, pas de CTA contextuels, pas de téléchargements, pas de prise de rendez-vous intégrée. Les pages de services décrivent des offres mais ne répondent à aucune question que poserait un décideur ETI en phase d'évaluation.

Diagnostic final : un site qui n'est pas en état de jouer le rôle qu'on lui demande. La refonte n'est pas une évolution — c'est une reconstruction.

---

#Architecture envisagée : Next.js + Payload CMS + hébergement en France + edge

Le choix de la stack est guidé par trois impératifs identifiés pendant l'audit : performance maximale sur les Core Web Vitals, autonomie éditoriale complète pour l'équipe du cabinet, et capacité à intégrer des composants interactifs et des agents IA sans dette technique à court terme.

Next.js (App Router). Le choix du framework s'appuie sur plusieurs raisons exposées dans notre analyse pourquoi choisir Next.js pour un site B2B en 2026. Le rendu hybride (SSG pour les pages de contenu, ISR pour le blog, SSR pour les composants personnalisés) permet d'atteindre de très bons scores PageSpeed sans sacrifier la flexibilité.

Les Server Components réduisent drastiquement le JavaScript côté client. Le support natif des images (next/image) règle mécaniquement le problème de LCP identifié à l'audit.

Payload CMS. À comparer à Sanity et Contentful : hébergement self-hosted (aucune dépendance à un SaaS tiers pour les données), flexibilité de schéma et interface d'administration adaptée à une équipe marketing non technique. L'analyse comparative Payload CMS vs Sanity vs Strapi détaille ce choix.

Point décisif ici : Payload hébergé chez un hébergeur français garantit la souveraineté des données et élimine les risques liés à un changement de tarification SaaS.

Hébergement en France + infrastructure edge. La séparation entre les couches s'impose naturellement : Payload CMS et sa base PostgreSQL sur un VPS chez un hébergeur français (OVHcloud par exemple), Next.js compilé et déployé sur une infrastructure edge avec des Edge Functions pour les routes à fort trafic.

Le HTML est servi depuis les nœuds edge les plus proches de l'utilisateur, sans aller-retour vers le serveur d'origine pour les pages statiques, ce qui réduit fortement le TTFB.

Intégrations prévues dès la conception. CRM (HubSpot par exemple) connecté via webhooks Payload. Calendly intégré pour la prise de rendez-vous directe. Hotjar pour la heatmap post-lancement. Et un agent IA de pré-qualification connecté au CRM — décision prise dès le kick-off, architecture prévue dans le schéma initial pour éviter tout refactoring ultérieur.

---

#Mois 1 : migration des pages, préservation du SEO

La migration d'un site WordPress existant vers Next.js est un exercice que beaucoup d'agences sous-estiment. Le risque est réel : une migration mal gérée peut effacer en quelques jours les gains organiques accumulés sur des années, même modestes. La méthodologie de migration WordPress vers Next.js sans perte SEO que nous appliquons repose sur un protocole strict.

Inventaire et mapping des URLs. Chaque URL existante est répertoriée et mappée vers sa destination dans la nouvelle architecture : pages de services, accueil, À propos, Contact, Équipe, pages de cas clients (souvent trop superficielles, à fusionner et réécrire), articles de blog. Les redirections 301 sont définies dans un fichier de mapping avant le début du développement, pas après.

Préservation du capital sémantique. Pour chaque page existante qui génère du trafic organique (même faible), le contenu original est conservé et enrichi, jamais remplacé. Les balises H1 et H2 existantes sont maintenues et complétées. Cette règle est contre-intuitive pour une refonte — on a envie de tout réécrire. Mais le signal sémantique envoyé par des années de contenu indexé ne se remplace pas instantanément.

Audit SEO pré-migration. Crawl complet (Screaming Frog), export du sitemap, comparaison avec la Search Console pour identifier les pages qui génèrent des impressions même sans clics. Ces pages représentent un capital sémantique à préserver et font l'objet d'une réécriture enrichie prioritaire.

Contenu migré et réécrit. Les pages de services sont entièrement reconstruites avec une structure orientée intention de recherche (problème → solution → preuve → CTA), des balisages Schema.org Service + Organization et des méta-données optimisées. Les articles de blog sont audités : suppression du contenu pauvre sans valeur, enrichissement des articles trop courts, migration à l'identique des autres avec amélioration des métadonnées.

Fin du mois 1 : pages migrées, redirections 301 en place, sitemap XML soumis à la Search Console, premier crawl post-migration sans erreur 404. Le serveur de staging fonctionne en parallèle du site live pendant plusieurs semaines pour valider chaque URL avant la bascule DNS.

---

#Mois 2 : composants de conversion, calculateur ROI, cas clients interactifs

Un site B2B premium ne convertit pas avec un formulaire de contact. Il convertit en donnant au visiteur les outils pour se convaincre lui-même, à son rythme, avant d'engager la conversation avec le cabinet.

Calculateur ROI de transformation. Développé en React côté client (island architecture, chargé en lazy loading pour ne pas impacter le LCP), il permet à un décideur ETI de renseigner quelques paramètres (secteur, taille d'entreprise, type de transformation, périmètre géographique, budget indicatif) et d'obtenir une estimation de retour sur investissement basée sur les repères du cabinet.

Ce n'est pas un configurateur de prix — c'est un outil de légitimation de la démarche conseil. Son effet se mesure par le taux de conversion des visiteurs qui l'utilisent, comparé à celui de l'ensemble du site.

Cas clients interactifs. Les anciennes pages de cas clients superficielles (quelques centaines de mots, aucun chiffre, aucun récit) sont remplacées par des cas clients structurés selon un format narratif chronologique : contexte initial → diagnostic → solution → résultats → témoignage. Chaque cas client inclut un récit détaillé et un CTA contextuel vers le service concerné.

Ces pages se positionnent sur des requêtes de type « cabinet conseil transformation [secteur] résultats » — des requêtes BOFU à fort pouvoir de conversion.

Témoignages structurés Schema.org. Chaque témoignage client intègre un balisage Review + Person + Organization en JSON-LD, pour apparaître en rich snippets sur les requêtes de réputation et de comparaison. Le suivi des KPIs de transformation digitale B2B inclut un indicateur dédié aux impressions sur ces requêtes.

---

#Mois 3 : intégration de l'agent IA de pré-qualification

Le troisième mois marque la distinction entre une refonte « ordinaire » et un dispositif de génération de leads actif. L'intégration d'un agent IA de pré-qualification au parcours de contact change fondamentalement la dynamique de conversion.

Architecture de l'agent. Un LLM (par exemple Claude via l'API Anthropic), avec un system prompt configuré autour de la méthodologie et du positionnement du cabinet. Le contexte RAG embarque : les cas clients du site, une grille tarifaire indicative (non publiée sur le site), les critères de qualification d'une opportunité (taille d'entreprise, budget, type de mission) et les questions types posées lors d'un premier appel commercial.

Comportement de l'agent. Il s'active sur deux déclencheurs : le clic sur « En savoir plus sur votre situation » après le calculateur ROI, et la tentative de contact sur les pages de services. L'agent ne se présente pas comme un chatbot générique — il se présente comme un assistant qui aide à préparer un premier échange avec l'équipe.

Il pose quelques questions de qualification, synthétise les réponses dans une fiche lead structurée, et propose soit la prise de rendez-vous directe, soit l'envoi de ressources pertinentes (étude de cas sectorielle, guide méthodologique).

Intégration CRM. Chaque interaction avec l'agent crée automatiquement un contact dans le CRM avec la fiche de qualification pré-remplie, un score de qualification et un tag du type de mission identifié. Les commerciaux reçoivent une notification avec la synthèse de la conversation avant d'appeler le prospect.

Cette intégration est détaillée dans notre guide sur la génération de leads B2B avec les agents IA en 2026.

Ce qu'on compare. Le taux de conversion lead → rendez-vous des leads venus via l'agent, face à celui des leads venus via le formulaire standard. Un lead qui a passé du temps à répondre aux questions de l'agent sait pourquoi il prend rendez-vous.

Pour en savoir plus sur la définition et les cas d'usage de ce type de dispositif, notre article agent IA : définition et cas d'usage couvre les fondamentaux.

---

#Mois 4 : go-live, monitoring, ajustements post-lancement

La bascule en production se fait tôt un matin, en heure creuse choisie délibérément pour minimiser l'impact d'un éventuel incident sur le trafic.

Protocole de go-live. Bascule DNS préparée à l'avance avec un TTL réduit pour permettre un rollback rapide. Vérification en temps réel des redirections 301 via un script Playwright qui crawle les anciennes URLs et vérifie que chacune retourne un 301 vers la bonne destination. Soumission immédiate du nouveau sitemap XML à la Search Console. Activation du monitoring de l'infrastructure edge et des métriques de performance.

Une baisse temporaire de trafic organique après le lancement : l'explication. Une semaine après le go-live, la Search Console peut afficher une baisse des impressions. Interprétation erronée à éviter absolument : ce n'est pas une sanction, c'est le cycle normal de re-crawl et de ré-indexation par Google après un changement d'infrastructure.

Pour une explication approfondie, notre article Core Web Vitals 2026 : optimiser Next.js pour un site premium couvre ce phénomène en détail. Les impressions récupèrent ensuite leur niveau initial puis le dépassent.

Ajustements post-lancement. Trois corrections typiques dans les premières semaines. Première : une police custom qui provoque un FOUT (Flash of Unstyled Text) et un CLS dégradé, corrigé en préchargeant les variantes de police critiques via <link rel="preload">. Deuxième : un calculateur ROI trop lent à s'initialiser sur mobile faible débit, résolu en réduisant le bundle JavaScript par tree-shaking et code splitting.

Troisième : un agent IA qui ne se déclenche pas sur certaines versions de Safari iOS, par incompatibilité avec l'API Web Worker, corrigé par un fallback synchrone.

Monitoring continu. Un dashboard analytics edge + Search Console + CRM est mis en place avec des alertes sur trois indicateurs : toute dégradation du LCP, toute baisse notable du volume de leads sur 7 jours glissants, toute erreur 500 ou 404 non gérée. Ces alertes sont envoyées sur un canal Slack dédié.

---

#Ce qu'on mesure après six mois

Nous ne publions pas de résultats chiffrés pour cet exemple. Dans un vrai projet, on compare les indicateurs suivants à la baseline relevée lors de l'audit.

#Performance technique

TTFB moyen, LCP (P75), CLS, scores PageSpeed mobile et desktop. L'amélioration du TTFB est attribuable à la combinaison Next.js SSG + infrastructure edge : les pages statiques sont servies depuis le nœud edge le plus proche du visiteur, sans aucun appel au serveur d'origine. La documentation des Core Web Vitals Google donne les seuils officiels.

#SEO et trafic organique

Impressions et clics mensuels (Search Console), position moyenne, nombre de pages indexées, nombre de domaines référents. Le trafic organique progresse grâce à trois facteurs cumulatifs : amélioration des Core Web Vitals, enrichissement des métadonnées et du balisage Schema.org, publication d'articles optimisés ciblant des requêtes TOFU/MOFU du marché du cabinet.

#Conversion et génération de leads

Nombre de leads qualifiés (MQL) par mois, taux de conversion visiteur → lead, taux lead → rendez-vous commercial, part des leads attribuée au calculateur ROI et à l'agent IA. La segmentation des sources de leads montre une diversification (agent IA, calculateur ROI, pages de cas clients, blog) qui réduit la dépendance au réseau direct.

La vitesse du site influence directement le taux de rebond et la durée de session. Ces métriques d'engagement sont à suivre à côté des leads.

---

#Mesurer le retour sur investissement

Notre méthodologie de calcul du ROI d'une refonte site B2B s'applique à ce type de projet.

Structure de l'investissement. Architecture et développement Next.js + Payload ; rédaction et optimisation SEO ; développement du calculateur ROI et des cas clients interactifs ; intégration de l'agent IA de pré-qualification ; migration SEO, redirections, tests ; formation de l'équipe et documentation.

Repères Nehos : un site B2B avec CMS headless démarre à 15 000 € HT, et une plateforme B2B complexe à 50 000 € HT. Ce budget est cohérent avec la logique exposée dans notre guide du budget de refonte site B2B en 2026.

Gains à mesurer sur 12 mois. Leads supplémentaires générés (nombre de MQL × taux de closing × valeur moyenne d'une mission × marge), réduction du temps commercial grâce à la pré-qualification par l'agent, meilleure qualification des leads (taux de closing). On y soustrait les coûts récurrents (hébergement, infrastructure edge, licence éventuelle, maintenance) pour obtenir le payback réel.

Une analyse complète de la méthode est disponible dans notre trame complète de cahier des charges site B2B 2026, qui inclut un modèle de calcul de ROI préalable à la rédaction du brief.

---

#Ce que cette démarche enseigne

Trois enseignements structurants pour tout cabinet de conseil ou ESN envisageant une refonte.

Le TTFB est un indicateur de revenus, pas un indicateur technique. L'amélioration du TTFB n'intéresse pas les DSI : elle intéresse les directeurs commerciaux. Sur un cycle de vente où une mission vaut cher, chaque lead perdu coûte cher. Investir dans l'infrastructure d'un site B2B premium, c'est investir dans le pipeline commercial.

Un calculateur ROI vaut mieux que dix pages de présentation. Les décideurs ETI ne lisent pas les « offres de service ». Ils calculent. En leur donnant un outil qui les aide à projeter le ROI d'une transformation, le cabinet change de posture : de vendeur de services à partenaire d'analyse.

L'agent IA de pré-qualification est le meilleur commercial disponible à 3h du matin. Disponible en permanence, patient, jamais fatigué, il transmet des fiches de qualification structurées aux équipes avant chaque appel. Sur un marché où les décideurs prennent leurs décisions initiales en dehors des heures de bureau, cette disponibilité change l'équation de la génération de leads.

Notre guide sur la génération de leads B2B avec les agents IA développe cette dynamique en détail.

Pour lancer votre propre refonte avec une approche ROI-first, notre service de refonte site B2B inclut un audit préalable gratuit et une estimation de payback avant signature.

Photos : Mikhail Nilov, Pavel Danilyuk sur Pexels.