Refonte technique Sup’Saint-Dominique — migration vers le stack UFO Agency v2

Sup’Saint-Dominique est un établissement d’enseignement supérieur à Pau. Le site v1, livré avec un thème classique WordPress, Tailwind v3 et des blocs Pinegrow, fonctionne. Mais la stack accumule des dépendances coûteuses et la maintenance devient complexe. La v2 est une reconstruction complète — même contenu, même charte, nouvelle fondation technique.

Ce qu’on a remplacé et pourquoi

La v1 reposait sur trois dépendances qui posaient problème à long terme.

Pinegrow Blocks — extension payante couplée à un éditeur desktop propriétaire. Dès qu’on sort de l’environnement Pinegrow, les blocs deviennent opaques. Impossible d’intervenir directement dans Gutenberg sans risquer de casser le rendu. Remplacé par UFO-blocks (bibliothèque de blocs agence) et ssd-blocks, un plugin custom développé en React avec rendu serveur PHP — contrôle total, zéro dépendance externe.

GSAP — GreenSock Animation Platform. Excellent outil, mais la licence commerciale est payante. 70 KB min+gzip pour des animations d’entrée et des scroll triggers qu’Anime.js couvre parfaitement à 17 KB, sous licence MIT. Le gain est double : coût de licence supprimé, bundle allégé de 53 KB.

Alpine.js — 44 KB pour gérer un menu burger, un flyout et quelques toggles. Van.js fait la même chose en 1 KB. Pour les comportements vraiment simples, du Vanilla JS pur sans dépendance suffit.

💡 Faites glisser le tableau vers la droite pour voir plus de colonnes

Les résultats

Scores PageSpeed Lighthouse (laboratoire, avril 2026) :

• Performances : 100/100
• Accessibilité : 97/100
• Bonnes pratiques : 96/100
• SEO : 100/100

Vitals mesurés en laboratoire :

• FCP : 0,4 s
• LCP : 0,6 s
• TBT : 0 ms
• CLS : 0,007
• Speed Index : 0,6 s

Core Web Vitals terrain (données réelles Chrome UX, 28 derniers jours) :

• LCP : 2 s — réussite
• INP : 82 ms — réussite
• CLS : 0,01 — réussite
• FCP : 1,7 s
• TTFB : 1,8 s

Les trois métriques Core Web Vitals sont au vert. L’évaluation Google est réussite.

Le workflow d’inscription WooCommerce

Sup’Saint-Dominique gère ses inscriptions via WooCommerce. La v2 a été l’occasion de rendre ce parcours cohérent avec le contexte scolaire : vocabulaire adapté, tableau de bord étudiant personnalisé, statuts renommés.

Ce que l’étudiant voit dans son espace :

• « Commandes » est devenu « Votre inscription »
• Un onglet dédié « Régler mes frais d’inscription » avec accès direct au paiement
• Des alertes de statut contextuelles — verte si l’inscription est validée, rouge si le paiement est en attente
• Les statuts WooCommerce traduits en langage scolaire : « Terminée » → « Inscription validée », « En cours de traitement » → « Inscription en cours »

Les défis techniques résolus

La migration vers Tailwind v4 et un thème full-blocks a fait remonter plusieurs problèmes liés aux contextes de rendu.

iOS Safari — fond blanc visible sous la barre d’adresse lors du scroll élastique, vidéo en autoplay invisible sur mobile. Résolu avec overscroll-behavior: none, dvh au lieu de vh, et l’attribut playsinline sur les éléments vidéo.

Z-index et stacking contexts — des images de hero disparaissaient, un flyout de formulaire passait sous le menu. Cause : overflow: hidden crée un BFC qui interagit mal avec les enfants à z-index négatif. Remplacé par overflow: clip + isolate pour séparer les contextes sans effets de bord.

Flyout sur iOS — le contenu du formulaire n’était pas scrollable, Lenis interceptait les événements touch. Résolu par data-lenis-prevent sur le conteneur et une architecture flex qui garantit l’accessibilité du bouton d’envoi.

Vous avez un site WordPress dont la stack technique commence à coûter plus cher qu’elle ne rapporte ? Parlons-en autour d’un audit gratuit.