In Corio

In Corio, une marque française renommée dans le domaine des chaussures pour hommes, se distingue par son engagement indéfectible envers la qualité, l'élégance et le confort. Vous êtes invités à plonger dans leur histoire captivante en explorant leur site web, disponible à l'adresse incorio.com.

La qualité qui caractérise leurs produits trouve son reflet incontestable dans la conception de leur site internet. L'expérience utilisateur occupe une place centrale dans leurs préoccupations, et ils ont entrepris une démarche ambitieuse pour améliorer ses performances. C'est ainsi qu'ils ont choisi de collaborer avec nos développeurs experts en PrestaShop pour mettre en place un Pack Performance sur mesure.

Lors de notre analyse initiale du site www.incorio.com dans le cadre de cette démarche, nous avons recommandé à notre client de concentrer ses efforts sur l'amélioration des Signaux Web Essentiels (Core Web Vitals) : le Cumulative Layout Shift (CLS) et le Largest Contentful Paint (LCP). Ces indicateurs, définis par Google, revêtent une importance cruciale dans l'optimisation de la performance web. En mettant l'accent sur ces aspects clés, In Corio s'efforce d'offrir à ses visiteurs une expérience en ligne exceptionnelle qui se marie parfaitement avec la qualité et le raffinement de ses chaussures pour hommes.

Le Cumulative Layout Shift (CLS) est une mesure centrée sur l'utilisateur évaluant la stabilité visuelle d'une page web en mesurant les changements de mise en page inattendus (sursauts visuels), un CLS faible indiquant une expérience utilisateur de qualité.

Pour In Corio, le CLS obtenu était perfectible, particulièrement sur la version mobile des pages catégories et produits. 

Nos actions pour ce cas ont consisté à : 

• Fixer des tailles de blocs pour prévenir tout décalage ou redimensionnement intempestif grâce à l'espace réservé sur la page web.
• Réparer un lazy loading inefficace pour améliorer la performance de la page et éviter des affichages après chargement pour les images au dessus de la ligne de flottaison.
• Supprimer une image de chargement de type ‘sablier’ qui entravait la bonne expérience utilisateur.

Largest Contentful Paint (LCP) évalue la vitesse de chargement des pages en mesurant le temps requis pour afficher le plus grand élément de la page (au dessus de la ligne de flottaison).

Il s’agit d’un indicateur crucial pour renforcer l'expérience utilisateur. Lorsqu’une page prend du temps à s'afficher en raison d'un élément visuel trop lourd ou mal défini, l’expérience utilisateur peut vite devenir négative et le taux de rebond de la page augmente.

Le temps de construction est directement lié au résultat LCP. L'augmentation du temps de construction entraîne une augmentation proportionnelle du LCP. Pour améliorer celui-ci nous avons ajusté le système de cache Varnish (précédement mis en place) en le passant à 24h pour les pages produits. En effet, les accès à une page produit ont bien plus de chance d'obtenir une réponse rapide grâce à un cache non expiré.

Nous avons également procédé à l’amélioration de cet indicateur à travers les actions suivantes :

• Encodage base64 des 4 premières images de la page catégories et de la miniature des fiches produits.

La conversion d'une image en base64 consiste à la transformer en une chaîne de caractères. Ainsi, l'image originale n'existe plus en tant que fichier physique sur le serveur, mais est plutôt intégrée directement dans la page sous forme de code.
Ce travail n'est pas recommandé sur des images trop lourdes (car cela alourdirai trop la page), nous avons travaillé uniquement sur des images légères.

• Redimensionnement de l’image principale et des miniatures à gauche de la page catégorie. Un fichier correspondant à la taille affichée à l'écran est plus léger mais évite aussi un calcul de redimension de la part du navigateur. 
• Création d’une image spécifique mobile pour l’image principale page catégorie

Ci-dessous, nous vous présentons les valeurs initiales des scores CLS (Cumulative Layout Shift) ainsi que les temps LCP (Largest Contentful Paint), ainsi que les résultats obtenus suite à nos efforts d'optimisation.

Il est important de noter que nous avons pris la décision de mettre en avant une gamme de résultats, à la fois globaux et détaillés, adaptés aux environnements de bureau et mobile. Nous tenons à souligner que les scores et les temps obtenus peuvent varier en fonction du type de support utilisé et de la page spécifique qui a été analysée.

Les indicateurs que nous vous présentons ici couvrent un large éventail des améliorations que nous avons apportées à ce site. Ils illustrent notre engagement continu à optimiser l'expérience utilisateur, en veillant à ce que nos pages se chargent rapidement et de manière fluide, quel que soit le dispositif utilisé.

Pour en savoir plus sur les indicateurs LCP et CLS, nous vous invitons à lire l'article suivant dédié aux Core Web Vitals, ces signaux Web essentiels pour le SEO de votre PrestaShop.