
Les Vitaux Web de base sont un ensemble d'indicateurs permettant de mesurer la qualité de l'expérience utilisateur sur les sites web. Google les considère comme des signaux de classement et ils sont donc également importants pour le référencement (multilingue). Si vous les négligez, vous risquez d'être rejeté par les visiteurs et les moteurs de recherche.
Pour éviter ce scénario, vous trouverez dans cet article tout ce qu'il faut savoir pour améliorer ces indicateurs sur votre site Web multilingue. Nous vous expliquerons ce que sont les Vitaux Web de base, comment tester les performances actuelles de votre site, et nous vous donnerons des instructions étape par étape sur la façon d'améliorer chacun des indicateurs sur votre site Web.
Comme nous l'avons mentionné, les indicateurs clés de performance mesurent l'expérience de l'utilisateur sur les sites web. Elles sont toutes liées d'une manière ou d'une autre à la vitesse de chargement et à l'interactivité du site web. Ces indicateurs ont été introduits par Google en 2020 et font désormais partie intégrante de son algorithme de recherche. Examinons-les une par une.
Le premier est le Largest Contentful Paint (LCP). Il mesure le temps de chargement d'une page jusqu'à ce qu'elle devienne visible et utilisable. Il détermine cela en détectant le plus grand élément de contenu d'une page web, qui est souvent une image ou un bloc de texte, et en déterminant le moment où il devient visible pour les visiteurs.

Cet intervalle est mesuré en secondes et utilisé comme score LCP. Google a défini un certain nombre de seuils pour déterminer le type de temps que votre site doit viser.

Comme vous pouvez le voir ci-dessus, un bon score est de 2,5 secondes pour le chargement de l'élément LCP. Un délai de 4 secondes est acceptable mais devrait être amélioré, et tout ce qui dépasse ce délai est considéré comme trop long par Google.
L'indicateur suivant mesure la stabilité de la mise en page d'un site web lors de son chargement, c'est-à-dire l'ampleur du mouvement qui se produit lorsque de nouveaux éléments apparaissent sur la page. Il s'agit du décalage cumulatif de la mise en page (Cumulative Layout Shift ou CLS).
Pourquoi cela est-il important ?
Un degré élevé de CLS peut perturber l'interaction de l'utilisateur avec votre site. Outre le fait qu'il n'est pas agréable à regarder, il peut également leur faire perdre leur place sur la page en raison du déplacement du texte ou les amener à cliquer accidentellement sur le mauvais élément parce qu'il se déplace au mauvais moment.
CLS est calculé en examinant l'ampleur des mouvements de la présentation pendant le chargement, ainsi que l'importance de ces mouvements. Ces deux ratios sont multipliés l'un par l'autre pour obtenir la note.

Un score CLS inférieur à 0,1 est bon ; jusqu'à 0,25, une amélioration est nécessaire et tout ce qui est supérieur est inacceptable.
Remarque : les déplacements de la page dans les 500 ms suivant l'interaction de l'utilisateur avec la page (un clic, par exemple) n'affectent pas votre score CLS. Ces mouvements sont considérés comme intentionnels.
Interaction to Next Paint (INP) est la dernière mesure ajoutée à Core Web Vitals. Elle remplacera le délai de première entrée (FID), l'une des mesures initiales, en mars 2024.
Tous deux mesurent le temps qui s'écoule entre le moment où un visiteur interagit avec un élément de la page et la rapidité de la réaction de cet élément. Bien entendu, plus la réaction est rapide, mieux c'est.
Alors que le délai de première entrée ne prend en compte que la première interaction du visiteur, l'indicateur Interaction to Next Paint suit tous les engagements de la page au cours d'une visite et affiche le score le plus défavorable. Vous obtenez ainsi une image plus précise de la réactivité de la page.
Quel est le bon score INP à viser ?
Jusqu'à 200 ms, c'est bien, et jusqu'à 500 ms, c'est passable ; tout dépassement aura un impact négatif sur l'image que Google se fait de votre site.

Une fois que vous savez ce que sont exactement les Vitaux Web de base, la question logique suivante est de savoir comment vous pouvez savoir où se situe votre site. Le moyen le plus simple de le savoir est d'utiliser un outil de test de vitesse tel que PageSpeed Insights.

Il vous suffit de saisir l'URL de votre site web en haut de la page et de lancer le test. Une fois le test terminé, il vous indique non seulement si votre site a réussi l'évaluation de Core Web Vitals, mais il fournit également des valeurs pour chacun des points de données mentionnés.

Si les données sont disponibles, vous obtenez un mélange de résultats réels et de résultats de laboratoire. Il s'agit notamment d'informations provenant de CrUX, où Google a recueilli des données sur les utilisateurs de sites web à partir de son navigateur Chrome. Dans le cas contraire, vous n'obtiendrez que les mesures de Lighthouse, qui les calcule de manière ad hoc.
GTmetrix, WebPageTest ou l'extension Chrome Web Vitals sont d'autres outils qui peuvent vous renseigner sur les performances de votre Core Web Vitals.
Alors, que faire si vos valeurs sont loin d'être irréprochables ? Parlons-en maintenant.
À partir de maintenant, nous allons expliquer étape par étape comment améliorer chaque métrique Core Web Vital sur votre site multilingue. Nous verrons comment le faire manuellement, ainsi qu'un moyen facile de le faire pour les utilisateurs de WordPress avec l'aide du plugin WP Rocket.
WP Rocket permet aux personnes sans connaissances techniques de mettre en œuvre des améliorations de performance sophistiquées rapidement et sans effort. C'est facilement l'un des plugins de mise en cache les plus puissants et les plus conviviaux pour les débutants.
Commençons par quelques conseils généraux sur la manière de garantir un chargement rapide de votre site web :
Les conseils ci-dessus constituent une bonne base pour obtenir des performances généralement rapides avant de passer à des mesures plus spécifiques.
Il existe deux voies principales pour améliorer le Largest Contentful Paint : optimiser la vitesse de chargement des pages en général (comme indiqué ci-dessus) et accélérer la livraison de vos éléments LCP.
Quel est votre élément LCP ? PageSpeed Insights vous le dira sous Diagnostics.

La mise en cache et la compression sont deux techniques fondamentales pour améliorer les performances d'un site. La première consiste à stocker les données des pages rendues afin d'en accélérer l'accès pour les visiteurs. Cette technique est particulièrement efficace lorsque vous utilisez WordPress pour alimenter votre site web.
Pourquoi ?
Sur un CMS comme WordPress, les pages sont généralement créées dynamiquement à partir d'un code PHP et d'un contenu extrait d'une base de données. Le serveur les transforme en documents HTML et les envoie au navigateur.
La mise en cache accélère ce processus en stockant des versions HTML pré-rendues de vos pages web sur le serveur afin que vous puissiez les envoyer directement à vos visiteurs. Cela peut éliminer plusieurs allers-retours par visite et rendre l'expérience de l'utilisateur beaucoup plus rapide et meilleure.
La compression, quant à elle, est la même chose que la création de fichiers zip, à ceci près qu'elle s'effectue sur un serveur et non sur votre ordinateur personnel. Elle rétrécit les fichiers qui composent un site web afin qu'ils puissent être téléchargés et affichés plus rapidement.
Pour activer la mise en cache et la compression sur votre serveur, vous devez modifier un fichier appelé .htaccess. Il contient des directives importantes pour le fonctionnement de votre serveur web et se trouve généralement dans le répertoire racine de votre site web.

Vous pouvez y copier et coller le code suivant pour activer les deux techniques d'optimisation de la vitesse mentionnées ci-dessus :
Les deux extraits de code sont fournis par GTmetrix et fonctionnent pour les serveurs Apache. Vous pouvez trouver des instructions pour d'autres serveurs, tels que NGINX, en ligne, par exemple dans ce tutoriel chez KeyCDN.
Si cela vous semble intimidant, vous pouvez réaliser la même chose en utilisant le plugin WP Rocket mentionné plus haut. Il suffit d'installer et d'activer le plugin, qui met en œuvre la compression et la mise en cache automatiquement, y compris pour les appareils mobiles.

Tout ce que vous pouvez faire pour rationaliser la livraison et le traitement du code de votre site Web contribuera à améliorer Largest Contentful Paint sur votre site Web multilingue. Passons en revue quelques bonnes options à cet effet :
Pour la minification à la main, vous pouvez utiliser des outils comme Minifier ou Grunt. L'optimisation des feuilles de style CSS et des scripts JavaScript implique généralement une analyse approfondie de ce qui empêche le chargement de vos pages. Les outils de test de vitesse vous indiqueront les scripts qui posent problème.

Ensuite, c'est à vous d'ajouter manuellement les balises defer et async. Elles ressemblent à ceci :
Vous pouvez également diviser certains codes pour ne charger que ce qui est essentiel au départ. Nous y reviendrons plus loin lorsque nous parlerons de l'optimisation de l'INP.
Si vous souhaitez automatiser ces processus, WP Rocket peut minifier le code, supprimer les feuilles de style CSS inutilisées, différer le JavaScript et le charger de manière asynchrone en cochant simplement quelques cases.

L'optimisation des images consiste à réduire la taille des éléments visuels de votre site web sans en compromettre la qualité. Il s'agit d'une amélioration générale des performances et d'une aide particulière à l'amélioration du Largest Contentful Paint, car les images finissent souvent par être les éléments LCP.
Comment optimiser les images sur votre site ?
Vous pouvez utiliser des outils comme TinyPNG pour compresser les images et les convertir dans d'autres formats de fichiers. Un outil comme Image Resizer peut également les découper aux dimensions souhaitées. Vous trouverez également des options pour cela dans WordPress sous Réglages > Médias.

De plus, si vous utilisez la dernière version de WordPress (ou toute version postérieure à la version 5.4), le chargement paresseux devrait être activé par défaut sur votre site.
Si vous voulez une solution automatique, il y a Imagify. C'est un plugin d'optimisation d'images qui fonctionne bien avec WP Rocket. Il peut traiter automatiquement vos images pour les rendre plus légères tout en équilibrant la qualité et la performance. Le plugin convertit vos visuels en WebP et Avif, redimensionne les grandes images, et affiche automatiquement les versions optimisées sur votre site WordPress.

De plus, WP Rocket offre un chargement paresseux non seulement pour les images, mais aussi pour les arrière-plans CSS et les médias intégrés, comme les vidéos. De plus, vous pouvez exclure les médias du chargement paresseux lorsque cela s'avère utile.

Un réseau de diffusion de contenu (CDN) est constitué d'un certain nombre d'ordinateurs interconnectés, situés dans différentes régions du monde, qui contiennent les fichiers de votre site web. Son objectif est de les livrer à vos visiteurs à partir de l'endroit le plus proche d'eux, et ce le plus rapidement possible. Ceci est particulièrement important pour les sites web multilingues ayant un public international.
C'est pourquoi Weglot met automatiquement en place un CDN afin que vous puissiez diffuser rapidement votre contenu traduit dans le monde entier. Si vous n'êtes pas un utilisateur de Weglot , vous devez généralement vous inscrire à un CDN et le configurer pour votre site. Cela varie d'un fournisseur à l'autre ; voici un exemple d'instructions.
Si vous avez besoin d'aide, WP Rocket dispose de modules complémentaires dédiés à Sucuri et Cloudflare, deux solutions populaires. Ils facilitent et accélèrent la configuration de ces réseaux de diffusion de contenu pour votre site.

Vous pouvez également activer d'autres réseaux dans les paramètres CDN en indiquant le CNAME de votre fournisseur.

Enfin, WP Rocket dispose également de son propre réseau, appelé RocketCDN, que vous pouvez configurer automatiquement depuis le plugin. En outre, la capacité de WP Rocket à réduire les fichiers de code peut réduire le trafic CDN et les coûts.
Le CLS est le prochain élément de notre liste d'éléments vitaux à améliorer sur votre site web multilingue. Voici comment vous pouvez vous assurer de réussir dans ce domaine.
L'un des principaux facteurs de mauvais résultats pour le CLS est souvent l'absence d'attributs de hauteur et de largeur définis pour les images.
Si vous n'indiquez pas la taille d'une image sur la page finale, le navigateur ne peut pas lui réserver l'espace nécessaire. Par conséquent, lorsque la taille réelle est différente de celle de l'espace réservé, l'image apparaît soudainement, repoussant tout ce qui se trouve en dessous d'elle. Cela peut se produire en particulier dans le cas des médias téléchargés paresseusement, qui ne s'affichent pas lors du premier chargement de la page.
La première règle pour optimiser CLS est donc d'ajouter des définitions de hauteur et de largeur à vos images. Comment procéder ?
En HTML pur, il se présente simplement comme suit :
Si vous utilisez l'éditeur de blocs de WordPress, il devrait définir les dimensions automatiquement, mais vous pouvez également définir des tailles spécifiques lors de la création de votre contenu.

De plus, WP Rocket dispose d'une option permettant d'ajouter les déclarations de largeur et de hauteur manquantes à vos fichiers média, au cas où vous en auriez oublié.

La règle ci-dessus s'applique également au contenu dynamique, tel que les éléments intégrés ou les publicités. Ils doivent eux aussi être définis en hauteur et en largeur pour éviter de se déplacer dans le reste de la mise en page.
Le problème est qu'il n'est pas toujours possible de contrôler la taille de ces éléments, car ils proviennent souvent de sources tierces. Dans ce cas, il est bon de faire au moins une estimation pour réserver l'espace. Même si l'élément final est plus grand, le décalage ne sera pas aussi prononcé, ce qui se traduira par une note CLS moins élevée.
Dans WordPress, l'éditeur ajoute automatiquement la largeur et la hauteur au contenu incorporé. De plus, comme nous l'avons mentionné, WP Rocket dispose d'une option permettant de charger paresseusement les médias intégrés. Cela permet de réserver automatiquement l'espace nécessaire à leur chargement.
Les polices de caractères peuvent elles aussi entraîner des modifications de la mise en page, en particulier lorsque vous utilisez des polices personnalisées sur votre site web. Les deux problèmes les plus courants sont les suivants :
Vous pouvez éviter ces problèmes grâce aux stratégies suivantes :
Si vous utilisez WP Rocket, le plugin est livré avec une option pour précharger les fichiers de police. Tout ce que vous avez à faire est d'entrer le chemin où ils se trouvent.

Par ailleurs, une partie de l'optimisation des polices pour un site web multilingue consiste également à utiliser des polices compatibles avec différents alphabets. Cela est particulièrement vrai si vous proposez des langues RTL (écrites de droite à gauche) sur votre site.
Par contenu dynamique, nous entendons les éléments qui apparaissent après le chargement d'une page. Il s'agit par exemple d'images chargées paresseusement, de bannières, de formulaires, etc.
Pour que leur impact sur votre score CLS reste faible, suivez les mêmes conseils que ci-dessus :
D'ailleurs, Weglot est tout à fait capable de traduire du contenu dynamique. Vous n'avez donc pas à craindre que les membres de votre public ne le comprennent pas.
Enfin, voyons comment vous pouvez vous assurer que votre PNI est pertinent.
JavaScript est généralement l'un des principaux facteurs à l'origine des problèmes liés à Interaction to Next Paint, en particulier les tâches dites "longues". Il s'agit de tâches JavaScript qui prennent plus de 50 ms et qui peuvent bloquer la capacité du navigateur à traiter les interactions de l'utilisateur sur la page. En outre, la présence d'un grand nombre de scripts sur votre site en général peut nuire à la réactivité des pages.
Nous avons déjà parlé de la manière dont vous pouvez optimiser JavaScript dans la section LCP. Pour INP, il est particulièrement important que vous traitiez les tâches longues sur votre site. Si elles existent, vous pouvez les trouver dans les outils de développement de Chrome. Elles sont marquées par de petits triangles rouges.

Voyez si vous pouvez les diviser en morceaux plus petits qui peuvent être chargés consécutivement sans bloquer de façon permanente le fil d'exécution principal du navigateur. Vous trouverez des informations détaillées à ce sujet dans ce tutoriel web.dev. La minimisation, le report, l'asynchronisation et la suppression du code inutile permettent également au navigateur de rester réactif aux interactions de l'utilisateur.
Si vous utilisez WP Rocket, le plugin vous permet de configurer en détail les fichiers JavaScript dont vous souhaitez retarder le chargement et ceux dont vous ne voulez pas.

Tout ce qui s'applique à JavaScript est également valable pour CSS. Le téléchargement et le traitement des feuilles de style peuvent occuper le navigateur et retarder sa réaction à la saisie de l'utilisateur.
Vous pouvez également utiliser des outils de test de vitesse pour trouver les feuilles de style CSS inutilisées. En outre, vous pouvez diviser vos feuilles de style pour charger en premier les feuilles de style CSS cruciales ou les mettre en ligne.
Comme mentionné, WP Rocket a des options pour supprimer automatiquement les CSS inutilisés.

Nous avons déjà parlé du chargement paresseux pour l'optimisation des images. Il peut également avoir un impact positif sur l'INP, car il libère les ressources du navigateur pour qu'elles réagissent à l'entrée de l'utilisateur. Suivez les instructions ci-dessus pour le mettre en œuvre.
D'ailleurs, si vous rencontrez des problèmes avec la traduction des images chargées paresseusement, Weglot, par défaut, traduit les URLs des images ajoutées aux attributs data-src ou srcset. Si votre chargement paresseux utilise des attributs personnalisés, Weglot ne les traduira pas d'emblée. Vous devrez ajouter un filtre PHP, qui est spécialement conçu pour les intégrations WordPress.
Si vous utilisez l'intégration JavaScript de Weglot et/ou ne parvenez toujours pas à traduire vos images, contactez le service d'assistance pour plus d'informations.
Les indicateurs de qualité de base (Core Web Vitals) sont un indicateur de qualité important pour la convivialité de votre site web multilingue. Non seulement les visiteurs s'intéressent à ce sujet, mais les Core Web Vitals ont également un impact sur les classements dans les moteurs de recherche. C'est pourquoi vous devriez prendre au sérieux l'optimisation de votre site à cet égard.
Comme vous l'avez probablement vu ci-dessus, ce n'est pas si difficile. Il s'agit surtout de s'assurer que vos pages web se chargent rapidement et qu'elles restent stables et réactives pendant cette période. Pour ce faire, vous pouvez prendre certaines mesures clés, que nous avons abordées en détail ci-dessus.
Si vous avez l'impression que la manipulation du code et des fichiers du site web est au-dessus de vos capacités, vous pouvez également opter pour une solution de plugin comme WP Rocket. Il peut optimiser votre site pour vous sans nécessiter de développement ou de compétences techniques et fait une grande partie du travail par défaut.
La meilleure façon de comprendre la puissance de Weglot de le découvrir par vous-même. Testez-le gratuitement et sans engagement.
La meilleure façon de comprendre la puissance de Weglot de le tester par vous-même. Essayez-le gratuitement et sans engagement.
Un site web de démonstration est disponible dans votre tableau de bord si vous n'êtes pas encore prêt à connecter votre site web.