La nouvelle plateforme zenith-watches.com

Zenith, manufacture d’horlogerie suisse du groupe LVMH, fondée en 1865, nous a sollicité pour la mise en place de sa nouvelle plateforme digitale e-commerce. En effet, soucieux d’offrir à ses clients en ligne une expérience innovante et avant-gardiste, Zenith et WIDE ont collaboré pour l’élaboration de ce nouvel écrin digital.

Au-delà d’un simple site e-commerce, nous vous proposons un focus sur l’architecture et la vision de WIDE autour de cette plateforme.

Le site Zenith était auparavant propulsé par Magento1, sans proposer à ces visiteurs la possibilité d’acheter en ligne. Comme vous devez le savoir, Magento1 arrive en fin de vie suite à l’annonce de la fin de son support par Adobe. WIDE a ainsi accompagné la marque vers un passage sur Magento2 à la hauteur de ses ambitions.

 

Notre vision de l’e-commerce.
Aujourd’hui, construire un site e-commerce est quelque chose de facile. Prenez n’importe quelle solution du marché, customisez-la depuis son back-office et vous voilà en train de vendre vos produits en ligne.

En revanche, quand vous êtes une entreprise internationale, présente dans plusieurs pays, avec des équipes e-commerce dédiées, des équipes marketing locales, un DSI centralisé, des contraintes spécifiques par marché, vous ne pouvez plus fonctionner de la sorte et devez envisager une plateforme à la hauteur de votre business et de vos enjeux.

Avec l’évolution du web et les innovations incessantes du secteur, WIDE a su au fil des années prouver sa capacité à prendre en compte toutes les contraintes de ses clients et répondre à chaque fois de la manière la plus adéquate à leurs besoins.

Un site web e-commerce est aujourd’hui un canal de vente, au même titre que les réseaux sociaux, les boutiques et tous les différents points de contact de l’écosystème de marque. Ainsi, il se doit d’être interconnecté à l’ensemble des composants business de l’entreprise :

• PIM
• DAM
• CRM
• ERP
• Plateforme de contenu
• PSP
• Marketing automation
• IAM

et tous les autres systèmes …

 

Porter cette vision.
L’architecture technique de la plateforme e-commerce doit être au service de la marque et non l’inverse. Pourquoi faire des concessions fonctionnelles, techniques, business ou éditoriales à cause de vos choix techniques et technologiques ?
La mise en place d’un site e-commerce peut être envisagée de 3 façons différentes :

• Une plateforme orientée e-commerce : on parle ici du CMS e-commerce classique, une solution all-in-one. Rapide, efficace et robuste, sa mise en place vous impose une architecture monolithique, ou toute intégration sera fortement liée à la solution choisie.
• Une plateforme orientée DXP : relativement similaire à la précédente, elle vous offre la possibilité d’exposer votre contenu en reposant sur une API e-commerce. Cette solution vous permet de propulser votre vision digitale de marque à travers une seule solution interconnectée avec le reste de votre écosystème mais implique une connaissance élevée de la solution choisie.
• Une plateforme orientée API : interconnecter des systèmes via des API REST, GraphQL ou autre en gardant une vision orientée services ou micro-services. Ce type de plateforme ne vous impose pas le choix d’une solution globale et vous permet d’adapter votre écosystème rapidement aux évolutions du marché.

Les différentes approches des plateformes e-commerce

Au fil des années, WIDE et ses experts du domaine aident ainsi ses clients à déployer la meilleure architecture pour leurs besoins.
 

Pourquoi faire des compromis ?
L’image de Zenith dans le domaine de l’horlogerie est une image d’excellence et d’innovation. Sa plateforme e-commerce doit être à son image.
C’est en ayant en tête cette notion que nous avons conçu le nouveau site zenith-watches.com.
Les règles sont simples :

• Un site e-commerce international de référence dans le secteur
• Un contenu riche
• Une plateforme performante et interconnectée avec les systèmes d’information de la marque
• Une plateforme ouverte à l’innovation et tournée vers le futur

En analysant tous ces points, nous avons opté pour une architecture découplée (orientée API), capable de répondre à un concept clé qui nous a guidé tout au long de la création de la plateforme : la séparation des préoccupations.
 

Séparation des préoccupations.
Le principe de séparation des préoccupations est un concept informatique qui vise à isoler chaque brique applicative pour qu’elle se concentre sur la tâche qu’elle réalise le mieux.

Cette approche permet de décloisonner une architecture logicielle et vient en opposition aux anciennes architectures monolithiques du passé.

En optant pour une architecture orientée API, nous nous garantissons une plateforme optimale, capable de connecter les meilleures solutions pour Zenith en fonction de ses besoins business. Le site e-commerce devient un canal de vente riche, solide, largement interconnecté avec tous les systèmes de la marque et qui répond à toutes les problématiques puisque ouvert aux meilleures solutions du marché.
 

Architecture zenith-watches.com 👷

 

 

Le schéma ci-dessus vous présente les composants clés de l’architecture découplée pour Zenith :

• Une solution e-commerce : Magento2 et son API
• Un PIM, Easy Docmaker, qui fournit les données produit à Magento
• Une solution CRM, Salesforce Sales Cloud qui fournit les données boutiques et clients
• Un CMS headless : Prismic
• Une Progressive Web App (PWA) : Vue Storefront
• Un CDN : Akamai

 

Approche DevOps
Le workflow de production utilisé sur la construction du nouveau site Zenith s’inscrit dans la démarche interne WIDE de qualité et l’approche Devops mise en place et portée par l’ensemble de nos équipes techniques :

• Utilisation de Docker pour les usages locaux des équipes
• Intégration continue via Gitlab
• Pipelines de déploiement pour les contrôles qualité automatisés
• Audit de qualité de code (code review et SonarQube)
• Audit de sécurité de code (code review, SonarQube et Detectify)
• Tests unitaires et fonctionnels
• Audit de performance automatisé (Sitespeed)
• Build et déploiement continu au sein de notre cluster Kubernetes
• Déploiement en production des images générées
• Monitoring applicatif et reporting d’erreur (Uptime robot, Sentry)

Le projet Zenith s’inscrit s’intègre parfaitement dans notre processus de travail. Son architecture découplée nous permet de séparer de manière optimale les briques logicielles développées et ainsi en optimiser les performances et la qualité.

Un effort tout particulier a été porté sur l’intégration de GKE (Google Kubernetes Engine) dans notre workflow. En effet, en partenariat avec les équipes hébergement Zenith, l’ensemble des briques applicatives de la solution est déployé après build dans nos pipelines Gitlab sur les environnements Zenith, dans GKE. Cette approche orientée container nous offre ainsi un maximum de sécurité, extensibilité et souplesse.
 

Les autres composants
L’écosystème Zenith intègre aussi des outils orientés business et marketing (OneTrust, GTM, Google Maps, Google RecaptchaV3, ABTasty, …). Il s’adapte nativement à notre architecture et permettent ainsi de piloter de façon pertinente l’activité e-commerce : 

• Data
• Retailers
• Personnalisation et recommandation de contenu
• GDPR
• Spam
• Emailing

💡 L’intégration de ses solutions peut avoir un gros impact sur les performances du site. Travailler main dans la main avec les partenaires en analysant l’impact de leur solution et trouver le meilleur compromis pour le chargement de leurs outils (implémentation d’un chargement asynchrone, incorporation de leur script sur votre CDN, mise en place de modules JavaScript dédiés et isolés, …).
 

Le contenu ✍️
Le contenu éditorial est une composante majeure de la stratégie de marque. Zenith n’échappe pas à la règle et son histoire, son positionnement et sa richesse nécessite la mise en place d’une solution leur permettant d’exposer efficacement cela.

En dessinant l’architecture de la plateforme, nous nous sommes efforcés d’imaginer une solution de gestion de contenu robuste, modulable et à la hauteur de leurs besoins.
 

Content as a Service
L’approche évidente lorsque vous construisez un site internet, petit ou gros, e-commerce ou non, est de se dire :

Je déploie mon site, basée une solution e-commerce ou un CMS classique et j’utilise sa brique CMS …et je ferai de même pour chaque nouveau site.

En adoptant cette stratégie, vous vous heurtez à plusieurs problématiques majeures :

• Est-ce qu’une solution e-commerce a vocation à gérer correctement et facilement ma stratégie éditoriale ?
• Est-ce que mon site a vocation à distribuer son contenu sur les autres points de contact digitaux que je vais déployer dans le futur ? (applications mobiles, solutions internes, POS, e-learning, mini-sites, …)
• Si demain je déploie un nouveau site, est-ce que je dois être dépendant d’un autre site pour mon contenu qui n’a aucun rapport avec l’actuel ?

La réponse est “non”.

Une architecture découplée vous permet d’adopter facilement une posture totalement différente vis-à-vis de votre contenu et de piloter une stratégie éditoriale beaucoup plus transverse et centralisée.

Je déploie un service de gestion de contenus, au même titre qu’un PIM ou un DAM , que je vais exposer via des API et qui va me permettre de centraliser et capitaliser autour d’une et une seule base de contenus … sur tous mes touchpoints digitaux.
 

Aujourd’hui, le contenu est la clé. Il sert :

• l’image de la marque
• la vision de la marque
• la gouvernance éditoriale de la marque
• la performance business de la marque
• la stratégie SEO de la marque
• l’expérience utilisateur 
   

Prismic comme gestionnaire de contenu de la marque
WIDE et Zenith ont déployé Prismic, solution de gestion de contenu SaaS, idéale pour porter cette vision découplée.
Prismic ne fait que 2 choses et les fait bien : gérer votre contenu et le distribuer. Il expose un back-office complet, riche et totalement modulable selon vos besoins. Vous y retrouvez toutes les fonctionnalités nécessaires pour une expérience de contribution idéale :

• multilingue
• multi-environnement
• prévisualisation
• déploiement de contenu planifié
• déploiement par lot de contenus
• versioning du contenu
• instant-search
• web-hooks
• statuts des contenus

et bien d’autres…

L’autre force de Prismic réside dans sa modularité. Vous construisez de manière très intuitive la structure de vos contenus, sans contrainte liée à l’outil. 

Modélisation de la structure des contenus sous Prismic

Son éditeur nous permet de modéliser l’approche atomique et orientée composants.

Contribution des composants depuis le back-office Prismic

« Toute page du site Zenith peut être enrichie par du contenu éditorial. »

Le CMS ainsi positionné dans notre écosystème, nous permet de propulser un contenu riche et de le distribuer facilement sur notre site via son API JSON ou GraphQL. Autre fonctionnalité clé de Prismic, les “integration fields”, qui établissent un lien entre contenu éditorial et produits.

En associant ainsi le contenu éditorial et métier via un connecteur interne, Zenith peut offrir à ses visiteurs une expérience riche sur tous les types de contenu de son site très facilement.

 

Connecter le contenu au site

WIDE s’est donc efforcé de développer un module Javascript dédié à Vue Storefront pour retranscrire cette approche modulable dans le site Zenith.
Chaque composant Vue.js est la traduction technique d’un composant CMS Prismic, totalement atomique et personnalisable, fonctionnant à la fois côté client et côté serveur.
 

Capitaliser sur le contenu

Le déploiement de Prismic s’inscrit donc la vision CaaS (Content as a Service) prônée ici par WIDE. Elle s’intègre parfaitement dans l’architecture découplée de l’écosystème Zenith et devient un point central de la stratégie éditoriale de la marque.

Demain, la solution alimentera tous les touchpoints digitaux Zenith. Elle représente un atout majeur dans la stratégie de gouvernance de la marque. En effet, elle s’applique sur tous les types de sites ou applications, tous les types de budget et représente un atout majeur dans la maitrise de votre TCO (Total Cost of Ownership). 

 

Le front-end du site Zenith ⭐️
Le nouveau site Zenith est un projet digital où le service e-commerce est basé sur Magento2, solution reconnue pour laquelle WIDE entretient depuis plusieurs années un partenariat avec son éditeur Adobe.

L’architecture découplée Zenith nous offre de multiples solutions d’implémentation pour la brique front-end du nouveau site et laisse largement la place à l’innovation. 

Fidèle aux attentes de la marque, à notre vision et notre expertise, c’est tout naturellement que nous nous sommes tournés vers la solution Vue Storefront.

Une PWA orientée e-commerce : Vue Storefront
Vue Storefront est un projet Open Source basé sur le framework front-end Vue.js. Il expose une PWA (Progressive Web Application), headless et agnostique, capable de s’interfacer avec n’importe quel back-end e-commerce.

Très populaire dans la communauté Magento et Vue.js pour ses performances, Vue Storefront répond également à tous les besoins fonctionnels liés aux activités e-commerce digitales de la marque :

• PWA (mode offline, notifications push, synchronisation en arrière plan, installable sur mobile comme une application mobile, …)
• une couverture fonctionnelle quasi complète pour Magento2
• une solution orientée vers la performance
• rendu serveur (SSR) géré nativement
• approche mobile-first
• aucune limite dans la personnalisation et le design du site(interface utilisateur)

Derrière ces notions simples, se cache une solution complète qui garantit performance et qualité des échanges de données entre back-end e-commerce et visiteurs. Vue Storefront repose essentiellement sur 2 composants :

• une application  PWA, responsable du site, son thème, des appels dynamiques vers Magento (sessions, paniers, stocks, …)
• une API  qui sert de passerelle entre l’application, les données du catalogue produits (au travers d’Elasticsearch) et les différents services externes à interconnecter.

Architecture Vue Storefront

Une fois l’application déployée, reste plus qu’à se consacrer sur l’implémentation du thème Zenith et des connecteurs vers les services impliqués dans l’architecture :

• implémentation orienté composant du design du site via Vue.js, HTML5 et CSS3
• développement des modules vers les services spécifiques (Prismic, wishlist, external checkout, store locator, ABTasty, Google RecaptchaV3, OneTrust, …)
• développement des endpoints API spécifiques

Vue Storefront nous offre ainsi une réponse pertinente aux problématiques liées aux solutions front-end. En proposant à la fois un rendu côté client et serveur (via VueSSR), elle nous permet de concentrer nos efforts sur la performance globale du site.

 

La performance 🚀
Si vous demandez à un développeur web ce qu’est un site performant, vous obtiendrez autant de réponses que de développeurs et la performance d’un site web ne se limite pas à sa qualité technique.

La performance est un tout et c’est ainsi qu’elle doit être considérée dans la mise en place d’une plateforme digitale. De par notre expertise globale, nous abordons ce sujet de façon transverse. La performance technique implique la performance SEO, qui elle-même est intimement liée à la performance accessibilité et environnementale … Le tout jouant au final sur la performance business du projet Zenith.

Comme cette présentation se veut technique, nous allons ici nous concentrer sur quelques points de performance abordés sur ce projet, notamment sur la partie front-end.
 

Résultats de l’analyse Lighthouse sur une page produit Zenith

Les concepts clés
L’architecture mise en place sur le projet Zenith est une architecture découplée, basée sur un framework front-end performant Vue.js où le trafic repose sur des utilisateurs connectés.
Une fois la solution mise en place, cette dernière va nous permettre de travailler sur les aspects fondamentaux de la performance :

• Rendu des pages HTML
• Mise en cache
• Optimisation de l’expérience utilisateur
   

Servir les pages HTML rapidement … très rapidement.
Vue Storefront et le site Zenith reposent sur une application universelle et présente ainsi de nombreux concepts clés dans la recherche de performance :

• Vous exécutez le code JavaScript côté client mais aussi côté serveur. Ainsi, une partie du travail de génération de la page est déléguée au back-end Node JS, et la puissance du terminal du visiteur n’est plus en cause sur une grande partie du travail de rendu.
• Vue.js nous permet d’adopter une architecture de code orientée composants, modulaires et optimisée.
• Webpack (et Yarn) sont là pour un build optimisé : transpilation, HMR, optimisation du code généré, Code splitting, PostCSS, …
• Une API gateway sert de couche proxy entre le front-end et le backend de l’architecture pour ne pas se reposer sur les temps de réponse des solutions e-commerce ou autres tout en renforçant la sécurité
• Elasticsearch, base de données NoSQL, en charge de renvoyer les informations statiques rapidement (produits, catégories, attributs, reviews, …).
• Redis pour l’optimisation et la mise en cache des pages sur le back-end du serveur Origin.

Ces quelques points clés nous permettent de construire une application intrinsèquement optimisée mais la performance ne s’arrête pas là.

Mise en cache
Si vous êtes capables de générer des pages dynamiques rapidement, il est encore plus optimal de ne pas les regénérer si elle le sont déjà: la requête la plus rapide est celle qui ne fait pas travailler votre serveur, que l’on parle d’assets statiques ou de pages HTML.

Le site e-commerce Zenith est un site international et se doit d’offrir la même expérience utilisateur partout dans le monde.
 

C’est là qu’Akamai intervient …
La plupart des sites internet utilisent Akamai (ou autres solutions du marché) comme CDN (Content Delivery Network) pour la mise en cache de leurs fichiers d’assets statiques (images, vidéos, documents. Adopter une politique de cache agressive sur ces fichiers est une bonne pratique.

Si vous êtes capables de rapprocher les assets statiques au plus proche du visiteur via le réseau de serveurs de la plateforme, pourquoi ne pas faire de même avec les pages HTML générées ?

Configurez les « behaviors » Akamai sur chaque requête utilisateur vous permet d’accélérer le Time To First Byte de notre application drastiquement, peu importe la localisation du visiteur dans le monde (TTFB 10 fois plus bas avec Akamai activé en moyenne). En mettant en cache les pages HTML sur le CDN, le serveur Origin n’est plus chargé à chaque visite et votre site en est tout autant accéléré.

Il ne reste derrière plus qu’à configurer et synchroniser la purge de ce cache au moment de mise à jour du contenu (e-commerce et éditorial) via la mise en place de webhooks sur Magento2 et Prismic.

Akamai vous permet ainsi de vous rapprocher de vos visiteurs en lui proposant le serveur le plus rapide en fonction de la requête http demandée. Il permet également de gérer les redirections HTTP directement sur son infrastructure (sans aller-retour vers le serveur Origin) et fournit tout une palette d’instructions pour l’optimisation des temps de rendu.

Expérience utilisateur
Une fois le contenu mis en cache, la dernière étape dans la stratégie d’optimisation des performances repose sur la stratégie d’affichage et de chargement de l’UI côté visiteur.
 

Mesurer les performances …
C’est lors de cette étape que nous nous attachons à suivre les bonnes pratiques prises en compte dans tous les outils de benchmark de performance (Lighthouse, PageSpeed, Dareboost, GTMetrix, Webpage Test, …).

Chez WIDE, la phase d’analyse est automatisée à travers nos outils d’intégration continue. Gitlab nous permet de « builder » le projet Zenith et de lancer systématiquement l’analyse des différents environnements déployés au travers d’une instance Sitespeed.io  qui nous permet d’analyser les résultats en direct et corriger tout problème rapidement.

Exemple de rapport Sitespeed  pour Zenith

💡 Ne vous arrêtez pas à un seul outil pour comprendre les points de blocage. Multipliez les mesures, à la fois sur desktop et mobile pour vous assurer plus de clarté dans les résultats.

… et optimiser l’expérience
Bâtir le site Zenith autour d’un framework front-end tel que Vue.js vous ouvre beaucoup d’opportunités d’optimisation, en plus des optimisations classiques, morceaux choisis :

Compression
Sujet basique de l’optimisation, Akamai nous permet de compresser les ressources chargées par le visiteur via Gzip. Concrètement, la ressource appelée est compressée côté serveur, transite sur le réseau puis décompressée côté client, ce qui réduit considérablement la quantité de données à télécharger.
 

Minification des fichiers CSS et JavaScript
Webpack, le module-bundler utilisé dans le projet, nous permet, au moment du build en production d’exécuter notamment 2 plugins : TerserPlugin  et Optimize CSS Assets Webpack Plugin. Ces derniers récupèrent les ressources CSS et JavaScript générées et réalisent une série d’opération pour réduire la quantité de code généré :

• Regroupement des propriétés CSS
• Suppression des espaces inutiles
• Suppression des commentaires dans le code
• Suppression des messages console (console.log())

Lazy loading et code splitting des composants Javascript
Plus votre application grossit, plus la quantité de code généré est importante et a des impacts sur la quantité de données qui transite sur le réseau.

C’est ici qu’entre en jeu le concept de code splitting. Vous pouvez, grâce à Webpack toujours et les frameworks modernes (ici Vue.js), découper votre code JavaScript en plusieurs « morceaux » que vous chargez en fonction de leur nécessité dans la page demandée.

- Est-ce que vous avez besoin de charger le code JavaScript de la page « Store Locator » alors que vous êtes sur la page d’accueil ? 
- Non ! 😥

Vous pouvez réduire ainsi drastiquement la quantité de code nécessaire au fonctionnement de votre site et charger à la volée les modules nécessaires pour afficher votre contenu, et ce, avec Vue.js (ça marche aussi avec les autres frameworks front-end).

Vous pouvez le gérer au niveau de votre routing applicatif mais aussi au niveau de vos composants :

💡 Utilisez Chrome Devtool et son module de mesure de code coverage pour comprendre et optimiser la manière dont votre code JavaScript est utilisé et analysez vos résultats avec le plugin Webpack Bundle analyzer.

 

Rapport du build projet réalisé avec le plugin Bundle Analyzer

HTTP2, preconnect et preload des ressources
Si vous appliquez toutes ces recommandations, vous vous retrouvez avec davantage de fichiers à charger. De ce fait, il va falloir les charger rapidement pour ne pas pénaliser le temps de chargement mesuré de votre application.

C’est ici qu’HTTP2 vient à la rescousse !
HTTP2 et les instructions preconnect et preload vous permettent de résoudre le DNS, d’établir les connexions TCP et de terminer la négociation TLS plus rapidement dans la cascade de chargement de votre page et ses ressources.

• L’attribut preconnect vous permet de signifier au navigateur que, s’il a le temps entre 2 chargements prioritaires, il serait bon de charger la ressource demandée car elle sera possiblement utilisée par la suite :
  <link rel="preconnect" href="https://example.net/">
• L’attribut preload renseigne le navigateur sur le fait qu’il doit absolument charger la ressource en priorité :
  <link rel="preload" href="user-later.js" as="script">

Ces techniques de pré-chargement permettent d’accélérer les temps de rendu de la page et de fluidifier les futures expériences de navigation sur le site Zenith.

Le site étant basé sur une application universelle, la mise en place de ses règles de priorisation a pu être effectuée côté serveur via Vue SSR et sa boucle de rendu. Le concept est simple :

• J’intercepte les assets chargés (fonts, fichiers JavaScript séparés, fichiers CSS séparés, images, …)
• Je décide de les pré-charger ou non en fonction de ma configuration de l’application
• Je les injecte dans le tag <head/> de mes pages

Voici ce que cela implique :

et le résultat : 

Responsive images et lazy loading (image et vidéo)
L’équipe éditoriale de votre client va vous demander :

« Est-ce que vous pouvez me donner TOUTES les tailles d’images de TOUS les composants sur TOUTES les pages que nous devons contribuer ? »

La réponse est simple :
« Non ! »

La réponse parfaite 😎 :
« Contribue les plus grands visuels possibles, on s’occupe de tout ! »

Avec la multiplication des terminaux (mobile, tablette, bureau), les résolutions, les densités de pixel, le responsive design, il n’est pas possible/humain de donner la bonne réponse…

Mais aujourd’hui, des solutions existent et c’est ici qu’entre en jeu Akamai Image Manager. Ce dernier optimise intelligemment les images et les vidéos en associant la qualité, le format et la taille les plus adaptés à chaque terminal et navigateur.

Qu’est-ce que cela signifie ? Akamai est capable de vous fournir une image redimensionnée à la volée, à une résolution précise, dans le format le plus optimisé pris en charge par votre navigateur, de la mettre en cache et la distribuer via son CDN … notamment grâce à IMQuery.
Petit exemple :
•    Supposons que nous ayons l’image suivante, qui pèse 4Mo car en haute résolution https://zenith-watches.com/img/defy.png
•    Si j’ai besoin de l’afficher avec une résolution de 800 pixels par 600 pixels, je peux, grâce à Akamai IMQuery, la générer de la sorte :

L’image sera redimensionnée à la demande, optimisée au meilleur format pris en charge par le navigateur … et je peux chaîner les transformations.

Une fois la fonctionnalité de redimensionnement à la volée des images en place, entrent en piste 2 concepts très liés : images « responsive » et « lazy-loading ».

« L’image la plus rapide à charger est celle que vous ne chargez pas. »

Ainsi, JavaScript et HTML vous permettent grâce aux 2 concepts cités plus haut de :

• Fournir au navigateur des informations sur les différentes dimensions d’une image (attribut srcset)
• Fournir au navigateur des informations sur la largeur de l’image en fonction de la dimension de l’écran (attribut sizes)
• Injecter ses informations seulement quand l’image doit être visible sur l’écran du visiteur (API IntersectionObserver en JavaScript)
   

L’implémentation d’un composant Vue.js « LazyImage » nous permet de systématiser ce comportement sur le site Zenith et de diminuer encore davantage les temps de chargement des pages.

Voici un exemple de code généré lorsque l’image est visible à l’écran du visiteur :

💡 Pour une meilleure compatibilité SEO, ne laissez pas l’attribut src de vos images vides, générez une image de basse qualité ultra rapide à charger.

💡 Vous pouvez appliquer les mêmes concepts sur les vidéos (c’est ce que nous avons fait d’ailleurs), la mécanique est la même 😃

Nous avons vu ici quelques “techniques” d’optimisation de rendu utilisées sur le site Zenith. Je ne me suis volontairement pas attardé sur l’ensemble des points travaillés, j’aurais pu en citer bien d’autres sur lesquels nous avons et allons prêter une attention particulière :

• affichage des fonts
• layout shifting
• chargement asynchrone des scripts externes
• optimisation des scripts WebGL
• purge CSS
• performance environnementale et GreenIT
• et bien d’autres …

Je me suis concentré ici sur la performance technique en présentant quelques notions importantes qui ont aujourd’hui un impact sur la qualité des développements web.

Le sujet de l’accessibilité et de la performance environnementale des applications web sont d’autres domaines qui aujourd’hui sont au centre de nos développements chez WIDE. Ces derniers feront l’objet d’un focus particulier très bientôt. 😉

Conclusion … 😓
La mise en place d’une architecture découplée dans le cadre de projets e-commerce devient aujourd’hui un standard.

Autrefois réservée à de petits sites, elle est aujourd’hui suffisamment mature et robuste pour être déployée dans les systèmes d’information complexes.

Les éditeurs de solutions (Adobe, Salesforce, Acquia, Sitecore, …) aujourd’hui l’ont compris et poussent les marques à se déployer de la sorte.

Grâce à son approche orientée service, elle vous permet de vous focaliser en tant que marque sur le choix de la solution qui vous convient le mieux sans négliger aucun service de votre entreprise et ne vous restreint pas dans une solution all-in-one onéreuse et difficile à maintenir dans le temps.

En tant qu’agence digitale globale, elle nous permet de nous focaliser sur la performance globale des écosystèmes que nous déployons, que ce soit d’un point de vue business ou technique et nous ouvre des portes plus grandes vers l’innovation.

Le site Zenith en est la parfaite illustration. Ce que WIDE a pu déployer en étroite collaboration avec la marque n’est qu’une base robuste qui va nous permettre dans les prochaines années d’accompagner la marque vers ses objectifs de qualité et d’innovation. 

 

Pour aller plus loin :

• Vue Storefront : https://www.vuestorefront.io/
• Prismic : https://prismic.io
• Preload, prefetch et preconnect : https://blog.dareboost.com/fr/2020/05/preload-prefetch-et-preconnect-resource-hints/
• Lazy loading et code splitting : https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/
• GreenIT : https://www.greenit.fr/

et bien sûr https://www.wideagency.ch/

🚨 Rendez-vous sur le site Zenith  pour encore plus de nouveautés dans les prochaines semaines.