L’optimisation des Core Web Vitals de Shopify est la pratique technique consistant à améliorer la vitesse de chargement, l’interactivité et la stabilité visuelle sur les pages de paiement et de panier du commerce électronique. Les commerçants y parviennent en réduisant l’exécution des scripts tiers, en optimisant la diffusion des images via le réseau de diffusion de contenu (CDN) de Shopify et en minimisant les décalages de mise en page causés par le contenu dynamique. Ces actions garantissent une expérience utilisateur rapide et fiable, essentielle pour maintenir un bon classement dans les moteurs de recherche et augmenter les taux de conversion lors des dernières étapes du parcours client.
Qu’est-ce qui affecte la vitesse du panier Shopify ?
La page du panier est souvent la partie la plus dynamique d’une boutique Shopify. Elle repose fréquemment sur une logique Liquid complexe pour calculer les remises, les estimations d’expédition et les niveaux de stock en temps réel. Lorsqu’un utilisateur ajoute un article, le thème doit souvent exécuter plusieurs fonctions JavaScript pour mettre à jour le tiroir du panier ou la page dédiée du panier sans rechargement complet. Ce processus peut devenir lent si le code du thème n’est pas efficace.
Les boucles Liquid excessives sont une cause fréquente de lenteur des temps de réponse du serveur. Par exemple, si une page de panier parcourt chaque produit d’une grande collection pour suggérer des articles associés, le serveur met plus de temps à générer le HTML. Ce délai augmente le temps jusqu’au premier octet (TTFB), ce qui retarde toutes les autres étapes de chargement. Un backend lent rend impossible l’obtention de scores élevés dans d’autres mesures de performance.
Lorsqu’un serveur met trop de temps à traiter une requête, toute la chaîne d’événements, y compris le téléchargement des CSS et des scripts, est retardée.
Google Search Central
Pourquoi le Largest Contentful Paint est-il lent sur les pages de panier riches en produits ?
Le Largest Contentful Paint (LCP) mesure le moment où le plus grand élément visible à l’écran finit de s’afficher. Sur une page de panier, il s’agit généralement de l’image du premier produit dans le panier ou d’une grande bannière promotionnelle. Si ces images ne sont pas optimisées, le score LCP en pâtira, signalant aux moteurs de recherche que la page semble lente pour l’utilisateur.
De nombreux thèmes Shopify appliquent le chargement différé (lazy loading) à toutes les images par défaut. Bien que cela soit utile pour les longues pages de produits, c’est préjudiciable pour les éléments LCP. Les images qui apparaissent au-dessus de la ligne de flottaison doivent être chargées avec une priorité élevée. De plus, l’utilisation de polices personnalisées qui mettent du temps à se charger peut retarder le rendu des éléments LCP basés sur du texte, ce qui conduit à une mauvaise expérience utilisateur.
- Utilisez l’attribut fetchpriority=’high’ pour la première image du produit dans le panier.
- Assurez-vous que les images sont servies dans des formats modernes comme WebP ou AVIF via les filtres automatiques de Shopify.
- Définissez des attributs de largeur et de hauteur explicites pour éviter le redimensionnement pendant le processus de chargement.
- Préchargez le fichier CSS principal pour vous assurer que la mise en page est prête avant l’arrivée de l’image.
Gestion de l’Interaction to Next Paint (INP) pour les boutons de paiement
L’Interaction to Next Paint (INP) est une mesure qui évalue la réactivité globale d’une page aux entrées de l’utilisateur. Dans une boutique Shopify, les interactions les plus critiques se produisent lorsqu’un utilisateur clique sur « Mettre à jour le panier » ou « Procéder au paiement ». Si le navigateur est occupé à exécuter des tâches JavaScript lourdes, ces clics sembleront lents ou ne répondront pas.
Les tâches longues sont le principal ennemi d’un bon score INP. Ce sont des scripts qui occupent le thread principal pendant plus de 50 millisecondes. Dans un environnement Shopify typique, ces tâches sont souvent déclenchées par des pixels de suivi, des widgets de programme de fidélité ou des calculateurs d’expédition complexes. Lorsque ces scripts s’exécutent, le navigateur ne peut pas mettre à jour l’écran pour indiquer que le bouton a été cliqué.
Si des bibliothèques externes, des scripts de suivi ou des routines massives d’hydratation de framework occupent le processeur pendant cette fenêtre critique, la page se fige temporairement.
Google Search Central
Comment Alien Road applique l’optimisation des Core Web Vitals de Shopify
Chez Alien Road, nous suivons un processus systématique pour améliorer les performances de nos clients. Nous commençons par un audit approfondi des fichiers liquid du thème Shopify et des applications installées. Dans une mission typique, nous constatons souvent que jusqu’à 30 % du JavaScript chargé sur la page du panier provient d’applications qui ont été désinstallées mais qui ont laissé du code « zombie ». Nous supprimons manuellement ces restes pour alléger le poids de la page.
Pour une boutique Shopify vendant des articles de mode, par exemple, nous pourrions identifier que l’animation d’ouverture du tiroir du panier est bloquée par un script d’automatisation marketing lourd. Notre équipe utilise Chrome DevTools pour localiser la tâche longue spécifique causant le retard. Nous déplaçons ensuite ces scripts non essentiels vers une séquence de chargement différé, en veillant à ce qu’ils ne s’exécutent qu’une fois que l’utilisateur a terminé son interaction principale. Cet ajustement technique améliore considérablement le score INP sans perdre de données marketing.
Nous implémentons également du code personnalisé pour l’API AJAX du panier. Au lieu de rafraîchir toute la page lorsqu’une quantité change, nous mettons à jour uniquement les éléments textuels spécifiques. Cela réduit la quantité de données transférées et empêche les décalages de mise en page, créant une interface solide et stable pour le client.
Comment réduire le Cumulative Layout Shift dans le processus de paiement ?
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle d’une page. Sur Shopify, les problèmes de CLS surviennent souvent lorsque des éléments dynamiques tels que les frais d’expédition, les messages de réduction ou les recommandations « Achetez-le avec » apparaissent dans la mise en page après la peinture initiale. Cela provoque le déplacement soudain du bouton « Paiement », ce qui peut entraîner des clics accidentels ou une frustration générale.
Pour résoudre ce problème, les développeurs doivent réserver de l’espace pour ces éléments en utilisant les propriétés CSS min-height. De plus, les décalages de mise en page surviennent souvent lorsque les polices Web se chargent et remplacent les polices système, ce qui entraîne une modification de la taille des blocs de texte. L’utilisation de la propriété « font-display: swap » et la correspondance des mesures de la police de secours peuvent atténuer cet effet. Maintenir une mise en page stable est un facteur clé pour instaurer la confiance lors des dernières étapes d’un achat.
Comment l’encombrement des applications tierces affecte-t-il les performances de Shopify ?
Chaque application ajoutée à une boutique Shopify injecte généralement sa propre balise de script dans le thème. Bien que ces applications offrent des fonctionnalités précieuses comme les avis ou la vente croisée, elles chargent souvent leurs ressources sur chaque page, y compris le paiement. Cela crée un énorme arriéré de requêtes réseau qui se disputent la bande passante.
Pour gérer cela, les spécialistes du marketing doivent auditer régulièrement leur liste d’applications. Si une application n’est nécessaire que sur la page produit, son script ne doit pas être autorisé à se charger sur les pages de panier ou de paiement. De nombreux thèmes Shopify modernes permettent un chargement conditionnel, qui peut être utilisé pour restreindre les scripts à des modèles spécifiques. Cette approche maintient l’environnement de paiement propre et rapide.
- Identifiez les scripts qui prennent plus de 50 ms à s’exécuter à l’aide de l’onglet Performance.
- Consolidez plusieurs pixels de suivi dans un seul conteneur de gestionnaire de balises.
- Remplacez les applications lourdes par des alternatives de code Liquid légères dans la mesure du possible.
- Désactivez les fonctionnalités d’application qui ne sont pas essentielles à l’expérience d’achat mobile.
Stratégies techniques pour le temps jusqu’au premier octet (TTFB)
Bien que Shopify soit une plateforme hébergée, les développeurs ont toujours un certain contrôle sur les performances du backend. La réduction du nombre de filtres Liquid complexes et de boucles imbriquées dans le modèle de panier peut conduire à une génération HTML plus rapide. Pour améliorer cela, les développeurs peuvent tirer parti du réseau de diffusion de contenu de Shopify en s’assurant que toutes les ressources sont appelées à l’aide des filtres d’URL corrects.
Un TTFB élevé est souvent le signe d’un thème surchargé. Dans certains cas, le code personnalisé qui récupère des données à partir d’API externes pendant le chargement de la page peut provoquer des retards importants. Il est préférable de récupérer ces données de manière asynchrone une fois que le contenu principal de la page a été livré au navigateur. Cela garantit que l’utilisateur voit le contenu du panier le plus rapidement possible.
Commencez votre audit de performance cette semaine
La première étape vers de meilleures performances est la mesure. Ouvrez votre boutique Shopify dans une fenêtre de navigateur privée et utilisez le panneau Lighthouse ou Performance de Chrome DevTools pour enregistrer une trace de votre page de panier. Recherchez les signaux d’alarme dans la section « Tâches longues » et identifiez quels scripts bloquent le thread principal. Une fois que vous avez une liste détaillée des goulots d’étranglement, vous pouvez commencer le processus de nettoyage en supprimant les applications inutilisées et en optimisant la logique de chargement des images de votre thème. Une surveillance régulière garantit que les nouvelles mises à jour ne dégradent pas l’expérience au fil du temps.