Découvrez comment les applications Shopify influencent la stabilité visuelle de votre site.

La plupart des commerçants Shopify s’appuient sur les applications pour étendre les fonctionnalités de leur boutique. Cela s'explique principalement par le fait que, pour évoluer, ils exploitent ces outils pour améliorer leur expérience utilisateur dans le but d'optimiser les taux de conversion de leur site Web de commerce électronique. Cependant, la majorité de ces propriétaires ont tendance à négliger la stabilité visuelle. Un problème fréquent lié à ces applications est le CLS (Cumulative Layout Shift), un indicateur clé du Web qui mesure les décalages de mise en page. qui a tendance à avoir un impact négatif à la fois sur l'expérience utilisateur, l'accessibilité et les classements SEO.

Cet article explique comment les applications Shopify peuvent affecter la stabilité visuelle de votre site Web et explique pourquoi la métrique CLS est importante. Nous explorons également comment vous pouvez minimiser les changements de mise en page pour un parcours client agréable.

‍

Qu'est-ce que le Cumulative Layout Shift (CLS) ?

En termes simples, un changement cumulatif de mise en page, est une métrique issue des Core Web Vitals de Google qui mesure la mouvement inattendu d'éléments sur une page Web. Cela se produit généralement lorsque :

• Les images, les publicités ou les iframes chargent à la fois du contenu dynamique et du contenu décalé.
• Les polices sont chargées de manière asynchrone, ce qui entraîne des reflows importants.
• Les boutons, le texte ou les champs de formulaire changent de position initiale en raison du chargement tardif des éléments.

Cela peut entraîner un score cumulé de changement de mise en page élevé, ce qui signifie que la stabilité visuelle de votre site Web est médiocre, ce qui entraîne la frustration des clients et une baisse du classement dans les SERP de Google.

‍

Comment les applications Shopify contribuent à CLS

La plupart de ces applications présentent ce côté négatif car elles ont tendance à proposer des widgets et des éléments dynamiques en injectant des scripts qui ont souvent un impact temporel sur les mises en page. Voici quelques moyens par lesquels ils entraînent une instabilité visuelle :

1. Chargement asynchrone de placements tiers

La plupart de ces applications ont tendance à charger leurs scripts de manière asynchrone, ce qui signifie que le contenu s'affiche une fois la page principale chargée. Cela peut modifier les éléments une fois que l'application a finalement injecté son interface, qu'il s'agisse d'un widget de chatbot, d'un carrousel ou d'une fenêtre contextuelle pour la vente incitative. Jetons un coup d'œil à un exemple :

• Un carrousel vidéo se charge une fois la page complètement rendue, ce qui entraîne un déplacement du contenu principal vers le bas.

La solution peut être assez simple, utiliser des applications qui chargent des scripts de manière synchrone ou des outils tels que Vidjet qui se concentrent sur le chargement différé avec des algorithmes spécifiques pour éviter ces décalages en utilisant les bonnes mesures.

‍

2. Chargement lent sans mesures appropriées

L’avantage du lecteur Vidjet est qu’il est spécialement conçu pour les marques e-commerce et Shopify. Avec des outils tels que Vidjet, les propriétaires de boutiques Shopify qui cherchent à héberger des vidéos sur leur site Web font des merveilles car les dimensions sont définies et adaptées pour garantir la

Certaines applications implémentent chargement différé pour les images et les vidéos sans définir leurs dimensions, ce qui entraîne des changements de mise en page lorsque le contenu apparaît.

‍

3. Injection de contenu dynamique

Outre ces deux points faibles, la majorité des applications ont également tendance à injecter du contenu dynamique tel que des fenêtres contextuelles, des bannières ou des offres de réduction sans s'assurer que l'espace est réservé dans le DOM.

Exemple:

• Une bannière de réduction apparaît une fois en haut de votre site Shopify la page est chargée, tout est repoussé vers le bas.

La solution ?

• Réservez-leur de l'espace à l'aide des propriétés CSS min-height.

‍

4. Polices personnalisées et scripts tiers

Les boutiques de commerce électronique ont également tendance à utiliser des polices personnalisées ainsi que des scripts tiers. Ils peuvent provoquer un flash de texte non stylisé (FOUT) ou un flash de texte invisible (FOIT), déclenchant des problèmes de CLS.

Par exemple :

• Une boutique charge une police Google tardif, ce qui entraîne la redistribution du texte une fois que la police correcte est rendue.

La solution ?

• Utilisez font-display : swap ; pour vous assurer qu'une police de secours est affichée jusqu'au chargement de la police personnalisée.

‍

5. Publicités tierces et vidéos intégrées

Les publicités et les lecteurs vidéo, en particulier ceux chargés à partir de sources externes, peuvent modifier la mise en page lorsqu'ils sont injectés de manière dynamique.

Exemple:

• Une boutique Shopify intègre une démonstration de produit YouTube, mais le conteneur de la vidéo est chargé après le contenu environnant, ce qui entraîne des changements.

Solution :

• Utiliser propriétés CSS de ratio d'aspect pour définir une taille et des dimensions fixes pour les vidéos, les images et les iframes.

‍

Comment minimiser les problèmes de CLS dans les applications Shopify

Afin de garantir aux utilisateurs un parcours d'achat agréable, suivez les pratiques suivantes :

‍

Priorisez les applications grâce à un chargement de script optimisé

• Choisissez ou utilisez les applications qui chargent efficacement des scripts sans aucun changement de mise en page.
• Assurez-vous de regarder avis clients afin de sélectionner les bonnes applications.

‍

Réservez de l'espace pour les éléments dynamiques

• Assurez-vous d'implémenter les propriétés CSS min-height pour libérer de la place pour les composants qui se chargent en retard.
• Parallèlement, pour les images et les vidéos, assurez-vous de définir les dimensions pour éviter les problèmes de refusion.

‍

Optimisez les stratégies de chargement différé

• Mettre en œuvre chargement différé approprié, en utilisant loading="lazy ».
• Utilisez des espaces réservés pour empêcher les éléments de bouger lors du chargement des images.

‍

Utilisez un lecteur vidéo aux performances optimisées

Si votre boutique de commerce électronique cherche à tirer parti du contenu vidéo pour les présentations de produits, le lecteur optimisé de Vidjet peut être le bon choix. En effet, non seulement il est léger et se charge sans aucun changement de mise en page, mais aussi parce qu'il est optimisé pour CLS afin de garantir une interaction plus fluide, évitant ainsi de pénaliser vos Core Web Vitals.

La beauté du joueur, c'est que il est conçu uniquement pour les marques de commerce électronique et Shopify pour améliorer l'expérience utilisateur sans problèmes de performances.

‍

Réflexions finales

À la fin de cet article, il va sans dire que ces applications sont indispensables pour les marques en ligne qui cherchent à augmenter les conversions et à améliorer leur expérience utilisateur. Mais, dans le même temps, ils peuvent également avoir un impact négatif sur la stabilité visuelle si celle-ci n'est pas optimisée de la bonne manière. Les problèmes liés au CLS doivent être maîtrisés afin d'éviter que les classements SEO ne réduisent et ne frustrent les clients.

Si vous recherchez un lecteur vidéo qui optimisera la stabilité de votre site, jetez un œil à Vidjet et regardez vos boutiques Shopify augmentent les taux de conversion et les ventes, sans réduire la vitesse ni fixer de faibles normes en matière d'expérience visuelle !

‍