Comment obtenir un score de 90+ Core Web Vitals pour une boutique de commerce électronique (étude de cas)

Dans cet article, vous apprendrez comment obtenir un score de plus de 90 sur votre Google Core Web Vitals (ordinateur de bureau et mobile) pour une boutique de commerce électronique, même si vous utilisez beaucoup de plugins.

Lorsque Google a publié pour la première fois son évaluation des statistiques Web de base , de nombreux propriétaires de magasins de commerce électronique ont commencé à paniquer.

Contrairement à un site de contenu de base ou à un blog, une boutique de commerce électronique est lourde d'images et nécessite beaucoup plus d'éléments fonctionnels pour conclure une vente. Et chaque fonctionnalité ajoutée ralentit votre site.

Par exemple, le chat en direct peut prendre 6 à 10 secondes pour se charger tout seul. Le chargement du suivi des e-mails de base avec Klaviyo peut prendre 1 à 2 secondes. Même l'ajout du pixel Facebook peut prendre une centaine de millisecondes à charger.

Peu importe que votre code utilise un chargement différé ou asynchrone. Chaque élément supplémentaire sur votre site Web aura un impact négatif sur vos principaux éléments vitaux du Web.

À l'heure actuelle, selon Searchmetrics, 96 % des sites testés aux États-Unis échouent à l'évaluation Core Web Vitals de Google pour les ordinateurs de bureau, les mobiles ou les deux.

Et le taux d'échec est encore plus élevé pour les magasins de commerce électronique en raison de la fonctionnalité requise pour effectuer des transactions en ligne.

Dans cet article, je vais vous montrer les étapes exactes que j'ai suivies pour obtenir une note de 90+ Google Core Vitals pour mon site Web de magasin de commerce électronique à 7 chiffres.

Obtenez mon mini-cours gratuit sur la façon de démarrer une boutique de commerce électronique réussie

Si vous souhaitez démarrer une entreprise de commerce électronique, j'ai mis en place un ensemble complet de ressources qui vous aideront à lancer votre propre boutique en ligne à partir de zéro. Assurez-vous de l'attraper avant de partir!

Cliquez ici pour télécharger

Que sont les éléments essentiels de Google ?

Google Core Web Vitals est un ensemble de facteurs que Google intègre dans les classements de recherche pour mesurer la qualité de l'expérience utilisateur.

Google Core Vitals se compose de 3 composants.

• La plus grande peinture de contenu (Google nécessite 2,5 secondes ou moins) - Il s'agit d'une mesure du temps qu'il faut pour voir le plus grand élément de contenu affiché sur votre écran. Fondamentalement, c'est la vitesse à laquelle votre site se charge.
• Délai de première entrée (Google nécessite 100 millisecondes ou moins) - Il s'agit d'une mesure de la réactivité et de la convivialité de votre page. Plus précisément, Google mesure le délai entre un visiteur qui clique sur une fonctionnalité interactive et la rapidité avec laquelle la page répond à ce clic.
• Changement de mise en page cumulatif (Google exige un score de 0,1 ou moins) - Il s'agit d'une mesure de la stabilité de votre page lors de son chargement. Votre contenu se déplace-t-il de haut en bas au fur et à mesure du rendu de la page ? Il s'agit de la seule métrique Google Core Web Vital qui n'a rien à voir avec la vitesse de la page. C'est aussi le plus difficile à déboguer si vous ne savez pas ce que vous faites.

Les sections restantes de cet article détailleront EXACTEMENT comment j'ai corrigé ces 3 métriques pour ma boutique de commerce électronique afin d'atteindre un score de 90+ Google Core Vitals sur ordinateur et mobile.

Le magasin de commerce électronique utilisé pour cette étude de cas

La plupart des propriétaires de magasins de commerce électronique sont sur Shopify, WooCommerce, BigCommerce ou Shift4Shop et toutes ces stratégies s'appliquent quelle que soit la plate-forme sur laquelle vous vous trouvez.

Mon magasin à 7 chiffres est situé sur BumblebeeLinens.com. N'hésitez pas à exécuter le test de vitesse de la page Google sur ma boutique pendant que vous lisez cet article pour voir mes résultats de première main.

Tout d'abord, mon magasin utilise bon nombre des dernières nouveautés en matière de commerce électronique, car j'enseigne un cours de commerce électronique sur Profitable Online Store.

En fait, je traite ma boutique comme un laboratoire pour tester les nouvelles fonctionnalités au fur et à mesure de leur sortie et en parler sur ce blog.

Voici les plugins et services que j'exécute sur ma boutique pour cette étude de cas.

• Klaviyo – Ma plateforme de marketing par e-mail
• Postscript – Ma plateforme de marketing SMS
• Vizury – Mon fournisseur de notifications push
• ManyChat – Mon fournisseur de marketing Facebook Messenger qui implémente mon chat en direct
• Gorgias – Mon logiciel de service client qui gère toute la correspondance client.
• Spin To Win Popup – Mon principal aimant principal pour ma boutique
• Facebook Pixel - Suit toutes mes ventes de Facebook
• Google Analytics – Suivi des ventes de mon site Web
• Notify Slide Up - Fournit une preuve sociale en affichant les ventes au fur et à mesure qu'elles arrivent

Juste pour le plaisir, voici à quelle vitesse mon site se charge SANS aucune optimisation .

C'est la vitesse à laquelle il s'exécute avec les optimisations que je suis sur le point de vous apprendre à mettre en œuvre.

Comment résoudre vos problèmes de grande peinture à contenu (LCP) et de délai de première entrée (FID)

Les faibles scores LCP et FID sont dus à des vitesses de page lentes . Si vous pouvez rendre votre site Web plus rapide, vos scores LCP et FID se corrigeront d'eux-mêmes.

Pour 99% des magasins de commerce électronique, les problèmes LCP et FID sont causés par…

• Chargement de JavaScript et CSS qui bloquent le rendu – Sans aucune optimisation, les fichiers javascript et css sont chargés séquentiellement, ce qui peut bloquer le rendu visuel de votre page. La meilleure façon d'accélérer votre javascript est de charger votre code paresseux ou de différer le rendu pour qu'il ne bloque rien.
• Chargement de grosses photos et/ou vidéos – Plus la résolution de vos images est grande et élevée, plus leur chargement sera long. Vous ne devez jamais charger une image plus grande que ce qui est affiché sur votre site Web. De plus, vous ne devez jamais charger d'image qui n'est pas visible à l'écran.
• Un serveur lent – Un serveur lent ne devrait pas être un problème avec des plates-formes entièrement hébergées comme Shopify, BigCommerce ou Shift4Shop, mais si vous êtes sur WooCommerce, alors utiliser un hôte plus rapide comme WPEngine pourrait accélérer considérablement votre site.

À un niveau élevé, si vous résolvez les 3 problèmes mentionnés ci-dessus, vous aurez un site Web ultra-rapide.

Comment atteindre des vitesses de chargement de page d'une seconde

Vous trouverez ci-dessous une liste complète de mes optimisations de vitesse avec une note de 1 à 5, où 5 indique l'impact le plus élevé sur l'amélioration de la vitesse.

En général, vous devriez vous concentrer sur les 5 et mettre en œuvre les 1 et les 2 uniquement si vous avez le temps ou si vous êtes super anal :)

Si vous voulez savoir comment j'ai atteint une vitesse de chargement de page de 1 seconde , vous pouvez passer directement aux gros canons avec une note de 5:) !

Activer la mise en cache du navigateur (note 1 sur 5)

La mise en cache du navigateur indique au navigateur client de mettre en cache les images et autres éléments de votre site Web sur la machine locale de l'utilisateur pour accélérer la navigation sur votre site Web APRÈS le chargement initial de la page.

La mise en cache du navigateur doit TOUJOURS être activée, mais veuillez noter que la mise en cache du navigateur n'affectera PAS vos Google Core Web Vitals . Google ne se soucie que de la façon dont votre site Web est chargé à partir d'un état complètement froid.

Minimiser les fichiers CSS/JS (note 1 sur 5)

Minimiser votre CSS/JS supprime tous les espaces blancs de vos fichiers CSS et javascript pour économiser quelques octets ici et là.

En général, la minification de vos fichiers CSS/JS n'améliorera pas considérablement la vitesse de votre page.

Effectuez cette optimisation si vous essayez de profiter de chaque milliseconde de vitesse de votre site.

Combinez des fichiers HTML, CSS et JS (note 2 sur 5)

La combinaison de vos fichiers HTML, CSS et JS en moins de fichiers peut avoir un effet sur la vitesse de votre page car votre serveur doit récupérer moins de fichiers.

Mais avec la dernière technologie de serveur Web, plusieurs fichiers peuvent être récupérés en même temps en parallèle, ce qui atténue considérablement cette optimisation . Je ne passerais pas trop de temps là-dessus.

Nettoyez vos redirections (note 2 sur 5)

Votre site Web est en constante évolution et vous pouvez parfois avoir des redirections de certaines images et/ou pages vers d'autres.

Par exemple, lorsque j'ai migré toutes mes pages de http:// à https:// il y a de nombreuses années, j'ai émis des redirections 301 de certaines pages et images vers leurs homologues sécurisés comme solution rapide.

Chaque redirection sur votre page ralentira votre site, alors assurez-vous d'utiliser un outil comme GTMetrix pour détecter toute redirection sur les éléments de votre page et les supprimer.

Utilisez un hébergeur plus rapide (note 3 sur 5)

Si vous utilisez une plate-forme open source comme WooCommerce ou Magento, votre premier réflexe pourrait être de dépenser de l'argent sur un tout nouveau serveur pour résoudre les problèmes de vitesse de vos pages.

Mais la plupart du temps, un serveur plus rapide ne résoudra pas vos problèmes de vitesse . Cependant, si vous utilisez actuellement un hébergement mutualisé bon marché , un VPS ou un serveur dédié pourrait faire une différence significative.

Utiliser un CDN (Note 2-3 sur 5)

Les réseaux de diffusion de contenu ou les CDN stockent plusieurs copies de votre site Web et des images sur plusieurs serveurs dans le monde entier afin que votre contenu soit diffusé par le serveur géographiquement le plus proche.

Si vous avez des clients dans le monde entier et que votre site est très riche en images , l'utilisation d'un CDN peut avoir un impact significatif sur la vitesse de votre page.

Mais pour les petits sites comme le mien qui desservent principalement les États-Unis, l'utilisation d'un CDN n'a qu'un impact marginal sur la vitesse des pages .

Précharger des images et des scripts plus grands (note 3 sur 5)

Des métriques telles que "la plus grande peinture de contenu" mesurent la vitesse du plus grand élément de votre page. Par conséquent, il est logique de « précharger » les éléments les plus volumineux de votre page en fournissant des conseils dans votre code HTML.

Les conseils de préchargement sont des instructions dans votre code HTML qui indiquent au navigateur quelles ressources sont les plus importantes pour la page.

Par exemple, si vous avez une grande image de démarrage , il est logique de commencer par charger cette image pour améliorer votre LCP.

Bien que le préchargement d'éléments importants sur votre site puisse améliorer votre score LCP, cela n'aura pas d'impact sur la vitesse globale de votre page.

Réduisez vos images (note 4 sur 5)

La plupart des nouveaux propriétaires de magasins de commerce électronique utilisent des tailles d'image beaucoup plus grandes que celles requises . Si le thème de votre boutique en ligne utilise des images 1000 × 1000, vous ne devez jamais télécharger une image plus grande que 1000 x 1000.

Si votre site Web utilise la même image sur plusieurs pages de tailles différentes , vous devez créer une image distincte (et plus petite) pour chaque version.

Par exemple, une image de produit sur ma boutique est affichée en taille réelle, taille 50%, taille 33% et taille 25% selon la page.

Du coup, j'ai 4 fichiers images différents (1 pour chaque taille) sur mon site et je n'affiche que la plus petite image requise sans perte de qualité.

De plus, vous devez compresser tous vos fichiers JPG jusqu'à une qualité maximale de 50 dans Photoshop (ou tout autre programme d'image que vous utilisez).

Compressez et cachez vos pages (note 4 sur 5)

Si vous êtes sur une plate-forme entièrement hébergée comme Shopify, BigCommerce ou Shift4Shop, vos pages sont probablement déjà compressées et entièrement mises en cache avant d'être servies.

Mais si vous êtes sur une plateforme open source comme WooCommerce , assurez-vous d'utiliser un plugin comme WP Rocket.

WP Rocket pré-rendra toutes vos pages Web afin que votre magasin serve des pages statiques qui nécessitent peu ou pas d'utilisation du processeur.

WP Rocket compressera également votre page Web à 90 % de sa taille.

Utilisez moins de plugins qui chargent du code externe (note 4 sur 5)

Chaque plugin que vous ajoutez à votre site Web le ralentira . Par conséquent, vous devez être extrêmement prudent lorsque vous décidez d'installer un nouvel outil logiciel.

Des fonctionnalités apparemment inoffensives peuvent parfois considérablement ralentir votre site !

Par exemple , l'ajout d'un bouton de partage Facebook ou d'un bouton épingler Pinterest peut potentiellement entraîner le téléchargement d'un nouveau morceau de code javascript à partir d'une source externe.

Pour les boutons comme Twitter, Facebook ou Pinterest, j'utilise toujours des versions « non javascript » qui ne nécessitent pas de code chargé en externe.

Si vous souhaitez ajouter un bouton de partage Facebook à votre site, vous devez utiliser la version avec lien hypertexte comme indiqué ci-dessous.

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

Chargez paresseux vos images et code Javascript (note 5 sur 5) - Le plus important !

Lorsqu'il s'agit d'améliorer la vitesse de chargement de votre page, vous ne devez charger que les éléments de votre site qui sont requis ou visibles.

Par exemple, s'il y a une image enfouie 5 défilements vers le bas dans votre page, vous ne devez pas afficher cette image tant que votre client n'est pas assez loin pour la voir.

De même pour le code javascript, vous ne devez charger aucune fonctionnalité pour votre site Web tant qu'il n'a pas besoin d'être chargé.

Comment charger paresseux votre code Javascript et CSS

Le chargement paresseux de vos images est assez simple et la plupart des thèmes ont déjà un chargement paresseux d'images intégré.

Mais comment pouvez-vous paresseux charger le code javascript en toute sécurité sur votre site ?

Voici le secret comment je le fais.

Pour chaque page de mon site, je charge d'abord les éléments visuels de mon site . Ensuite, je ne charge le code javascript fonctionnel sur mon site qu'une fois que l'utilisateur a effectué une action sur la page .

Par exemple , si vous allez sur Bumblebee Linens en ce moment, vous remarquerez que mon site Web se charge très rapidement (parfois en moins d'une seconde).

Mais si vous cliquez sur la page ou déplacez ou faites défiler la souris , alors seulement le chat en direct se charge-t-il avec les autres fonctionnalités « achats » sur ma boutique.

En d'autres termes, je charge paresseux la fonctionnalité de panier d'achat de mon site uniquement lorsque l'utilisateur effectue une action ou fait des achats dans mon magasin.

En conséquence, ma page se charge très rapidement car je ne charge que les éléments graphiques HTML/CSS de mon site.

Du point de vue de l'utilisateur, l'expérience d'achat est parfaite car chaque page se charge rapidement. Pendant ce temps, Google voit également une page de chargement rapide.

Comment implémenter le chargement paresseux Javascript

La première étape requise pour charger paresseux votre javascript est de déterminer ce qui peut être chargé paresseux SANS casser votre site.

N'oubliez pas que vous devez charger tout le code « essentiel » sur votre site afin que l'expérience d'achat « visuelle » de votre client ne soit pas affectée.

En conséquence, vous devez charger chaque morceau de code qui affecte le rendu des éléments graphiques de votre site.

Voici comment déterminer ce qui est essentiel.

Accédez à GTMetrix et analysez votre graphique en cascade . Votre graphique en cascade vous dira tout ce qui est chargé sur votre page et combien de temps il faut pour se charger.

Selon le tableau ci-dessus, klaviyo_subscribe.js prend 450 ms pour se charger. De plus, klaviyo_subscribe.css prend encore 420 ms.

Klaviyo est mon outil de marketing par e-mail et je sais pertinemment que Klaviyo n'affecte PAS du tout le rendu de mon site.

En conséquence, je peux facilement charger Klaviyo paresseux sans affecter les éléments visuels de la page.

En fait, supprimer le code Klaviyo réduira presque une seconde entière à la vitesse de ma page !

À l'aide de GTMetrix, créez une liste de tout le code à chargement lent qui n'est pas nécessaire pour restituer les éléments visuels de votre site, puis chargez paresseux le code lorsque l'UN des événements suivants se produit.

• Mouvement de la souris
• Défilement des pages
• Écran tactile

Voici un petit extrait de code qui illustre mon implémentation javascript.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

//Un tableau d'événements DOM qui doit être interprété comme
//activité de l'utilisateur.
var activitéEvénements = [
'mousedown', 'mousemove', 'keydown', 'scroll',
'touchstart'
] ;

window.onload = function(){
//ajoute ces événements au document.
//enregistrer la fonction d'activité en tant que paramètre d'écoute.
activitéEvents.forEach(function(eventName) {
document.addEventListener(eventName, activité, vrai);
});
}

Une fois que vous avez mis en œuvre cette étape, vous devriez pouvoir atteindre des vitesses de chargement de page inférieures à 1 seconde sur mobile et ordinateur de bureau !

Comment résoudre vos problèmes de décalage de mise en page cumulatif

90% de vos problèmes Cumulative Layout Shift seront causés par les 2 raisons suivantes.

Chargement d'éléments sans cotes

Les paramètres de taille de l'image permettent à un navigateur Web de connaître la taille du contenu au fur et à mesure de son chargement.

Par exemple, si vous définissez les dimensions de l'image dans votre code HTML, le navigateur réservera de l'espace pour votre image lors de son chargement afin que la page ne saute pas.

Cependant si les paramètres de taille sont manquants, aucune réservation n'a lieu et la page devra se réorganiser lorsque l'image se chargera enfin.

La solution simple à ce problème consiste à spécifier les dimensions de chaque élément de votre site comme indiqué ci-dessous.

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

Ajout dynamique de contenu avec Javascript

De nombreux plugins Shopify utilisent javascript pour afficher dynamiquement des fonctionnalités sur votre site Web. Et parfois, ce code se charge en retard, ce qui peut pousser votre page de haut en bas.

Par exemple, si vous affichez des annonces sur votre site, votre site peut sauter de haut en bas au fur et à mesure que l'annonce se charge.

Le meilleur moyen d'éviter que cela ne se produise est de pré-allouer de l'espace sur votre page pour que le contenu ajouté soit affiché.

L'ajout d'un espace blanc pré-rendu peut être problématique pour certains plugins, alors assurez-vous de contacter le créateur du plugin s'il s'agit d'un problème avec votre boutique.

Comment résoudre les problèmes CLS plus compliqués

Comme mentionné précédemment, 90% de vos problèmes CLS peuvent être résolus en ajoutant des dimensions à vos éléments. Mais les 10 % restants peuvent être EXTRÊMEMENT difficiles à résoudre sans utiliser un ensemble d'outils spécifique.

Pour mes sites, il m'a littéralement fallu 3 semaines pour résoudre mes problèmes CLS car le test Google Page Speed ​​ne reflète PAS les scores CLS mesurés sur le terrain.

Par exemple, mon blog sur MyWifeQuitHerJob.com a obtenu des scores CLS parfaits au test de laboratoire de vitesse de page, mais a échoué au test CLS sur le terrain.

Si vous ne savez pas de quoi je parle, voici une présentation rapide du test de vitesse de page Google.

Le meilleur score correspond aux données recueillies auprès d'utilisateurs réels à l'aide du navigateur Chrome. Le score le plus bas est le test effectué dans des conditions idéales .

Lorsque les 2 scores ne correspondent pas, c'est difficile à corriger car Google ne vous dit pas ce qui ne va pas . En fait, vous pouvez obtenir un score CLS parfait en laboratoire mais échouer complètement au CLS sur le terrain.

Voici ce que Google ne vous dit PAS sur CLS.

Le test de vitesse de page mesure uniquement votre CLS au-dessus du pli dans des conditions idéales. Dans la vraie vie, un utilisateur fait défiler vers le haut et vers le bas sur une connexion Internet potentiellement beaucoup plus lente.

Afin de résoudre vos problèmes CLS, vous DEVEZ émuler une connexion lente et vous comporter comme un véritable utilisateur humain !

Comment émuler un utilisateur réel pour réparer CLS

La meilleure façon de le faire est d'utiliser le débogueur Chrome intégré.

Voici comment déboguer vos problèmes CLS étape par étape.

Étape 1 : Affichez le débogueur Chrome

Étape 2 : Ralentissez la vitesse de votre réseau

Dans l'onglet "Réseau", réduisez la vitesse de la page à "Slow 3G". Cela ralentira considérablement la vitesse de chargement de la page afin que vous puissiez détecter facilement les changements de mise en page.

Étape 3 : Rendu des régions de décalage de mise en page

Cliquez sur l'onglet « Performances », puis assurez-vous que la case « Layout Shift Regions » est cochée sous « Rendering ».

Étape 4 : Actualiser la page

Une fois que vous avez configuré votre débogueur Chrome, actualisez la page et faites défiler votre page de haut en bas comme un vrai utilisateur.

Assurez-vous de rechercher les zones surlignées en bleu qui indiquent un changement de mise en page.

Étape 5 : Analyser la chronologie des performances

Si vous constatez des changements de mise en page sur votre site lors du chargement, regardez de plus près en zoomant sur la chronologie de chargement de votre page .

Dans l'exemple ci-dessous, la mise en page change car je charge une police différente qui décale légèrement la page vers le bas car la nouvelle police est plus grande.

En exécutant ces tests plusieurs fois sur différentes régions de votre page, vous pouvez repérer et résoudre facilement vos problèmes de décalage de mise en page cumulatif .

La partie la plus difficile est de diagnostiquer où se situent vos problèmes CLS, car le test de vitesse de page Google ne prend en compte que la partie au-dessus du pli de votre page.

Vous pouvez obtenir plus de 90 scores essentiels pour le Web pour un magasin de commerce électronique

Si vous suivez toutes les instructions ci-dessus, vous pouvez atteindre des vitesses de chargement de page inférieures à 1 seconde et obtenir une note de 90+ sur vos Core Web Vitals pour les mobiles et les ordinateurs de bureau.

En général, vous devez toujours garder votre site web aussi simple que possible et éviter à tout prix d'utiliser des plugins !

Demandez-vous si vous avez absolument besoin d'une certaine fonctionnalité AVANT de l'implémenter . Ensuite, recherchez des solutions qui ne nécessitent pas l'ajout de code javascript supplémentaire à votre site.

Parce que je suis super anal, j'examine en fait le code source de chaque plugin que j'installe en plus des appels réseau qui ont lieu.

Une fois, j'ai utilisé aveuglément un plugin qui envoyait littéralement les informations de mon site Web à plusieurs réseaux publicitaires et vendait mes informations client à mon insu !

La plupart des problèmes de vitesse de page ne sont pas causés par votre thème mais par les plugins que vous installez . Soyez prudent et bonne vente!