Core Web Vitals optimisation : on vous livre nos 5 tips

Avant toute chose, il est important de rappeler que sont les core web vitals.

Le rapport Core Web Vitals indique les performances de vos pages, sur la base de données d’utilisation réelles (parfois appelées données de terrain). Ces données analysées sont basées sur la vitesse de chargement de vos pages principalement. Trois signaux sont pris en compte :

Largest Contentful Paint (LCP), ou le temps qu’il faut pour que le principal élément de contenu d’une page se charge.

First Input Delay (FID), soit le délai que subit un utilisateur lorsqu’il interagit avec la page pour la première fois.

Cumulative Layout Shift (CLS) mesure la stabilité de la page, en surveillant les mouvements significatifs des éléments de la page qui peuvent frustrer ou induire en erreur l’utilisateur.

Lorsque vous entreprenez d’améliorer votre CWV, il est important de se rappeler qu’il s’agit d’un marathon et non d’un sprint. Dans cette optique, voici quelques-uns de nos meilleurs conseils pour améliorer les trois éléments du CWVs.

Découvrez les insights et tips de Sam Counterman, notre Senior Director of Performance and Growth Marketing pour l’optimisation de vos core web vitals dans les lignes qui suivent.

1) Améliorer le LCP

Les sites devraient idéalement viser un score LCP de 2,5 secondes ou moins. Dans un exemple concret d’analyse de site à l’aide de notre outil Customer Journey Analytics, nous avons constaté que le taux de rebond pour un mauvais LCP était de 32,9 %, contre 18,6 % pour un site avec un bon LCP. Voici quelques moyens d’optimisation de core web vitals pour résoudre ce problème :

• Analyser et améliorer l’efficacité de votre code côté serveur améliorera directement le temps de chargement nécessaire au navigateur pour recevoir les données.

• Introduisez un réseau de diffusion de contenu (CDN) pour éviter à vos utilisateurs d’attendre des requêtes réseau vers des serveurs éloignés.

• Augmentez la priorité de l’image LCP en spécifiant fetchpriority=”high” sur l’élément image, ce qui fait que le LCP se produit plus tôt.

2) Améliorer le FID

Les sites doivent viser un score FID de 100 millisecondes ou moins :

• Optimiser les pages pour la préparation à l’interaction

• Décomper le code long en tâches plus petites et asynchrones

• Utiliser un Web Worker pour exécuter JavaScript sur un fil d’arrière-plan

3) Amélioration de CLS

Les sites doivent viser un score CLS de 0,1 ou moins. Voici quelques remèdes :

• Incluez des attributs de taille sur tous les éléments vidéo et image pour vous assurer que le navigateur alloue la quantité d’espace correcte pendant le chargement de l’élément.

• Préchargez les polices de façon à ce qu’elles aient une priorité plus élevée dans le rendu de la page. Si vous avez des images de grande taille au format PNG, des illustrations ou des icônes, il est facile et rapide de les remplacer par des formats SGV, ce qui fait gagner beaucoup de temps au navigateur et améliore votre score CLS.

• Utilisez la propriété transform (scale) dans les CSS pour les animations afin d’éviter tout décalage inattendu de la mise en page.

• Réduisez également au minimum l’utilisation des GIF et, si vous le pouvez, remplacez-les par des formats SVG, et évitez d’utiliser un JavaScript et une configuration personnalisés lourds.

4) Processus en trois étapes pour améliorer nos scores Core Web Vital

Mesurer les performances et la vitesse de notre site est une priorité commerciale absolue, en particulier lorsque nous voulons reproduire les meilleures pratiques pour les clients de Contentsquare. Et il suffit de dire que nous pratiquons vraiment ce que nous prêchons…

En 2022, Contentsquare a changé de marque et remanié son site Web, en analysant la CWV à l’aide de nos outils analytiques. Nous avons réalisé que notre nouveau site était lent et ne passait pas les scores CWVs sur la plupart des pages. Cela avait un impact sur notre taux de rebond et nos conversions. Pour résoudre ces problèmes de site Web, nous avons adopté un processus en trois étapes :

1. Nous avons utilisé le comparateur de pages de Contentsquare pour quantifier nos pages et les classer en fonction de leurs performances.

2. Nous avons ensuite utilisé l’outil Customer Journey Analytics pour examiner les parcours des utilisateurs et identifier les points de chute.

3. Nous avons utilisé Speed Analysis pour mesurer nos scores CWV.

Auparavant, pour obtenir ces données et aboutir à une feuille de route, j’aurais dû utiliser plusieurs outils pour tirer des conclusions. L’accès à ces données sous forme de guichet unique au sein de Contentsquare est extrêmement bénéfique pour la vitesse et l’efficacité.

5) Core Web Vitals optimisation : restez à la page

Assurez-vous que votre site Web est prêt à réussir pour gagner de nouveaux clients et les fidéliser. Commencez par consulter notre rapport d’évaluation de l’expérience numérique 2022 pour vous donner une base de référence. Vous pouvez également tester notre outil d’analyse de la vitesse pour vous-même et votre équipe en réservant une démonstration avec nos experts dès aujourd’hui.

Optimisation de la web performance : 9 bénéfices, au-delà des Web Core Vitals !