25 Fév 2021

Comment les nouveaux Core Web Vitals de Google vont changer l’expérience du E-Commerce en 2021

Depuis quelques années, l’UX prend de plus en plus de place parmi les critères impactant le référencement SEO. Et le référencement, en e-commerce, c’est un peu le nerf de la guerre.

Google a revalorisé son algorithme pour qu’il reconnaisse de manière performante certains signaux UX. Et c’est confirmé, les Core Web Vitals seront intégrés comme des signaux importants de classement pour les résultats de recherche en mai 2021. 

Mais que sont précisément ces Core Webs vitals ?

 

Les trois nouveaux indicateurs des « Core Web Vitals » sont les suivants :

Largest Contentful Paint (LCP) – le temps nécessaire au chargement du plus grand élément d’une page du point de vue de l’utilisateur. Afin d’offrir une bonne expérience utilisateur, le LCP doit apparaître dans les 2,5 secondes suivant le chargement de la page.

Délai de première saisie (FID)le temps entre le moment où un utilisateur effectue une action sur la page, et le moment où le navigateur est capable d’y répondre, soit le niveau de réactivité d’une page. L’idéal est de faire en sorte que vos pages aient un FID inférieur à 100 ms.

Cumulative Layout Shift (CLS) – la stabilité (visuelle) des éléments d’une page lors de son chargement. Cet indicateur mesure le nombre total de mouvements inattendus lors du chargement d’une page (une image / un texte qui change de position par exemple). Une mesure idéale est inférieure à 0,1.

Comment améliorer ces facteurs ?

 

LCP : un mauvais score de LCP est souvent dû à plusieurs facteurs dont un temps de réponse lent du serveur, des ressources JavaScript / CSS bloquant le rendu… et surtout un temps de chargement des contenus ralenti, notamment pour le plus grand élément de la page !
Pour prévenir cela, pensez à vérifier que les dimensions de l’image correspondent bien à celles affichées dans le navigateur. Compressez votre image si celle-ci est trop volumineuse. Utilisez des images “responsive”.  

Si vous avez le temps et les ressources, vous pouvez également analyser et améliorer l’efficacité du code de votre serveur, utiliser un mécanisme de routage RDC (réseau de diffusion de contenu) pour permettre à une requête utilisateur sur un contenu d’être servie par le serveur le plus proche, et ainsi optimiser le mécanisme de transmission, et enfin vous assurer que le nombre de fichiers CSS / Javascript bloquant le rendu de votre page est réduit au maximum (fichiers non utilisés, non nécessaires).

 

FID : le principal facteur d’un mauvais score FID est une exécution JavaScript lourde. Pour y remédier, optimisez la manière dont JavaScript analyse, compile et s’exécute sur votre page : si vous avez déjà tenté de réduire la quantité de scripts, il peut être utile de décomposer le code de “longue durée” (partie d’un code qui bloque le thread principal pendant plus de 50ms) en plus petite tâches.
Pensez également à vérifier que votre cache est bien activé !

 

CLS : un mouvement inattendu d’un contenu de la page se produit généralement parce que les ressources sont chargées de manière asynchrone ou que les éléments DOM sont ajoutés dynamiquement à la page au-dessus du contenu existant. Le coupable peut être une image ou une vidéo aux dimensions inconnues, une police dont le rendu est plus grand ou plus petit que sa version de secours, ou une annonce ou un widget tiers qui se redimensionne dynamiquement.
Pour éviter ces effets de sursaut, apparition, redimensionnement, pensez à ajouter des attributs de taille à vos images / vidéos ou ajoutez une zone CSS de même ratio afin de permettre au navigateur d’allouer l’espace requis lors du chargement de la page. Évitez d’insérer du contenu au-dessus du contenu existant, sauf en réponse à une interaction de l’utilisateur, pour garantir tous les changements de disposition qui se produisent sont attendus. Enfin, préférez les animations de transformation aux animations de propriétés qui déclenchent des changements de disposition. 

Qu’en est-il de votre site e-commerce ?

 

Là où l’UX était autrefois un petit facteur de classement, il s’agit désormais d’un facteur déterminant.

Il n’est pas toujours simple d’obtenir un score élevé en matière de référencement, et la liste des cases à remplir implique des connaissances techniques avancées.

Nos experts en UX/UI et SEO vous accompagnent dans vos projets e-commerce pour prendre en compte chacun de ces critères afin d’arriver en tête des résultats de recherche.

Nous pouvons vous accompagner dans votre projet ecommerce