Refonte d’un site de 13 ans : tout moderniser sans rien casser

28 septembre 2026

Beaucoup d’entreprises ont un site qui faisait autrefois leur fierté et qui ressemble aujourd’hui à une carte postale de la décennie passée. Le refaire fait peur : il y a des années de contenus, des positions durement acquises dans les moteurs de recherche, les habitudes des utilisateurs — et du code que personne n’ose toucher. Nous venons justement de boucler un projet de ce type — la refonte complète de la communauté photo SuperSnimki.ru — et voici comment il s’est déroulé.

SuperSnimki après la refonte

Le point de départ

Nous avons lancé SuperSnimki en 2013. Depuis, le site a accumulé plus de 200 000 photos, plus de 4 700 auteurs, des milliers d’articles et de discussions sur le forum. La plateforme tournait de manière stable, mais l’interface était restée figée dans son époque :

les styles étaient compilés directement sur le serveur par un outil obsolète ;
les icônes étaient réparties entre trois polices d’icônes différentes ;
le JavaScript principal pesait 674 Ko — dont environ la moitié en bibliothèques inutilisées depuis longtemps ;
ni mode sombre, ni navigation mobile digne de ce nom ;
certains problèmes passaient inaperçus : le flux RSS ne fonctionnait plus depuis fin 2024, et les photos supprimées renvoyaient une redirection au lieu d’une vraie erreur 404.

La décision clé : ne pas réécrire la plateforme

La voie la plus coûteuse et la plus risquée, c’est « on réécrit tout sur une nouvelle stack ». Nous l’avons écartée. Le moteur en Perl, les bases MongoDB et MySQL, la structure des URL et les données sont restés les mêmes. Nous avons changé ce que voit l’utilisateur — et ce qui empêchait le site d’être rapide.

Résultat : la refonte ne s’est pas transformée en migration. Aucun lien n’a été cassé, les positions dans les moteurs de recherche n’ont pas souffert, et les utilisateurs ont simplement retrouvé un matin leur site familier, entièrement transformé.

Avant / après : le forum

Un design system par-dessus le code existant

Première étape : décrire le design system sous forme de tokens — couleurs des thèmes clair et sombre, échelle typographique, espacements sur une grille de 4 px, rayons d’angle, durées d’animation. Les 183 templates du site ont tous été basculés sur ces tokens : c’est pourquoi le mode sombre a fonctionné d’emblée partout, et pas seulement sur la page d’accueil.

Une petite astuce nous a fait gagner beaucoup de temps : les 130 nouvelles icônes SVG ont repris les mêmes noms de classes que les anciennes icônes issues des polices. Inutile de réécrire les templates pour les icônes — elles ont simplement changé d’apparence.

Avant / après : le magazine

Une version mobile digne d’une application

Aujourd’hui, la majorité du public regarde les photos sur smartphone. D’où une barre de navigation en bas de l’écran avec le bouton de publication au centre, un menu coulissant et une nouvelle visionneuse plein écran : zoom à deux doigts, balayage, double-tap. Le site peut même être ajouté à l’écran d’accueil, comme une application.

Version mobile

Vitesse : supprimer plus qu’ajouter

Une refonte alourdit souvent un site. Chez nous, c’est l’inverse :

le bundle JS principal a fondu de 68 % — de 674 à 213 Ko ;
51 bibliothèques obsolètes ont été supprimées, tandis que l’éditeur, les cartes et les graphiques ne se chargent qu’en cas de besoin ;
les smartphones reçoivent des photos de taille moyenne, et pendant le chargement, chaque image est remplacée par sa couleur moyenne ;
la recherche d’articles, qui pouvait prendre jusqu’à 30 secondes sur des mots courants, s’exécute désormais en une seule requête rapide.

Au final, le code du projet compte 27 000 lignes de moins, alors même que les fonctionnalités se sont multipliées.

De nouvelles raisons de revenir

Une bonne refonte ne se résume pas à l’apparence. Nous en avons profité pour ajouter ce qui donne envie de revenir :

un magazine modéré, avec espace auteur et lecture confortable — sommaire et barre de progression compris ;
un catalogue de matériel photo relié aux vraies images grâce aux données EXIF : on voit avec quoi photographient réellement les auteurs du site ;
le « Bilan de l’année » — une page avec les statistiques et les meilleures images de l’auteur, qu’on a envie de partager ;
des outils d’IA : analyse des photos, traduction des articles, remplissage automatique des fiches produits de la boutique et import des nouveaux appareils.

Avant / après : le catalogue de matériel photo

Sécurité et SEO, au passage

Quand on passe en revue tous les templates, on repère aussi ce qui était resté invisible pendant des années. Nous avons corrigé des failles XSS dans la recherche, les commentaires et le forum, protégé les suppressions par des jetons CSRF, rétabli de vraies erreurs 404, réparé le flux RSS, enrichi le balisage JSON-LD et ajouté les images au plan du site.

Mode sombre

Ce que votre projet peut en retenir

1.
Une refonte n’oblige pas à tout réécrire. Si la plateforme fonctionne, modernisez l’interface par-dessus : plus rapide, moins cher et sans risque pour votre SEO.
2.
Commencez par le design system. Les tokens rendent le mode sombre, la cohérence visuelle et les évolutions futures presque gratuits.
3.
Supprimez sans hésiter. Les vieilles bibliothèques et le code inutilisé sont le moyen le plus simple d’accélérer un site.
4.
Faites de la refonte un audit. C’est le meilleur moment pour débusquer les failles et les fonctionnalités tombées en panne sans bruit.
5.
Donnez des raisons de revenir. Un nouveau look attire l’attention ; de nouvelles fonctionnalités la retiennent.

L’étude de cas détaillée, avec captures d’écran, se trouve dans notre portfolio, et le nouveau site est à découvrir en direct sur supersnimki.ru.

Si votre site a lui aussi besoin d’un coup de neuf mais que vous redoutez d’y toucher, parlez-nous de votre projet : nous vous proposerons un plan de refonte sans aucune perte.