Maîtriser Core Web Vitals : Un guide pour améliorer l'expérience utilisateur

Alors que le commerce électronique continue de dominer le marché en ligne, les entreprises doivent garder une longueur d'avance en termes d'optimisation de site Web. Un facteur clé qui a émergé ces dernières années est le concept de Core Web Vitals. En 2020, Google a établi des mesures spécifiques pour ces éléments vitaux du site Web, offrant aux entreprises de commerce électronique un chemin plus simple vers un meilleur classement du site Web. Mais que sont exactement les Core Web Vitals et comment les entreprises peuvent-elles les optimiser pour un impact maximal ? Dans cet article, nous examinerons de plus près Core Web Vitals et partagerons les outils essentiels pour les optimiser, afin que votre site Web de commerce électronique puisse garder une longueur d'avance sur la concurrence.

Article connexe : 7 choses que les propriétaires d'entreprise doivent savoir sur les éléments vitaux Web de base

Pourquoi les Core Web Vitals sont si importants

1. Core Web Vitals a un impact sur les classements de recherche Google de votre site

2. Ils sont cruciaux pour offrir une excellente expérience utilisateur

3. L'optimisation de Core Web Vitals peut augmenter le trafic et les revenus de votre site

L'optimisation de Core Web Vitals est essentielle pour les propriétaires et les développeurs de boutiques en ligne afin d'offrir une expérience utilisateur optimale, de se classer plus haut dans les résultats de recherche Google et, en fin de compte, d'augmenter leurs revenus. Ces trois métriques principales - Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS) - sont basées sur la vitesse de chargement, l'interactivité et la présentation visuelle de votre site Web.

En donnant la priorité à ces mesures, votre site Web peut offrir aux clients une expérience fluide, réactive et visuellement attrayante. Ne négligez pas les Core Web Vitals lors de la conception ou de l'optimisation de votre site Web, car ils pourraient faire la différence entre une bonne et une excellente expérience utilisateur et, en fin de compte, avoir un impact sur vos revenus.

Quelle est la plus grande peinture de contenu (LCP)

La plus grande peinture de contenu (LCP) est une mesure cruciale qui mesure le temps de chargement de l'élément de contenu le plus important d'une page Web, comme une image ou une zone de texte. C'est l'un des composants essentiels de Core Web Vitals, un ensemble de mesures essentielles pour fournir une expérience utilisateur transparente. L'optimisation du LCP de votre site Web peut réduire les temps de chargement des pages et améliorer l'expérience utilisateur globale, ce qui entraîne une augmentation de la fidélisation et de l'acquisition de clients.

Chez Perspective, nous recevons fréquemment des demandes d'amélioration du LCP de Core Web Vitals. Vous pouvez voir ci-dessous un exemple d'optimisation du Largest Contentful Paint (LCP), que nous avons réalisé pour l'un de nos clients :

1. La plus grande peinture de contenu avant optimisation

2. La plus grande peinture de contenu après optimisation

Lisez aussi : Acer vs Lenovo Chromebooks : lequel vous convient le mieux ?

Quelles sont les causes les plus courantes d'un faible niveau de peinture du contenu le plus important :

1. temps de réponse du serveur lent

2. JS et CSS non optimisés

3. charge lente des ressources

4. rendu lent côté client.

Comment augmenter la plus grande peinture de contenu

Nous avons créé une petite liste de méthodes d'optimisation, qui sont constamment appliquées dans notre travail, et nous recommandons donc ce qui suit :

1. Supprimez le code JS qui n'est pas utilisé et réduisez les fichiers en mode production.

2. Il est préférable d'écrire les règles CSS dans des modules (blocs) afin que la stylisation de certains sélecteurs n'en arrête pas d'autres. Aussi, nous vous recommandons d'éviter de faire une longue chaîne de sélecteurs. Tous les fichiers CSS, ou bibliothèques à tester, doivent être stockés localement, et non téléchargés via CDN.

3. Compressez les images pour un chargement plus rapide et utilisez de nouveaux formats. Par exemple, convertissez JPEG en WebP, qui est de taille 1/3 sans perte de qualité.

4. Nous vous recommandons d'utiliser des images réactives (lien) pour optimiser les images en termes de vitesse de téléchargement et d'expérience utilisateur. Il y a un point important ici. La balise img a deux attributs essentiels :

1. src – pour indiquer la source de l'image d'origine. Les images de l'attribut src sont scannées et prises en compte dans le classement par les moteurs de recherche, il est donc nécessaire de spécifier ici l'image de la meilleure qualité.

2. srcset - vous permet de spécifier une variété de versions de l'image. À partir des images de l'attribut srcset, le navigateur sélectionne une image à charger et à afficher en fonction de la taille de l'écran des appareils de bureau ou des appareils mobiles sur lesquels il s'exécute.

5. nous ne recommandons pas d'ajouter loading="lazy" dans l'attribut de balise <img>.

Supprimer l'attribut paresseux pour augmenter la plus grande peinture de contenu

Qu'est-ce que le décalage de mise en page cumulé (CLS)

Le changement de mise en page cumulé (CLS) est une mesure de stabilité visuelle cruciale qui quantifie l'étendue des changements de mise en page inattendus lors du chargement de la page. Il est mesuré par la somme de tous les scores de décalage de mise en page qui dépassent un seuil de 0,1. L'amélioration de CLS est devenue une priorité absolue pour les entreprises, car l'expérience utilisateur occupe une place centrale dans le développement Web moderne. Il n'est donc pas surprenant que les clients demandent fréquemment des améliorations à cet indicateur de performance clé.

Lisez aussi : La croissance des casinos en direct en 2023

Quelles sont les causes les plus courantes d'un mauvais décalage de mise en page cumulé (CLS)

Les indicateurs visuels de stabilité sont essentiels pour garantir une expérience utilisateur fluide et transparente. Cependant, une mauvaise stabilité visuelle peut être causée par plusieurs facteurs techniques. Certains coupables courants incluent le dimensionnement des fichiers image et multimédia, les requêtes GraphQL et les carrousels non optimisés.

DIMENSIONNEMENT INCORRECT DES FICHIERS D'IMAGE ET MULTIMÉDIA

Lorsque les images ou les fichiers multimédias n'ont pas une taille spécifiée, le navigateur ne peut pas allouer la quantité d'espace appropriée lors du chargement de l'élément. Cela peut entraîner une mise en page qui change constamment, entraînant une mauvaise expérience utilisateur.

REQUÊTES GRAPHQL NON OPTIMISÉES

Lors du chargement d'images ou de blocs GraphQL sur une application Web progressive (PWA), le fait de ne pas réserver d'espace peut entraîner le « saut » de la page après le chargement. Cela peut entraîner de mauvais changements de mise en page et avoir un impact négatif sur les mesures de performances.

CARROUSELS NON OPTIMISÉS

Un carrousel non optimisé qui utilise des animations non fluides et non combinées peut déclencher un nouveau calcul de la mise en page, ce qui entraîne de mauvais scores de décalage de mise en page cumulé (CLS). Bien qu'un léger décalage puisse être à peine perceptible pour l'utilisateur, il peut avoir un impact significatif sur le changement de mise en page global et la stabilité visuelle de la page.

Comment améliorer l'indicateur de stabilité visuelle et le décalage de mise en page cumulé

UTILISATION D'ESPACES RÉSERVÉS

La mise en œuvre d'espaces réservés est une technique largement adoptée pour améliorer la performance perçue d'un site Web. Les espaces réservés servent d'indices visuels qui indiquent que le téléchargement est en cours et que le site fonctionne correctement. L'approche la plus efficace pour les images consiste à définir les attributs de hauteur et de largeur.

Utilisation d'espaces réservés pour améliorer le score de performance de Core Web Vitals

Cette stratégie permet au navigateur de réserver l'espace nécessaire pour les images avant le chargement complet, évitant ainsi les changements de mise en page inattendus. Voici un exemple d'implémentation de cette technique à l'aide de la balise img.

<img data-src=”image.webp” width=”380″ height=”120″ alt=”image”>

En définissant les attributs de hauteur et de largeur, le navigateur peut allouer de l'espace pour l'image et empêcher la mise en page de se déplacer lors du chargement de l'image. En conséquence, les utilisateurs bénéficieront d'une expérience de navigation plus fluide et plus stable visuellement.

ÉCRAN AVANT : SWAP

Pour obtenir le score CLS (Cumulative Layout Shift) optimal, les développeurs peuvent utiliser la propriété font-display: swap pour afficher le texte dans la police système avant le chargement complet du fichier de police personnalisé. La règle font-face dans le fichier de police CSS requis doit spécifier les chemins d'accès au fichier de police et inclure la propriété font-display: swap.

Voici un exemple de définition de la règle font-face avec la propriété font-display: swap :

@font-face {Font-family : "Proxima Nova" ;src : url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

En utilisant la propriété font-display: swap, le navigateur affichera immédiatement le texte dans la police système jusqu'à ce que le fichier de police personnalisé soit entièrement chargé. Cette technique peut empêcher les changements de mise en page inattendus et améliorer la stabilité visuelle de la page, ce qui se traduit par une meilleure expérience utilisateur.

Lisez aussi: L'impact des conditions économiques mondiales sur la valeur de la crypto-monnaie

TRANSFORMATION CSS

La fonction de transformation CSS est un outil influent que les développeurs peuvent utiliser pour améliorer les performances et l'expérience utilisateur de leur site. Par exemple, l'utilisation de la transformation CSS peut aider à atténuer les problèmes liés au chargement des carrousels d'images, ce qui se traduit par une expérience de navigation plus rapide et plus conviviale.

Lors de l'optimisation du chargement des blocs CMS (en particulier sur les projets PWA) via des éléments HTML GraphQL, il est recommandé de définir les propriétés CSS avec une hauteur fixe. Cette approche peut aider à prévenir les changements de mise en page inattendus et à garantir une page visuellement stable après son chargement.

En mettant en œuvre ces techniques, les entreprises peuvent améliorer le score Core Web Vitals et offrir une expérience utilisateur plus fluide et plus agréable. Dans l'un de nos cas récents, nous avons considérablement amélioré le score CLS en ajoutant la propriété font-display: swap dans le fichier CSS, en définissant une hauteur minimale et en optimisant le chargement de la police (@font-face).

1. BOUTIQUE EN LIGNE AVANT OPTIMISATION Core Web VITALS

2. BOUTIQUE EN LIGNE APRÈS OPTIMISATION Core Web VITALS

Qu'est-ce que le premier délai d'entrée (FID) ?

Le premier délai d'entrée (FID) est une mesure critique qui mesure l'interactivité d'un site Web. Le premier délai de saisie mesure le temps nécessaire à un site pour répondre à la première interaction d'un utilisateur avec une page, comme un clic sur un bouton ou une saisie dans un champ de formulaire.

Utilisation du FID dans Magento 2

Dans Magento 2, de nombreuses interactions utilisateur peuvent affecter le FID du site, comme cliquer sur un bouton de chat en direct, ajouter un produit au panier ou effectuer un achat. Si ces interactions ne sont pas réactives et ne fournissent pas de retour immédiat à l'utilisateur, cela peut entraîner une expérience utilisateur lente et frustrante.

Pour garantir une expérience utilisateur optimale, il est essentiel d'atteindre un score FID inférieur à 100 ms. Ceci peut être réalisé grâce à diverses techniques d'optimisation, telles que la réduction du temps d'exécution de JavaScript, l'optimisation des scripts tiers et l'optimisation du temps de réponse du serveur. En optimisant le FID, les entreprises peuvent fournir un site Web plus réactif et attrayant qui maintient les utilisateurs engagés et satisfaits.

Comment optimiser le premier délai d'entrée

DÉCOMPOSITION DES TÂCHES

Une approche recommandée pour améliorer le premier délai d'entrée (FID) consiste à partitionner les tâches plus longues en sous-tâches plus petites et plus faciles à gérer. Les tâches longues peuvent surcharger le thread principal, entravant le traitement et l'exécution des entrées de l'utilisateur. Tout segment de code qui entrave le flux pendant plus de 50 millisecondes est considéré comme une tâche longue.

La vérification du FID nécessite d'effectuer des mesures dans des conditions réelles, car une véritable interaction de l'utilisateur avec la page Web est essentielle pour obtenir des mesures précises.

TEST EN CONDITIONS RÉELLES

Pour mesurer avec précision le premier délai d'entrée (FID), il est recommandé d'utiliser des outils spécialisés qui évaluent les performances dans des conditions réelles. Quelques-uns de ces outils incluent :

1. Test PageSpeed ​​Insights ;

2. Search Console (rapport Core Web Vitals) ;

3. Rapport d'expérience utilisateur Chrome ;

Étant donné que le FID nécessite une interaction de l'utilisateur, il n'est pas possible d'effectuer des tests en laboratoire. En revanche, les métriques de terrain capturent les performances réelles en analysant le comportement des utilisateurs. Cependant, le temps de blocage total (TBT), une métrique qui évalue la période entre le First Contentful Paint (FCP) et le Time to Interactive (TTI), peut être mesuré en laboratoire et est bien corrélé avec le FID dans les conditions de terrain. TBT est également apte à identifier les problèmes liés à l'interactivité. Par conséquent, toute optimisation qui améliore le TBT dans un environnement de laboratoire améliorera également le FID pour les utilisateurs. Lighthouse est un outil qui permet de mesurer efficacement le TBT.

Lisez également : Un guide étape par étape pour créer une vitrine Shopify personnalisée

ACTIVER LE TÉLÉCHARGEMENT À LA DEMANDE

Vous pouvez utiliser un code tiers pour activer le téléchargement à la demande des pages Web. Par exemple, vous pouvez activer le téléchargement à la demande afin que la bannière en bas de la page ou de l'annonce ne s'affiche que lorsqu'elle défile à proximité de la vue. L'idée principale est de télécharger en priorité les éléments Web qui apportent la plus grande valeur aux utilisateurs, et non ceux qui peuvent être téléchargés en fin de ligne.

OPTIMISER JAVASCRIPT

Pour améliorer les performances du site Web, il est crucial d'éliminer tous les fichiers JavaScript inutiles. Une approche recommandée consiste à différer le téléchargement des fichiers JavaScript jusqu'à ce qu'ils soient nécessaires. Cette technique permet initialement au navigateur d'obtenir des éléments Web critiques tels que HTML et CSS. Suite à cela, les scripts peuvent être évalués, facilitant ainsi un temps de chargement plus rapide. L'adoption de cette stratégie est particulièrement utile pour les sites Web dotés d'extensions JavaScript substantielles, telles que l'extension Mega Menu utilisée par de nombreux magasins Magento. Cette technique permet aux propriétaires de sites Web de rationaliser le processus de chargement et d'offrir une expérience utilisateur plus efficace. Par conséquent, la suppression de JavaScript inutilisé est une technique d'optimisation fondamentale qui doit être envisagée pour améliorer les performances du site Web.

Plus d'indicateurs pour améliorer Core Web Vitals

En plus des trois principaux éléments vitaux du Web ci-dessus, plusieurs mesures supplémentaires existent.

Première peinture de contenu (FCP)

First Contentful Paint (FCP) est une mesure précieuse qui permet de mesurer le temps nécessaire à une page pour afficher son image ou son bloc de texte initial. Cette métrique inclut le temps de traitement des requêtes DNS, des requêtes serveur, des opérations côté serveur et du rendu primaire DOM. Bien que des facteurs tels que le DNS et la vitesse du réseau soient hors de notre contrôle, la réduction du temps de traitement des tâches côté serveur et l'optimisation du chargement des styles et des scripts peuvent avoir un impact significatif sur les performances. Plus précisément, Google recommande de donner la priorité à l'inclusion de styles critiques uniquement dans la section d'en-tête de la page Web et, si possible, d'utiliser des balises de style au lieu de balises de lien pour minimiser les demandes de serveur inutiles.

Pour améliorer encore les performances du site Web, Google Analytics fournit une mine d'informations sur le comportement et l'engagement des utilisateurs. Par exemple, en utilisant le rapport User Timings, les propriétaires de sites Web peuvent surveiller la durée d'actions et d'événements spécifiques, y compris les chargements de page, les interactions des utilisateurs et d'autres événements personnalisés. Ces données peuvent aider à identifier les zones du site Web qui nécessitent une optimisation et à suivre l'efficacité de toute modification apportée.

Mesure de l'indice de vitesse

Alors que le FCP mesure le temps nécessaire à l'affichage du premier élément, la mesure de l'indice de vitesse (SI) capture la vitesse de chargement globale des pages Web en tenant compte du temps nécessaire pour que la page devienne entièrement visible pour l'utilisateur. Il fournit un aperçu complet des performances de chargement des pages et prend en compte les effets de la vitesse du réseau et du temps de traitement du serveur. En exploitant une combinaison de FCP et SI, les propriétaires de sites peuvent obtenir un aperçu complet des performances du site Web et prendre les mesures appropriées pour améliorer l'expérience utilisateur.

SI prend en compte divers facteurs qui ont un impact sur les performances des pages Web, notamment la vitesse du réseau, le temps de traitement du serveur et la taille des ressources chargées. La métrique calcule l'exhaustivité visuelle d'une page Web à intervalles réguliers pendant le processus de chargement et attribue un score représentant la vitesse de la page. Plus le score SI est bas, plus la page se charge rapidement et meilleure est l'expérience utilisateur.

Pour améliorer l'IS, les développeurs Web peuvent utiliser diverses techniques d'optimisation, notamment en minimisant les ressources externes telles que CSS et JavaScript, en réduisant la taille des images et en tirant parti de la mise en cache du navigateur pour accélérer le chargement des ressources. En analysant les scores SI avec des outils tels que Google Analytics et WebPageTest, les propriétaires de sites Web peuvent identifier les domaines qui nécessitent une optimisation et apporter des modifications pour améliorer les performances du site Web. En fin de compte, en améliorant les performances du site Web et en améliorant l'expérience utilisateur, les propriétaires de sites Web peuvent améliorer l'engagement, augmenter les conversions et développer leurs activités.

Interaction avec la peinture suivante

L'interaction avec Next Paint (INP) est une métrique critique qui mesure le temps entre l'interaction d'un utilisateur avec la page Web et l'affichage d'une réponse visuelle. Cette métrique est particulièrement pertinente pour les pages qui nécessitent des interactions fréquentes avec les utilisateurs, telles que les plateformes de médias sociaux et les sites de commerce électronique. INP fournit des informations précieuses sur la réactivité d'une page Web et aide à identifier les domaines qui nécessitent une optimisation pour améliorer l'expérience utilisateur.

L'INP est calculé en sélectionnant l'interaction utilisateur la plus récente lors de la visite actuelle de la page Web et en mesurant le temps nécessaire à la page Web pour répondre avec une mise à jour visuelle. Cette mise à jour peut inclure diverses modifications, telles que l'apparition d'une nouvelle image ou d'un nouveau bloc de texte, l'ajustement de la position ou de la taille d'un élément ou l'exécution d'une animation complexe. En mesurant le temps entre l'interaction de l'utilisateur et la réponse visuelle, INP peut fournir des informations précieuses sur les performances perçues d'une page Web et aider à identifier les domaines qui nécessitent une optimisation.

Pour améliorer l'INP, les développeurs Web peuvent mettre en œuvre une gamme de techniques d'optimisation, telles que la minimisation de l'utilisation de JavaScript et la réduction de la taille des images et des vidéos. De plus, l'utilisation de technologies Web modernes telles que l'API Intersection Observer et Web Workers peut aider à améliorer les performances en déchargeant les tâches gourmandes en ressources et en réduisant la charge de travail sur le thread principal.

Lisez aussi : Comment la traduction en français aura-t-elle un impact positif sur votre entreprise ?

Délai avant la première bouchée (TTFB)

Le temps jusqu'au premier octet (TTFB) est une mesure cruciale pour les performances des pages. Il représente le temps que le serveur met pour recevoir le premier octet de données après l'envoi d'une requête. La valeur TTFB est influencée par divers facteurs, tels que la latence du réseau, le temps de traitement du serveur et la complexité du code du site Web. Une valeur TTFB inférieure est souhaitable car elle indique des temps de chargement plus rapides et une meilleure expérience utilisateur. Le temps de réponse idéal pour un site Web se situe entre 250 et 350 millisecondes, tandis que tout ce qui dépasse 500 est considéré comme un temps de réponse long et peut avoir un impact négatif sur les performances du site Web.

Pour améliorer les valeurs TTFB, les propriétaires de sites Web peuvent utiliser divers outils et techniques. L'une de ces techniques est la mise en cache des requêtes, stockant les données fréquemment consultées dans un cache, permettant un accès et une récupération plus rapides. Des outils comme Varnish peuvent agir comme une couche de mise en cache entre le serveur et l'utilisateur, améliorant la vitesse du site Web et réduisant la charge du serveur. Pour les projets PWA, les techniciens de service peuvent être utilisés pour mettre en cache le contenu HTML, qui peut être mis à jour lorsque le contenu change, offrant un accès plus rapide au contenu fréquemment consulté.

Pour les projets Magento, la mise en cache pleine page peut également améliorer les valeurs TTFB. La mise en cache pleine page permet de mettre en cache la page entière, ce qui réduit la nécessité pour le serveur d'exécuter beaucoup de code et de récupérer des informations à partir de la base de données. Lorsque la mise en cache pleine page est activée, le navigateur peut lire la page directement à partir du cache, ce qui accélère les temps de chargement et améliore l'expérience utilisateur.

Par conséquent, vous ne devez pas créer autant de pages et de blocs mais les réduire au maximum.

Outils recommandés pour l'audit Core Web Vitals

Lighthouse est un puissant outil d'audit des performances Web qui peut aider les développeurs à diagnostiquer les problèmes de vitesse et d'interactivité des sites Web. Il combine les technologies Web modernes et les meilleures pratiques pour fournir une analyse approfondie des performances du site Web et offre des informations d'optimisation exploitables. En exécutant des audits Lighthouse, les développeurs peuvent rapidement identifier les opportunités d'amélioration de la vitesse du site, de l'interactivité et d'autres mesures clés.

Le rapport Lighthouse comporte plusieurs sections :

1. Performance du site : analyse de la vitesse de téléchargement du site

2. Fonctionnalités : décrit comment accélérer votre site et améliorer ses performances.

3. Diagnostic : indique ce qui doit être pris en compte et corrigé

4. Programme web progressif : audit détaillé

5. Disponibilité : section sur la façon d'améliorer la conception UX

6. Meilleures pratiques : les meilleurs moyens d'optimiser de manière fiable la plupart des sites

Avant d'exécuter un audit, vous pouvez utiliser le bouton Analyser le chargement de la page pour ajuster le niveau d'audit en fonction de vos intérêts (Performance, SEO, Accessibilité, etc.).

Votre rapport d'audit s'affichera dans la nouvelle fenêtre au démarrage de l'audit. Il est également disponible pour la mesure sur le site Web PageSpeed ​​Insights.

N'oubliez pas que les métriques de Core Web Vitals seront prises au cours des 28 derniers jours.

Lisez également: Quels sont les meilleurs ordinateurs portables Apple MacBook Air et MacBook Pro?

conclusion

En conclusion, pensez à contacter notre équipe d'audit Core Web Vitals pour vous assurer une bonne expérience utilisateur pour votre boutique en ligne. Bien que les métriques Core Web Vitals puissent sembler abstraites, elles rendent votre site plus convivial. De plus, ces mesures ont un lien clair avec la fonctionnalité du code de votre site, ce qui les rend relativement faciles à améliorer.

D'après notre expérience, l'optimisation de ces mesures peut entraîner des améliorations rapides du classement et des taux de conversion. En mesurant Core Web Vitals, vous pouvez identifier les domaines à optimiser et améliorer l'expérience utilisateur globale de votre site Web. Alors, n'hésitez pas à contacter l'équipe d'audit de Core Web Vitals et voyez l'impact positif que cela peut avoir sur votre activité en ligne !