Les environnements de pr\u00e9production (staging) font partie de ces bonnes pratiques qui ressemblent \u00e0 une corv\u00e9e jusqu’au jour o\u00f9 elles vous sauvent. \u00ab Ce n’est qu’une petite modification \u00bb, se dit-on. \u00ab Je modifie le site en production, j’actualise et c’est r\u00e9gl\u00e9. \u00bb La plupart du temps, \u00e7a marche. Les rares fois o\u00f9 \u00e7a ne marche pas, le co\u00fbt se compte en heures de r\u00e9cup\u00e9ration, en clients perdus ou en un samedi entier pass\u00e9 \u00e0 r\u00e9parer ce qui aurait d\u00fb \u00eatre une modification du mardi.<\/p>\n\n\n\n
Trois situations r\u00e9elles des deux derni\u00e8res ann\u00e9es chez Defyn, anonymis\u00e9es mais l\u00e9g\u00e8rement romanc\u00e9es. Dans chaque cas, une modification de cinq minutes effectu\u00e9e sur le site en production a co\u00fbt\u00e9 entre une demi-journ\u00e9e et une semaine compl\u00e8te. Dans chaque cas, un environnement de pr\u00e9production aurait d\u00e9tect\u00e9 le probl\u00e8me avant qu’il n’atteigne un client.<\/p>\n\n\n\n
Un site e-commerce sous WooCommerce a appliqu\u00e9 une mise \u00e0 jour d’extension de routine un samedi apr\u00e8s-midi, directement en production. Une passerelle de paiement a re\u00e7u une mont\u00e9e de version mineure. Le propri\u00e9taire a cliqu\u00e9 sur \u00ab mettre \u00e0 jour \u00bb, le tableau de bord est pass\u00e9 au vert, et il est parti d\u00eener.<\/p>\n\n\n\n
Ce qu’il ignorait, c’est que la nouvelle version avait introduit un petit changement dans la fa\u00e7on d’assainir le format des champs de carte bancaire. Le site fonctionnait tr\u00e8s bien avec la version de PHP de l’agence. Sur la version de PHP plus ancienne de l’h\u00e9bergeur, la passerelle renvoyait une erreur silencieuse \u00e0 chaque transaction. Les paiements ont commenc\u00e9 \u00e0 \u00e9chouer imm\u00e9diatement.<\/p>\n\n\n\n
Le dimanche matin, quand le propri\u00e9taire a v\u00e9rifi\u00e9, 31 clients s’\u00e9taient heurt\u00e9s au paiement d\u00e9faillant et avaient abandonn\u00e9. L’extension a \u00e9t\u00e9 r\u00e9tablie en moins d’une heure, mais ces 31 clients n’ont jamais \u00e9t\u00e9 r\u00e9cup\u00e9r\u00e9s. Un environnement de pr\u00e9production avec une seule transaction de test l’aurait d\u00e9tect\u00e9 avant la perte d’une seule vraie commande.<\/p>\n\n\n\n
Un site de services B2B avait besoin d’une petite modification visuelle. Un bouton de la page d’accueil devait \u00eatre un peu plus grand et d’une nuance de rouge diff\u00e9rente. La responsable marketing a ouvert le personnalisateur, fait la modification, enregistr\u00e9 et consid\u00e9r\u00e9 que c’\u00e9tait termin\u00e9.<\/p>\n\n\n\n
La modification a cass\u00e9 la mise en page mobile. Le bouton d\u00e9bordait d\u00e9sormais du conteneur sur les \u00e9crans de moins de 400 pixels de large, poussant le reste de la page sur le c\u00f4t\u00e9 et faisant passer le menu de navigation \u00e0 la ligne de fa\u00e7on disgracieuse. La responsable marketing n’a jamais ouvert le site sur un t\u00e9l\u00e9phone, elle ne l’a donc pas remarqu\u00e9.<\/p>\n\n\n\n
L’agence l’a rep\u00e9r\u00e9 trois semaines plus tard, lors d’une revue trimestrielle. Entre-temps, trois semaines de trafic mobile (soit 60 pour cent de l’audience du site) avaient vu une page d’accueil cass\u00e9e. Le taux de rebond sur mobile avait discr\u00e8tement grimp\u00e9 de 18 pour cent sur cette p\u00e9riode.<\/p>\n\n\n\n
Le th\u00e8me WordPress d’un client proposait une version majeure. Les notes de version promettaient des am\u00e9liorations de performance et quelques nouvelles fonctionnalit\u00e9s. Le client a appliqu\u00e9 la mise \u00e0 jour un vendredi apr\u00e8s-midi. Le site s’est reconstruit, et toute la mise en page de la page d’accueil avait disparu. Remplac\u00e9e par un mod\u00e8le par d\u00e9faut livr\u00e9 avec la nouvelle version du th\u00e8me.<\/p>\n\n\n\n
La version majeure avait chang\u00e9 la mani\u00e8re dont le th\u00e8me stockait les donn\u00e9es de mise en page, et le script de migration s’est ex\u00e9cut\u00e9 de fa\u00e7on imparfaite sur la base de donn\u00e9es en production. La r\u00e9cup\u00e9ration a exig\u00e9 de restaurer la version pr\u00e9c\u00e9dente du th\u00e8me, de r\u00e9importer manuellement la mise en page de la page d’accueil depuis une sauvegarde et de r\u00e9appliquer trois semaines de modifications successives. Temps total de r\u00e9cup\u00e9ration : 11 heures sur un week-end prolong\u00e9.<\/p>\n\n\n\n
Sur une copie de pr\u00e9production, la casse aurait \u00e9t\u00e9 visible en 30 secondes. L’agence aurait signal\u00e9 cette version du th\u00e8me comme risqu\u00e9e et recommand\u00e9 une autre voie de mise \u00e0 jour. Z\u00e9ro interruption visible pour le client, z\u00e9ro week-end perdu.<\/p>\n\n\n\n
Un environnement de pr\u00e9production est une copie priv\u00e9e du site en production, h\u00e9berg\u00e9e sur une URL diff\u00e9rente, qui reproduit la production d’aussi pr\u00e8s que possible. La version du th\u00e8me correspond, les versions des extensions correspondent, le contenu est r\u00e9cent et la base de donn\u00e9es est raisonnablement \u00e0 jour. L’\u00e9quipe y effectue les modifications, les teste, et ne les pousse en production qu’une fois confirm\u00e9 qu’elles fonctionnent.<\/p>\n\n\n\n
Les h\u00e9bergeurs WordPress infog\u00e9r\u00e9s modernes (Pantheon, WP Engine, Kinsta, SiteHost) proposent tous une pr\u00e9production en un clic. La plupart des h\u00e9bergeurs de qualit\u00e9 l’incluent dans leurs offres. La configurer pour la premi\u00e8re fois sur un h\u00e9bergement infog\u00e9r\u00e9 prend 10 minutes, apr\u00e8s quoi elle reste l\u00e0 ind\u00e9finiment comme une assurance bon march\u00e9.<\/p>\n\n\n\n
La configuration technique est facile. Le plus dur, c’est l’habitude. \u00ab Ce n’est qu’une petite modification \u00bb doit dispara\u00eetre du vocabulaire de l’\u00e9quipe. Chaque mise \u00e0 jour d’extension, chaque mise \u00e0 jour de th\u00e8me et chaque changement structurel de CSS passe d’abord par la pr\u00e9production. Point.<\/p>\n\n\n\n
Les modifications de contenu (changements de texte, remplacement d’une image \u00e0 la une, publication d’un nouvel article de blog) peuvent g\u00e9n\u00e9ralement se passer de pr\u00e9production sans risque. Les changements structurels et d’infrastructure, non.<\/p>\n\n\n\n