Performances web

Surveillez et améliorez les Core Web Vitals de votre boutique Align grâce aux rapports Shopify sur les performances web.

Tous les guides de démarrage Documentation de référence

Liens en vedette

Vidéos utiles

Vidéo Shopify sur les performances web

Performances web de la boutique en ligne

Le tableau de bord Web Performance de Shopify mesure l’expérience des visiteurs de votre boutique en ligne Align, notamment la vitesse de chargement, la réactivité lors des interactions et la stabilité visuelle. Utilisez-le pour comprendre le parcours client, du premier chargement de page aux déplacements inattendus causés par des éléments tels que les fenêtres contextuelles.

Ces mesures vous aident à prioriser les améliorations qui favorisent une expérience d’achat plus fluide, la conversion et la visibilité. Company XYZ peut vous aider pour les questions propres à Align ; utilisez les rapports Shopify pour déterminer si une personnalisation du thème, une application ou le contenu de la boutique nécessite une investigation.

Comment les performances web sont mesurées

Les performances web sont mesurées à l’aide de mesures clés appelées Core Web Vitals.

Mesure	Ce qu’elle mesure	Bon résultat
Largest Contentful Paint (LCP)	Vitesse de chargement, selon la rapidité avec laquelle le plus grand élément ou le contenu principal devient visible	Le contenu principal se charge dans les 2,5 secondes suivant le début du chargement de la page
Interaction to Next Paint (INP)	Réactivité, selon le temps nécessaire à la page pour fournir un retour visuel après une interaction telle que la sélection d’un lien ou d’un bouton	Moins de 200 millisecondes
Cumulative Layout Shift (CLS)	Stabilité visuelle, selon l’importance des déplacements inattendus du contenu pendant le chargement	Moins de 0,1

Google évalue également la compatibilité mobile, la sécurité de la navigation, la sécurité HTTPS et l’absence d’interstitiels intrusifs. Les interstitiels intrusifs masquent entièrement le contenu, comme les fenêtres contextuelles promotionnelles ou les demandes de vérification de l’âge. Ensemble, ces facteurs contribuent à évaluer les performances et l’expérience utilisateur d’une page.

Pourquoi les performances web sont importantes

Les performances de votre boutique peuvent avoir une incidence sur l’expérience client, le taux de conversion et la visibilité.

Expérience et conversion

Une boutique qui se charge rapidement et offre des interactions fluides crée une meilleure expérience sur tous les appareils et à toutes les vitesses de connexion. Lorsqu’un site est lent ou difficile à parcourir, les visiteurs sont plus susceptibles de partir avant d’acheter quelque chose

L’amélioration des performances web peut faciliter les achats et favoriser de meilleurs taux de conversion

Visibilité

Les moteurs de recherche tels que Google utilisent la vitesse des pages comme facteur de classement. Les pages qui obtiennent de mauvais résultats pour les Core Web Vitals peuvent être moins bien classées, même lorsque la boutique est par ailleurs optimisée pour les moteurs de recherche

L’amélioration des performances peut augmenter les chances de votre boutique d’obtenir un meilleur classement et une plus grande visibilité dans les recherches.

Équilibrer les fonctionnalités et les performances de la boutique

Votre boutique Align peut inclure des personnalisations de thème, des applications, des images, des vidéos, des carrousels, des flux sociaux et des outils d’analyse. Ces fonctionnalités peuvent améliorer l’expérience des visiteurs et étendre les possibilités de votre boutique, mais chaque fonctionnalité supplémentaire peut avoir une incidence sur les Core Web Vitals.

Certaines fonctionnalités ralentissent une page ou créent un comportement inattendu. Avant d’ajouter ou de conserver une fonctionnalité, évaluez les avantages qu’elle présente pour les clients par rapport à son incidence sur les performances.

Posez-vous les questions suivantes :

Qu’est-ce qui aide les clients à décider d’acheter ? Déterminez si les clients tireraient davantage profit d’une page d’accueil simple comportant des liens vers des pages de produits détaillées, ou d’une page d’accueil plus riche en fonctionnalités leur permettant d’afficher et d’acheter rapidement des produits.
Qu’est-ce qui doit apparaître en haut de la page ? L’image de marque, les images mises en avant et un panier de paiement peuvent avoir une incidence sur les performances, mais ils peuvent également favoriser la conversion.
Qu’est-ce qui peut se charger après le défilement des clients ? Les outils d’analyse et les avis sur les produits n’ont pas besoin de se charger immédiatement lorsqu’une personne arrive sur le site. Consultez le développeur de votre thème ou de votre application si vous devez vérifier si une fonctionnalité se charge immédiatement.

Afficher les données de performances web

Pour afficher les rapports de performances web, vous devez disposer de l’autorisation d’employé Reports. Pour alimenter le tableau de bord avec les Real User Metrics (RUM), supprimez la protection par mot de passe de votre boutique en ligne

Vous pouvez ouvrir les rapports de performances web au fil du temps depuis le résumé des mesures de performance sur la page Themes. Vous pouvez également trouver tous les rapports de performances web dans la liste Reports de votre interface administrateur Shopify.

Afficher le résumé des mesures de performance

Le résumé des mesures de performance de la page Themes fournit un aperçu rapide de vos trois Core Web Vitals au fil du temps. En savoir plus sur le résumé des mesures de performance

Depuis votre interface administrateur Shopify, accédez à Online Store > Themes
Facultatif : utilisez le sélecteur de dates pour afficher Today, Last 7 days ou Last 30 days.
Facultatif : sélectionnez une mesure dans le résumé pour ouvrir son rapport.
- Sélectionnez LCP P75 (ms) pour ouvrir le rapport Largest Contentful Paint : au fil du temps
- Sélectionnez INP P75 (ms) pour ouvrir le rapport Interaction to Next Paint : au fil du temps
- Sélectionnez Cumulative Layout Shift pour ouvrir le rapport Cumulative Layout Shift : au fil du temps
- Sélectionnez Sessions by Device Type pour ouvrir le rapport Sessions by device type

Afficher les rapports de performances web

Plusieurs rapports de performances web sont disponibles dans la liste Reports. Utilisez le panneau de configuration ou l’éditeur de requêtes ShopifyQL pour adapter un rapport aux données dont vous avez besoin. En savoir plus sur l’utilisation des rapports Shopify

Depuis votre interface administrateur Shopify, accédez à Analytics > Reports
Recherchez le rapport souhaité.
- Recherchez : pour afficher tous les rapports de performances web.
- Recherchez contentful pour afficher les rapports Largest Contentful Paint.
- Recherchez next pour afficher les rapports Interaction to Next Paint.
- Recherchez cumulative pour afficher les rapports Cumulative Layout Shift.
Sélectionnez le nom du rapport pour l’ouvrir.

Comprendre le résumé des mesures de performance

Le résumé des mesures de performance web utilise les données d’utilisateurs réels des 30 derniers jours pour évaluer votre boutique selon les trois Core Web Vitals. Chaque mesure reçoit un classement Bonne, À améliorer ou Mauvaise, basé sur l’expérience des 75 % d’utilisateurs les mieux servis.

Le résumé comprend :

Largest Contentful Paint (LCP), qui reflète la vitesse de chargement et la rapidité d’apparition du plus grand élément visible.
Interaction to Next Paint (INP), qui reflète la réactivité et le délai avant que le navigateur n’affiche l’image suivante ou une modification visible après une interaction, telle que la sélection d’un lien ou d’un bouton.
Cumulative Layout Shift (CLS), qui reflète l’importance des déplacements inattendus du contenu lors du chargement ou de la navigation sur la page.
Sessions de visiteurs en ligne par type d’appareil.

Core Web Vital	Classement	Mesure cible	Signification
Largest Contentful Paint (LCP)	Bonne	Inférieure ou égale à 2500 ms	La plupart des utilisateurs bénéficient d’un chargement rapide
	À améliorer	Supérieure à 2500 ms et inférieure à 4000 ms	Certains utilisateurs bénéficient d’un chargement rapide, mais des améliorations sont possibles
	Mauvaise	Supérieure à 4000 ms	La plupart des utilisateurs subissent un chargement lent qui doit être amélioré
Interaction to Next Paint (INP)	Bonne	Inférieure ou égale à 200 ms	La plupart des utilisateurs bénéficient d’une bonne réactivité de la page
	À améliorer	Supérieure à 200 ms et inférieure à 500 ms	Certains utilisateurs bénéficient d’une bonne réactivité, mais des améliorations sont possibles
	Mauvaise	Supérieure à 500 ms	La plupart des utilisateurs subissent une réactivité lente et frustrante qui doit être améliorée
Cumulative Layout Shift (CLS)	Bonne	Inférieure ou égale à 0,1	La plupart des utilisateurs bénéficient d’une mise en page stable pendant le chargement
	À améliorer	Supérieure à 0,1 et inférieure à 0,25	Certains utilisateurs bénéficient d’une mise en page stable, mais des améliorations sont possibles
	Mauvaise	Supérieure ou égale à 0,25	La plupart des utilisateurs subissent une mise en page instable, ce qui peut être gênant et doit être amélioré

Lorsqu’une mesure est À améliorer ou Mauvaise, utilisez les rapports Web Performance pour examiner les causes probables et décider des améliorations à apporter.

Utiliser les rapports de performances web

Une fois que le résumé des mesures de performance contient suffisamment de données pour évaluer les Core Web Vitals, utilisez les rapports pour identifier les pages et les changements susceptibles d’influencer vos résultats. Vous pourrez ainsi prendre des décisions mieux éclairées sur les éléments à optimiser.

L’appareil, le réseau et la localisation des clients échappent à votre contrôle. Les visiteurs utilisent différents appareils et connexions Internet dans le monde entier ; certaines dates ou pages peuvent donc être classées Moderate ou Poor même lorsque votre mesure globale est bonne. Concentrez-vous sur le résultat global plutôt que sur des valeurs isolées.

Examiner les performances au fil du temps

Utilisez ces rapports pour voir comment chaque Core Web Vital évolue au fil du temps :

Par défaut, ces rapports affichent le 75e percentile du Core Web Vital concerné en millisecondes. Utilisez le panneau de configuration pour personnaliser un rapport et ajustez Dimensions et Filters, comme la période, le regroupement des dates et le type d’appareil. En savoir plus sur la personnalisation de vos rapports

Le graphique linéaire montre comment des changements tels que l’installation d’applications, les mises à jour du thème Align et l’ajout de code ont pu modifier un Core Web Vital au fil du temps. Il comprend :

Un score de Summary des performances web pour la période sélectionnée.
Des annotations d’événements verticales numérotées sur lesquelles vous pouvez placer le curseur pour voir les changements de la boutique susceptibles d’affecter les performances.
Des lignes horizontales de seuil indiquant les limites entre les résultats Bonne, À améliorer et Mauvaise.

La colonne de mesure de distribution du tableau de données comprend un graphique à barres indiquant les visites de pages dans chaque catégorie : bonnes (vert), modérées (jaune) et mauvaises (rouge).

Examiner les performances par URL de page

Utilisez ces rapports pour trouver les URL individuelles qui nécessitent peut-être votre attention :

Ces rapports affichent par défaut le 75e percentile du Core Web Vital concerné en millisecondes. Utilisez le panneau de configuration, Dimensions et Filters pour affiner la période, le regroupement des dates, le type d’appareil et d’autres détails. Consultez la page consacrée à la personnalisation de vos rapports

Les rapports par URL de page ne comprennent pas de visualisation graphique. Ils affichent uniquement le tableau de données, avec Page path comme dimension principale par défaut. Le graphique à barres de la mesure de distribution indique les visites de pages bonnes (vertes), modérées (jaunes) ou mauvaises (rouges).

Examiner les performances par type de page

Utilisez ces rapports pour déterminer si une catégorie de pages contribue à un problème de performance :

Ces rapports affichent par défaut le 75e percentile du Core Web Vital concerné en millisecondes. Personnalisez-les avec le panneau de configuration, Dimensions et Filters, tels que la période, le regroupement des dates et le type d’appareil. En savoir plus sur la personnalisation de vos rapports

Les rapports par type de page ne comprennent pas de visualisation graphique. Ils affichent le tableau de données, avec Page type comme dimension principale par défaut, ainsi qu’une barre de distribution des visites de pages bonnes (vertes), modérées (jaunes) et mauvaises (rouges).

Examiner un problème

Consultez le résumé des mesures de performance pour identifier le Core Web Vital qui nécessite votre attention.
Pour cette mesure, utilisez les trois vues du rapport afin de préciser le problème.
- Utilisez Over Time pour identifier le moment où le score a changé.
- Utilisez Page Type pour vérifier si certains modèles de page sont concernés.
- Utilisez Page URL pour identifier les pages concernées.
Comparez le moment du changement avec les modifications apportées à votre boutique, puis utilisez les pages et les éléments identifiés pour effectuer une amélioration ciblée.
Pour obtenir des conseils détaillés, consultez Améliorer les performances de votre boutique en ligne

Foire aux questions

Pourquoi le score de vitesse Google Lighthouse a-t-il été supprimé ?

Google Lighthouse utilise des environnements simulés pour les scores de vitesse. Il est utile pour obtenir un aperçu rapide, mais ne représente pas les expériences d’utilisateurs réels. Google accorde désormais la priorité aux Core Web Vitals pour les classements SEO ; en savoir plus auprès de Google

Pourquoi n’ai-je pas encore de scores ?

Votre boutique est protégée par mot de passe. Une boutique protégée par mot de passe ne reçoit pas le trafic d’utilisateurs réels nécessaire pour générer les Core Web Vitals. Supprimez la page de mot de passe pour permettre aux utilisateurs de visiter le site.
Votre boutique ne reçoit pas encore de trafic. Sans consultations de pages, aucune mesure d’utilisateur réel ne peut être affichée.

Pourquoi ai-je du trafic, mais aucun score Core Web Vital ?

Les Core Web Vitals sont un produit Google et sont actuellement disponibles uniquement dans les navigateurs basés sur Chromium. Les navigateurs modernes tels que Safari et Safari iOS utilisent des technologies similaires ; les mesures représentent donc toujours fidèlement l’expérience des utilisateurs sur votre site.

Pourquoi certains indicateurs ont-ils un score, mais pas les autres ?

Chaque mesure évalue une partie différente de l’expérience et dépend d’une activité différente des visiteurs. Par exemple, Largest Contentful Paint mesure le chargement de la page, tandis que Interaction to Next Paint mesure la rapidité avec laquelle la page fournit un retour visuel après une interaction. Si les visiteurs n’interagissent pas avec la page, la mesure INP peut ne pas recevoir de score.

Pourquoi un score a-t-il changé ?

Les scores peuvent changer en raison du volume de trafic ou des mises à jour de la boutique. Si un faible trafic entraîne d’importantes fluctuations, essayez un filtre hebdomadaire ou mensuel.

Les scores peuvent également changer après l’importation de produits, la création de collections, la modification d’Align, la personnalisation de son code ou l’ajout d’une application. Découvrez les facteurs susceptibles d’avoir un impact sur les performances de votre boutique en ligne

Comment améliorer mon score ou mon classement ?

Consultez Améliorer les performances de votre boutique en ligne pour obtenir des conseils d’amélioration.

Pourquoi les scores du tableau de bord diffèrent-ils de ceux d’autres outils ?

Le tableau de bord Web Performance peut différer d’autres outils pour les raisons suivantes :

Fuseau horaire. Les données du tableau de bord utilisent la norme UTC, qui peut différer du fuseau horaire d’un autre outil.
Collecte des données. Le tableau de bord recueille un ensemble de données plus large auprès des navigateurs Chromium, notamment Chrome, Opera, Edge et Samsung Internet, ainsi que Firefox. Des outils tels que PageSpeed Insights de Google utilisent le rapport CrUX pour les navigateurs Chrome ayant accepté de fournir leurs données. En savoir plus sur les données CrUX
Conseils sur les performances. Consultez Améliorer les performances de votre boutique en ligne avant de comparer les résultats ou de planifier des changements.

Améliorer les performances de la boutique en ligne

De nombreux facteurs affectent les performances d’une boutique en ligne. Certains dépendent de vous, tandis que d’autres dépendent de vos clients ou de votre infrastructure. Commencez par consulter votre rapport Web Performance pour comprendre les résultats actuels.

Facteurs que vous ne pouvez pas contrôler

Appareil, réseau et emplacement du client

Les clients visitent votre boutique depuis différents emplacements, appareils et connexions Internet. Par conséquent, une même boutique peut se charger plus ou moins rapidement selon les visiteurs.

Lorsqu’un client signale que la boutique est lente, demandez-lui de vérifier les points suivants :

Son navigateur est à jour.
Il a récemment vidé le cache de son navigateur.
Son fournisseur d’accès à Internet ne subit pas de panne ou de dégradation du service.

Infrastructure Shopify

Shopify héberge les boutiques en ligne sur des serveurs rapides et internationaux, sans limiter la bande passante des boutiques. Vérifiez l’état de votre boutique Shopify sur Shopify Status

Les améliorations continues de l’infrastructure et du code peuvent se refléter dans les mesures de performance. Les services et fonctionnalités suivants peuvent également affecter la vitesse.

Réseau de diffusion de contenu (CDN)

Un CDN, ou réseau de diffusion de contenu, stocke les images et autres fichiers, notamment le contenu importé dans Content > Files. Shopify fournit un CDN mondial géré par Cloudflare pour aider les boutiques à se charger rapidement partout dans le monde.

Vérifiez la disponibilité du CDN sur la page d’état Cloudflare

Cache local du navigateur

Votre boutique enregistre temporairement certains éléments dans le stockage local du navigateur d’un client. Lors d’une visite ultérieure, le navigateur peut charger les ressources mises en cache au lieu d’effectuer une nouvelle demande au serveur.

Shopify définit à un an la durée de mise en cache des ressources de la boutique pour chaque fichier. Les ressources pouvant être mises en cache comprennent les images, les PDF, les fichiers JS et les fichiers CSS.

Cache de page côté serveur

Les pages sont également mises en cache sur le serveur. Le premier chargement peut être plus lent, tandis que les chargements suivants peuvent être plus rapides, car les visiteurs reçoivent une copie mise en cache.

Ressources dans `content_for_header`

L’objet Liquid content_for_header ajoute des ressources utilisées par diverses fonctionnalités de la boutique en ligne, notamment les analyses de performance et des fonctionnalités facultatives telles que les boutons de paiement dynamique. Le chargement de cet objet et de ses ressources associées affecte la vitesse de la boutique, et Shopify continue d’optimiser la balise et ses ressources.

Facteurs que vous pouvez contrôler

Applications

Les applications qui modifient les fonctionnalités ou l’apparence de votre boutique peuvent ajouter du code à Align pour pouvoir fonctionner. Supprimer, réorganiser ou désactiver les fonctionnalités d’application inutiles peut améliorer les performances.

Si une application ralentit votre boutique :

Désactivez les fonctionnalités d’application que vous n’utilisez pas, ou supprimez l’application si elle n’est plus nécessaire. Tenez compte de l’équilibre entre les fonctionnalités et la vitesse de la boutique en ligne
Lorsque vous supprimez une application, envisagez de supprimer le code ajouté lors de son installation. La plupart des applications suppriment automatiquement leur propre code, mais vérifiez ce point auprès du développeur de l’application. Certaines applications identifient leur code au moyen de balises {% comment %} contenant le nom de l’application. La suppression du code d’application inutilisé évite d’exécuter du code associé à des fonctionnalités que vous n’utilisez plus et facilite la maintenance de votre thème.
Demandez conseil au développeur de l’application.

Thème Align et personnalisations

Align utilise Liquid, HTML, CSS et JavaScript. Les personnalisations peuvent augmenter la taille des fichiers et affecter les performances web.

Si Align ou une personnalisation contribue à ralentir les performances :

Désactivez les fonctionnalités du thème que vous n’utilisez pas. Tenez compte de l’équilibre entre les fonctionnalités et la vitesse de la boutique en ligne
Envisagez d’utiliser une police système
Pour toute question concernant Align, consultez la documentation de Company XYZ ou contactez le support de Company XYZ.

Fonctionnalités du thème ou des applications

Les fonctionnalités activées peuvent affecter les performances. Par exemple, une fenêtre contextuelle d’affichage rapide peut précharger les informations de chaque produit d’une page de collection. Le chargement de données que les clients n’utilisent pas peut ralentir la page sans apporter de valeur.

Désactivez les fonctionnalités dont vous n’avez pas besoin. Tenez compte de l’équilibre entre les fonctionnalités et les performances de la boutique en ligne
Demandez aux développeurs de votre thème et de vos applications si une fonctionnalité précharge des données.

Code Liquid complexe ou inefficace

Presque tout le code Liquid utilisé pour afficher une boutique peut être modifié, mais des opérations complexes répétées peuvent augmenter le temps de rendu Liquid et affecter les performances globales. Par exemple, triez les produits d’une collection par prix avant de parcourir les produits, plutôt que d’effectuer le tri dans la boucle. L’ordre ne change pas pour chaque produit : le recalculer à plusieurs reprises ajoute donc du temps de traitement.

Si vous craignez que le code ne soit pas optimisé :

Exécutez Shopify Theme Inspector for Chrome pour identifier les lignes de code qui ralentissent les pages de la boutique.
Faites appel à un Shopify Partner pour identifier le code inefficace ou superflu.

Images et vidéos

Les images trop volumineuses et les images masquées peuvent retarder le chargement d’un contenu plus important. Lorsque les clients attendent le chargement de grandes images, la boutique peut sembler lente.

Shopify comprend des protections qui contribuent à limiter cet impact :

Les pages de collection ne peuvent pas contenir plus de 50 produits et les pages d’accueil plus de 25 sections.
De nombreux thèmes diffèrent le chargement des images qui ne sont pas actuellement visibles à l’écran.
De nombreux thèmes chargent une taille d’image adaptée à la taille de l’écran sur lequel elle apparaît.

Ces protections n’empêchent pas complètement les images et les vidéos d’affecter les performances. Si des contenus multimédias ralentissent votre boutique :

Consultez le guide d’optimisation des images
Limitez les diaporamas d’images mises en avant à deux ou trois diapositives, ou utilisez une seule image mise en avant.
Demandez à votre développeur de thème quelle est la meilleure façon d’utiliser les images dans votre thème.

Polices

Les polices affectent les performances, car toute police qui ne se trouve pas déjà sur l’appareil d’un visiteur doit être fournie avant que le navigateur puisse afficher le texte avec celle-ci. Les polices personnalisées ajoutent des fichiers à la page, et les fichiers volumineux ou non optimisés augmentent la quantité de données que chaque visiteur doit télécharger.

Utilisez les polices personnalisées avec prudence. Dans la mesure du possible, choisissez des fichiers de police modernes et optimisés et évitez les graisses, styles et jeux de caractères superflus. Les polices de la propre bibliothèque de polices de Shopify sont déjà optimisées pour les thèmes Shopify, mais il est tout de même préférable de limiter le nombre de familles de polices.

En règle générale, n’utilisez pas plus de deux familles de polices personnalisées par boutique, par exemple une pour les titres et une pour le corps du texte. Plus le nombre de familles de polices est élevé, plus le nombre de fichiers à télécharger est important, ce qui peut ralentir le chargement, notamment sur les appareils mobiles et les connexions lentes.

Notes d’utilisation

Commencez par la tendance générale. Donnez la priorité à un Core Web Vital lorsque son classement récapitulatif est systématiquement À améliorer ou Mauvaise, plutôt que de réagir à une seule page ou date faible.
Examinez les données dans l’ordre. Utilisez les rapports au fil du temps pour déterminer quand un changement s’est produit, puis les rapports par type de page et par URL de page pour localiser les modèles et pages concernés.
Comparez les changements à la valeur client. Conservez les fonctionnalités qui aident les acheteurs à acheter, mais désactivez ou différez celles qui apportent peu de valeur et chargent des données inutiles.
Tenez compte du volume de trafic. Utilisez des filtres hebdomadaires ou mensuels lorsque le faible trafic entraîne de fortes fluctuations des données quotidiennes.
Effectuez des changements ciblés. Lorsque cela est possible, modifiez une seule cause probable à la fois, puis laissez suffisamment de données d’utilisateurs réels s’accumuler avant d’évaluer le résultat.