Site corporatif RxVantage

RxVantage est une entreprise basée aux États-Unis qui connecte les prestataires de soins de santé avec des experts médicaux, principalement via ses applications mobile et « desktop ». Ils avaient besoin d’un nouveau site web pour soutenir leur écosystème numérique. L’objectif était de développr un site qui non seulement reflétait leur image de marque, mais qui était également performant, sécure et facile à gérer pour les webmestres,

Notre rôle et notre solution

L’équipe LittleBox a été sollicitée pour développer ce nouveau pôle central pour l’imge de marque RxVantage. Après une période d’analyse, nous avons à l’époque constaté que les principaux CMS « open source » côté serveur (OSS) disponibles, tels que Django, WordPress ou autres, n’offraient pas tout à fait la performance nécessaire au niveau « frontend » pour concrétiser la vision du client. D’autre part, les offres de CMS basées sur « Node » étaient encore largement immatures, et le client était plus familier avec WordPress. Nous avons donc décidé de développer une implémentation « headless » (découplée) sur mesure, avec React comme base pour l’interface et WordPress comme service « backend » complet.

Architecture découplée

Nous avions besoin du meilleur des deux mondes : une performance exceptionnelle et un CMS intuitif, mais cela nous a confrontés à des défis d’ingénierie non négligeables. À l’époque, l’API REST de WordPress approchait sa maturité mais n’était pas suffisamment large pour inclure les autres outils dont nous avions besoin, tels que Advanced Custom Fields, Yoast SEO, la recherche et une série d’autres outils donnant un bon niveau d’autonomie au client. Le client désirait contrôler ses contenus à l’aide d’un constructeur de pages dynamique (« page builder »). Au lieu de créer une série de types de contenu pré-définis ou de pages statiques, nous devions donc prendre en charge un constructeur de pages riche et multi-composants (avant les « blocks » et Gutenberg !).

Nous avons développé nos modules sur la base du contrôleur REST principal, tout en l’élargissant pour prendre en charge les fonctionnalités supplémentaires requises. Du côté de React, nous devions nous assurer que chaque URL était géré dynamiquement de façon élégante, tout en respectant les bonnes pratiques SEO telles que les structures canoniques. De plus, nous devions nous assurer que la mise en page et la structure du contenu de chaque page étaient entièrement dynamiques, façonnées intégralement par la réponse entrante de l’API.

Au final, notre solution a fourni au client une autonomie totale sur son contenu. Le CMS développé sur mesure permet à l’équipe RxVantage de créer facilement de nouvelles pages et de modifier le contenu existant sans avoir à se cantonner aux limites d’une série de gabarits pré-définis, d’un plan de site statique ou de modules de contenu à structure fixe.

Intégrations

Pour soutenir les efforts de marketing et de vente du client, nous avons intégré des outils tiers, notamment des outils de suivi, d’accessibilité, d’analytique et des « chatbots ». L’un des cas d’utilisation probablement les plus intéressants a été notre intégration poussée avec Marketo. Bien que Marketo expose une API, sa portée était restreinte à l’époque. Le cas d’utilisation principal de l’intégration Marketo était l’utilisation de formulaires, affichés via un « iframe » et contrôlés par les serveurs Marketo. Cela présentait deux problèmes majeurs : il étiat impossible de personnaliser les styles adéquatement pour respecter l’image de marque du client, et nous avions besoin de certains déclencheurs (« triggers ») provenant des soumissions Marketo pour contrôler l’accès à des ressources personnalisées dans la librairie RxVantage. Notre équipe a dû décomposer dynamiquement chaque réponse de Marketo, puis réassembler chaque formulaire HTML en React natif. Nous avons dû analyser puis rétro-concevoir l’interactivité de Marketo sur le site et ensuite la simuler nous-mêmes afin de soumettre correctement les informations aux serveurs Marketo, tout en agissant comme un véritable intermédiaire. L’API  publique et la boîte à outils de Marketo se sont beaucoup améliorées depuis, mais ces premiers jours d’intégration constituaient un défi d’ingénierie en soi

Optimisation de la performance

Nous avons optimisé le site React en utilisant les informations des audits Google Lighthouse. En analysant systématiquement les métriques de performance de Lighthouse, telles que le Largest Contentful Paint (LCP), le First Input Delay (FID) et le Cumulative Layout Shift (CLS), nous avons identifié et résolu les goulots d’étranglement affectant la vitesse et la réactivité du site. Cela comprenait la mise en œuvre du « code splitting » et du « lazy loading » pour réduire la taille initiale du paquet (« bundle »), et l’optimisation des images en utilisants des formats de nouvelle génération. Nous avons tiré parti de stratégies de « caching » efficaces, y compris la gestion de la cache locale, et avons passé beaucoup de temps à analyser le « profiler » React à la recherche de composants coûteux ou bloquants et de requêtes lentes. Nous avons également minimisé les scripts bloquant le rendu, supprimé les dépendances inutilisées et veillé à ce que le CSS critique soit intégré « inline » pour un rendu plus rapide. Le test continu avec Lighthouse est devenu une partie de notre pipeline CI (Intégration Continue), nous permettant de maintenir des résultats de performance quasi parfaits au fur et à mesure que nous itérions sur de nouvelles fonctionnalités.

Les exigences concernant le « backend » étaient tout aussi rigoureuses. WordPress n’est pas naturellement une plateforme très performante, et la nature de notre approche de développement de contenu dynamique a mis à rude épreuve la limite de ce que l’API de requête de contenu de WordPress pouvait gérer. À l’aide d’outils d’analyse tels que le « flame graph », nous avons passé du temps à parcourir l’application, à ajuster et à optimiser les requêtes lorsque nécessaire, et à gérer le cache transitoire avec un contrôle granulaire précis.

Enfin, nous avons conçu et dirigé la mise en œuvre de puissants intergiciels de « caching » à la fois sur le « frontend » et le « backend » afin de garantir que les requêtes REST volumineuses soient livrées rapidement.

Résultats clés

Le produit final est un site web hautement performant, flexible et puissant qui représente véritablement la marque RxVantage. En développant une plateforme qui permet au client de gérer son contenu facilement et efficacement, nous lui avons fourni les outils numériques nécessaires pour développer sa marque et engager son audience. Le nouveau site offre une expérience utilisateur supérieure, d’excellentes performances et une base solide pour la croissance future.