Comment optimiser les éléments vitaux Web de base sur Shopify

Il existe de nombreuses informations en ligne sur la façon de mesurer Core Web Vitals et si votre site obtient un bon ou un mauvais score. Mais il y a très peu de conseils pratiques sur ce que vous devez faire pour apporter des améliorations, en particulier sur Shopify.

Dans cet article, nous verrons comment vous pouvez exactement améliorer votre score Core Web Vitals sur votre boutique Shopify. Nous avons essayé de rendre le plus grand nombre de ces recommandations exploitables sans développeur, mais certaines nécessitent une mise en œuvre technique experte.

Nous décomposerons tour à tour chaque métrique essentielle du Web, expliquerons quels facteurs affectent leurs performances, puis vous montrerons comment améliorer chaque métrique CWV sur n'importe quel magasin Shopify.

Cliquez sur les titres ci-dessous pour accéder directement à cette section :

• Comment les éléments vitaux Web de base sont-ils calculés sur Shopify
• Comment améliorer LCP sur Shopify
• Comment améliorer CLS sur Shopify
• Comment améliorer le FID sur Shopify
• Applications Shopify Core Web Vitals

Que sont les éléments vitaux Web de base

Récapitulons très brièvement ce que sont les Core Web Vitals.

Les Core Web Vitals sont un ensemble de mesures que Google utilise pour mesurer les performances et l'expérience des utilisateurs sur les pages Web. Pour chaque métrique, les URL sont marquées comme "Verte - Bon", "Orange - Besoin d'amélioration" ou "Rouge - Médiocre".

Les scores Core Web Vitals ont un impact direct sur les classements des moteurs de recherche.

LCP - La plus grande peinture de contenu

Combien de temps faut-il pour que le plus grand élément de votre page s'affiche à l'écran ?

CLS - Changement de mise en page cumulatif

De combien la mise en page se déplace-t-elle lors du chargement de la page ?

FID - Premier délai d'entrée

Combien de temps faut-il à la page pour devenir réactive aux interactions ?

Comment les éléments vitaux Web de base sont-ils calculés sur Shopify

Il est important de comprendre comment Google calcule les scores Core Web Vitals, car cela affecte la manière d'apporter des améliorations significatives. Les données de Core Web Vitals proviennent des données CrUX qui mesurent les performances des visiteurs réels du site Web utilisant le navigateur Web Chrome. C'est ce qu'on appelle les « données de terrain ».

Pour chaque métrique CWV, il y a un score moyen minimum que vous devez atteindre pour ne pas être marqué comme "médiocre". Ceci est basé sur les scores moyens enregistrés par rapport à des groupes de pages. Il est important de comprendre que votre site Web Shopify n'est pas évalué par rapport à une métrique Web vitale de base ; les URL de votre site Web le sont.

Lorsque votre boutique Shopify échoue sur une métrique Core Web Vitals, la Search Console vous montrera un échantillon d'URL qui ont été affectées par le problème. Cela vous aide à déterminer où se situe le problème et à appliquer l'amélioration ciblée. Avant de commencer tout travail d'optimisation de Core Web Vitals sur votre boutique Shopify, identifiez d'abord les domaines d'amélioration qui auront le plus d'impact. Ne perdez pas votre temps sur un travail qui ne produira pas de résultat positif.

Shopify Core Web Vital Metric Conseils d'optimisation

Core Web Vitals consiste à fournir votre contenu et vos ressources les plus importants le plus rapidement possible.

L'optimisation de la vitesse des pages n'est pas une chose ponctuelle. Votre organisation doit adopter une culture où l'impact sur la vitesse des pages est pris en compte dans toutes les prises de décision. Pour chaque amélioration que vous envisagez d'apporter à votre boutique, considérez quel sera le compromis sur la vitesse de la page.

Comment améliorer LCP sur Shopify

LCP fait référence à l'élément le plus volumineux de votre page et au temps qu'il faut au navigateur pour charger et afficher cet élément à l'écran. Ce sera normalement une image, mais cela pourrait aussi être un élément de texte.

Pour améliorer le LCP sur un magasin Shopify, il est utile de comprendre les facteurs qui affectent le LCP. Quatre étapes sont nécessaires pour charger votre élément LCP.

LCP concerne le temps qu'il faut au navigateur Web pour peindre/afficher votre plus grand élément sur la page. Le chargement et la peinture ne sont pas les mêmes choses. Même si votre élément LCP est optimisé pour une petite taille de fichier minuscule, LCP peut encore prendre beaucoup de temps à cause de :

• Délai de chargement des ressources. Le navigateur met trop de temps à commencer à télécharger l'élément
• Délai de rendu des éléments. Une fois l'élément LCP téléchargé par le navigateur, le rendu de l'élément sur la page prend trop de temps.

L'idée à retenir ici est que LCP est plus que la taille de fichier de votre élément le plus volumineux. C'est le temps qu'il faut pour terminer le processus en 4 étapes ci-dessus. Pour améliorer vos scores LCP, concentrez-vous sur l'ensemble du processus de chargement et de rendu de votre élément LCP.

Comment trouver l'élément LCP sur n'importe quelle page Shopify

Pour améliorer LCP, vous devez savoir quel élément d'une page est le LCP. C'est facile sur Shopify. Accédez simplement à PageSpeed ​​Insights et analysez l'URL pour laquelle vous devez trouver le LCP. Lorsque le rapport est terminé, faites défiler vers le bas et regardez dans la section "Diagnostics". Il y aura une ligne appelée "Le plus grand élément de peinture de contenu". Développez ceci pour voir les détails sur l'élément qui est le LCP sur cette page.

Ne pas charger paresseusement l'élément LCP

Le chargement différé est une méthode utilisée pour charger un élément uniquement lorsqu'il devient visible dans la fenêtre. Cela permet d'accélérer le chargement du contenu au-dessus de la ligne de flottaison. Vous ne devez pas charger paresseux votre élément LCP car cela retardera la rapidité avec laquelle le navigateur commencera à télécharger l'élément.

Dans les magasins Shopify, l'élément LCP sur une page de produit sera normalement l'image principale du produit. Ou sur un article de blog, l'élément LCP sera probablement une image d'en-tête de blog. Certains thèmes Shopify ajouteront automatiquement un chargement paresseux à chaque image, même celles qui apparaissent au-dessus du pli. Passez en revue chacun de vos modèles Shopify et déterminez quel est l'élément LCP. S'il apparaît au-dessus du pli, assurez-vous que l'attribut ci-dessous n'est pas inclus dans la balise HTML :

chargement="paresseux"

Précharger l'élément LCP

Vous pouvez utiliser rel = "preload" pour indiquer aux navigateurs Web de télécharger une ressource spécifique dès que possible. En appliquant rel="preload" sur votre élément LCP, le navigateur donnera la priorité au chargement de cette ressource dans la page.

Vous pouvez le faire vous-même en modifiant le code de votre thème. Pour les développeurs de thèmes Shopify, il existe un filtre qui peut être ajouté aux modèles liquides Shopify qui générera une balise de préchargement.

Utiliser des images de nouvelle génération

Les nouveaux formats d'image tels que WebP ont une taille de fichier plus petite que les formats traditionnels tels que JPG et PNG. Si votre élément LCP est une image, l'utilisation d'un format d'image Nextgen accélérera le temps de téléchargement. Dans la mesure du possible, utilisez des images WebP, mais n'oubliez pas d'inclure une alternative pour les anciens navigateurs qui ne prennent pas en charge les images de nouvelle génération.

Les nouveaux thèmes Shopify convertiront automatiquement vos images en WebP et les serviront aux navigateurs appropriés.

Assurez-vous que l'élément LCP est inclus dans la réponse HTML initiale

Réduisez le « délai de chargement des ressources » en vous assurant que votre élément LCP est livré dans la réponse HTML initiale. Si l'élément LCP est chargé dans la page par une ressource externe (comme un script JS), il faudra plus de temps au navigateur pour commencer à télécharger l'élément LCP.

Que cela affecte votre boutique Shopify dépendra du thème de boutique que vous utilisez. Un moyen rapide de tester cela consiste à déterminer quel est votre élément LCP, puis à afficher la page avec JS désactivé. Si l'élément LCP n'est pas sorti dans la page HTML, cela signifie qu'il n'est pas livré dans la réponse HTML initiale.

Éliminer les ressources bloquant le rendu

Le conseil "Éliminer les ressources bloquant le rendu" existe depuis des lustres. Mais qu'est-ce que cela signifie réellement ? Certaines ressources telles que les scripts et les feuilles de style bloquent l'affichage d'une page Web. Lorsqu'un navigateur découvre une ressource, il arrête de télécharger la page et télécharge et exécute à la place cette ressource. Cela retarde l'affichage de la page pour les utilisateurs.

Un rapport phare vous montrera les ressources de blocage de rendu pour n'importe quelle page. Vous devez donc déterminer lesquels de vos scripts et feuilles de style bloquent le rendu, puis optimiser leur diffusion.

Éliminer Render Blocking JS

Vous devez d'abord comprendre deux attributs appelés defer et async. Ces attributs HTML peuvent être attachés à des scripts externes et indiquer au navigateur quand télécharger/exécuter la ressource.

Ainsi, en appliquant async ou defer à vos scripts JS, vous pouvez minimiser leur impact sur le rendu des pages. Shopify n'asynchronisera pas ou ne différera pas automatiquement vos scripts, vous devrez donc accéder aux modèles liquides de thème et ajouter l'attribut vous-même. Mais soyez très prudent lorsque vous effectuez ce processus, car vous devez tenir compte de l'impact que le report d'un script pourrait avoir sur les fonctionnalités de votre boutique.

Vous constaterez également que les applications et les plugins que vous installez sur votre boutique Shopify produiront des scripts JS bloquant le rendu. Vous pouvez les identifier grâce à un rapport Lighthouse. Examinez attentivement chaque application que vous installez sur votre boutique et réfléchissez à l'impact potentiel sur la vitesse des pages. Certains marchands ne se rendront même pas compte que des applications inutilisées sont toujours installées sur un magasin et affectent la vitesse de la page. Lorsque vous désinstallez une application, assurez-vous qu'elle ne laisse aucun code hérité dans votre thème.

Éliminer les feuilles de style CSS bloquant le rendu

Pour éliminer le CSS bloquant le rendu, vous devez aligner les styles critiques nécessaires pour rendre le contenu au-dessus de la ligne de flottaison. Il n'est pas efficace de télécharger votre feuille de style entière immédiatement pour chaque visiteur car la plupart des CSS ne seront pas utilisés.

La solution consiste à intégrer le CSS critique nécessaire pour rendre la section au-dessus de la ligne de flottaison de votre page en l'incluant dans une balise de style dans votre head . Ajoutez ensuite le code ci-dessous au de votre theme.liquid.js pour charger votre feuille de style principale de manière asynchrone.

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

Avant de publier ceci dans votre boutique en direct, expérimentez sur un thème de test pour valider que votre page apparaît toujours visuellement correcte.

Comment améliorer CLS sur Shopify

CLS concerne le degré de décalage de la mise en page lors du chargement d'une page. La cause en est normalement les images qui déplacent le contenu au fur et à mesure qu'elles sont chargées et rendues.

Ajouter des attributs de largeur et de hauteur à vos images

La solution CLS la plus simple consiste à vous assurer que vos balises img génèrent des attributs de largeur et de hauteur explicites. Ces attributs sont appliqués au HTML de l'image et indiquent au navigateur la largeur et la hauteur de l'image. Avec ces informations, le navigateur peut calculer le rapport d'aspect et les dimensions de l'image, et réserver l'espace nécessaire pour cette image. Cela empêche la mise en page de se déplacer lorsque l'image est ajoutée à la page.

Pour ce faire sur une image de votre propre boutique Shopify, connectez-vous et accédez à la section des thèmes. Et allez dans "Modifier le code" pour votre thème. Ensuite, recherchez l'extrait de code dans votre modèle liquide qui génère l'image et ajoutez l'extrait suivant à la balise img.

 height="{{img.height}}" width="{{img.width}}

Examinez les modèles liquides que vous utilisez pour votre page d'accueil, vos collections, vos produits et vos blogs Shopify et assurez-vous que les balises img font référence aux attributs de largeur et de hauteur.

Optimisez vos polices

Ces polices Web sophistiquées que vous chargez à partir d'endroits tels que les polices Google peuvent causer des problèmes CLS en raison d'un problème appelé FOUS (flash of unstyled text). C'est là que le navigateur Web charge initialement une police de secours, puis lorsque la police Web principale est chargée, le texte est restitué, ce qui provoque un changement de mise en page.

Réduire la dépendance aux polices Web tierces Tout d'abord, essayez de réduire votre dépendance aux polices Web tierces. Lorsque vous importez des polices Web, importez uniquement les familles de polices dont vous avez besoin. N'importez pas les différents poids et styles de police s'ils ne sont jamais utilisés, car cela augmentera la taille du fichier de police.

Précharger les polices Les polices Web sont parfois chargées à partir d'une feuille de style. Cela retarde la rapidité avec laquelle le navigateur peut commencer à télécharger la police. Au lieu de cela, préchargez vos fichiers de police dans le de votre magasin. Cela indiquera au navigateur de charger le fichier de police en priorité.

Use font-display:facultatif Font-display est une propriété CSS qui indique au navigateur ce qu'il doit faire lorsqu'une police n'a pas été téléchargée dans les 100 ms. Le navigateur chargera initialement la police de secours et si le téléchargement de la police personnalisée n'est pas terminé dans les 100 ms, le navigateur conservera la police de secours rendue sur la page. Cela réduit le risque que la police personnalisée se charge trop tard et provoque un changement de mise en page.

Comment améliorer le FID sur Shopify

D'après notre expérience, le FID est la métrique Core Web Vital la moins courante que nous voyons affecter les magasins Shopify. Considérez le FID comme un moyen de mesurer la réactivité d'une page pendant le chargement. Rien ne frustre plus les utilisateurs que de cliquer/taper et rien ne se passe.

Le FID est similaire à une autre métrique appelée Total Blocking Time (TBT). Le TBT mesure le temps entre le moment où la page commence à s'afficher (First Contentful Paint ou FCP) et le moment où la page devient réactive (Time to Interactive ou TTI).

TBT est causé par des "tâches longues" qui bloquent le traitement du thread principal. Le thread principal est l'endroit où le navigateur traite tout ce qui est nécessaire pour charger une page. Si des tâches longues bloquent le traitement du thread principal, cela retarde la rapidité avec laquelle une page devient interactive pour les utilisateurs.

Quelle est la différence entre FID et TBT

La principale différence entre le FID et le TBT est que le FID est basé sur des données de terrain (données d'utilisateurs réels qui ont visité votre boutique Shopify). Alors que le TBT est mesurable en laboratoire et est calculé en exécutant des tests dans un environnement artificiel avec des conditions de réseau définies.

Comme vous ne pouvez pas mesurer le FID lorsque vous testez vos propres pages, vous devez plutôt mesurer le TBT.

Pour améliorer le FID, vous devez accélérer la rapidité avec laquelle votre boutique Shopify répond à la première interaction d'un utilisateur. Pour ce faire, vos pages Shopify se chargent aussi efficacement que possible. Concentrez-vous sur ces trois domaines :

Réduire l'impact du code tiers

Comme pour toutes les métriques essentielles de Web Vitals, JavaScript tiers est souvent la cause de problèmes. Tout tiers qui bloque le thread principal pendant plus de 250 ms sera signalé dans un rapport Lighthouse. Exécutez vos pages via Lighthouse pour identifier les scripts tiers qui causent des problèmes. Ensuite, décidez lesquels peuvent être définis sur asynchrone ou différé.

Réduire le temps d'exécution de JavaScript

Le temps d'exécution de votre JavaScript est également important. Tout d'abord, exécutez vos pages via Lighthouse et identifiez les scripts qui prennent le plus de temps à s'exécuter. Lighthouse signalera tous les scripts qui prennent plus de 2 secondes.

Utilisez le fractionnement de code Plutôt que de livrer tout votre code JavaScript dans un seul fichier, divisez votre code en plus petits morceaux et ne livrez que le code nécessaire pour cette page. Ce n'est pas facile et nécessite le soutien des développeurs qui gèrent votre code. Vous trouverez cela beaucoup plus facile s'il est intégré au développement de votre thème Shopify au début du projet.

Réduisez et compressez votre code Lorsque vous réduisez votre code, vous supprimez les espaces et les commentaires inutiles. Cela réduit la taille du fichier mais accélère la rapidité avec laquelle un navigateur peut exécuter le code. L'un des avantages de Shopify est que la plupart des js de thème sont automatiquement minifiés.

Comme la minification, la compression de votre js réduit la taille du fichier et accélère la rapidité avec laquelle le navigateur Web peut exécuter le code.

Minimiser le travail de thread

Le thread principal fait tout le travail de traitement et calcule comment construire une page. Lorsque le thread principal est occupé par des tâches intensives, votre TBT sera pire. Cela dépend principalement de la robustesse de votre thème Shopify. Les thèmes bon marché créés par des développeurs médiocres ne se chargeront pas aussi efficacement que ceux développés par les experts de Shopify.

Comment pouvez-vous minimiser le travail de fil sur votre boutique Shopify ? Comme mentionné ci-dessus, c'est beaucoup plus facile si cela est intégré à votre thème dès le début. Nous vous recommandons d'acheter un thème Shopify premium avec d'excellentes critiques. Ou si vous créez votre propre boutique Shopify, assurez-vous de travailler avec des développeurs experts de Shopify qui peuvent s'assurer que votre thème est optimisé pour minimiser le travail de fil.

Comment mesurer les performances de Core Web Vitals

Maintenant que vous comprenez comment améliorer Core Web Vitals sur votre boutique Shopify, vous devez ensuite savoir comment mesurer vos progrès Core Web Vitals.

Console de recherche

Le moyen le plus rapide de voir les performances actuelles de votre boutique Shopify pour Core Web Vitals est via la Search Console. Accédez au rapport Core Web Vitals dans le menu de gauche pour obtenir des données sur les performances actuelles de votre site. Il inclura une ventilation des problèmes rencontrés par Core Web Vitals et vous montrera un échantillon des URL concernées.

Aperçu de la vitesse de la page/Phare

Pagespeed insights est un outil Google gratuit qui vous permet de mesurer la vitesse de n'importe quelle page. Exécutez vos URL Shopify via l'outil pour obtenir une ventilation détaillée de vos performances ainsi que des actions recommandées pour obtenir un score plus élevé.

Rapport CrUX

CrUX est le propre ensemble de données de vitesse/performance de Google pour des millions de pages réelles. Vous pouvez accéder aux données CrUX de votre propre boutique Shopify en utilisant le tableau de bord Google CrUX Data Studio. Le tableau de bord fournit une ventilation détaillée des performances de votre site à travers les métriques Core Web Vitals au cours des 16 derniers mois.

Que signifient tous ces termes CWV ?

Lorsque vous commencez à regarder Core Web Vitals, vous rencontrerez de nombreuses terminologies compliquées, voici ce que cela signifie :

Applications Shopify Web Vitals de base

Il existe de nombreuses applications Shopify qui prétendent pouvoir améliorer les scores Core Web Vitals. Certaines de ces applications sont efficaces et offrent une amélioration des performances. Bien que cela puisse améliorer vos scores Core Web Vitals, rien ne garantit que vous verrez un effet. En effet, les scores Core Web Vitals sont uniques à chaque boutique Shopify. Si les scores Core Web Vitals de votre boutique sont médiocres en raison d'un problème de thème spécifique, une application ne fera probablement aucune différence.

Si vous souhaitez emprunter la voie de l'application, nous vous recommandons de tester une application et d'observer son effet sur les performances. Voici quelques suggestions d'applications à tester :

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

Si vous avez besoin de conseils ou d'assistance pour votre entreprise de commerce électronique, contactez notre équipe et nous serons heureux de vous aider.