Marketing international

Comment améliorer les Core Web Vitals d'un site web multilingue

Comment améliorer les Core Web Vitals d'un site web multilingue
Nick Schäferhoff
Écrit par
Nick Schäferhoff
Eugène Ernoult
Relu par
Eugène Ernoult
Mis à jour le
8 avril 2024
27 mai 2025

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.

Qu'entend-on par "Core Web Vitals" ?

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.

La plus grande peinture de contenu (LCP)

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.

Où trouver le plus grand élément Contentful Paint sur PageSpeed Insights ?

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.

Le plus grand score de Contentful Paint pour le timing que votre site devrait avoir

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.

Décalage cumulatif de la mise en page (CLS)

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.

Paramètre pour un bon score de décalage cumulatif de la mise en page

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 avec la peinture suivante (INP)

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.

Métrique pour avoir un bon score d'Interaction to Next Paint

Comment tester les principales caractéristiques de votre site web ?

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.

Page d'accueil de Page Speed 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.

À quoi ressemble un échec à l'évaluation de la base de données vitales sur le web ?

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.

Améliorer les informations vitales sur les sites web multilingues

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.

Amélioration des performances générales

Commençons par quelques conseils généraux sur la manière de garantir un chargement rapide de votre site web :

  • Choisissez un bon hébergeur - La qualité de l'hébergeur de votre site web a une grande influence sur la rapidité de son chargement. Assurez-vous de choisir un fournisseur réputé en lisant des comparaisons de vitesse et des commentaires d'utilisateurs avant de prendre une décision.
  • Maintenez votre site à jour - Si votre site web est basé sur un système de gestion de contenu comme WordPress, veillez à ce que tout soit à jour. Il s'agit du logiciel lui-même, mais aussi des plugins, des thèmes, de la version PHP du serveur et de tous les autres éléments du site. Ce n'est qu'ainsi que vous pourrez bénéficier des nouvelles améliorations en matière de vitesse.
  • Utilisez moins de plugins - En même temps, essayez de ne pas exagérer avec les éléments que vous ajoutez à votre site. Chaque plugin et extension est accompagné de code supplémentaire, ce qui peut potentiellement ralentir votre site. Limitez donc au strict minimum ce que vous avez sur votre site.
  • Optez pour des composants de haute qualité - Pour les extensions qui trouvent leur place sur votre site web, assurez-vous qu'elles sont de haute qualité et optimisées pour la performance, telles que Weglot.

Les conseils ci-dessus constituent une bonne base pour obtenir des performances généralement rapides avant de passer à des mesures plus spécifiques.

Correction de la plus grande peinture de contenu

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.

Les diagnostics vous indiquent quel est l'élément de votre LCP

Mise en place de la mise en cache et de la compression

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.

Où trouver le fichier .htaccess dans votre répertoire racine ?

Vous pouvez y copier et coller le code suivant pour activer les deux techniques d'optimisation de la vitesse mentionnées ci-dessus :


<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

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.

Page de cache de WP Rocket

Optimiser le code et la diffusion du code

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 :

  • Suppression des balises inutiles - Si votre site contient beaucoup de codes JavaScript et CSS redondants, vous pouvez améliorer les performances en éliminant tout ce qui n'est pas strictement nécessaire.
  • Minification - Il s'agit de supprimer les espaces blancs et les commentaires des fichiers d'un site web. Cette opération permet de réduire la taille des fichiers, ce qui accélère leur téléchargement et leur traitement.
  • Optimisation CSS et JavaScript - Il s'agit ici de configurer les fichiers de votre site web de manière à ce qu'ils ne bloquent pas le chargement du reste de votre site. C'est le fameux message "éliminez les ressources bloquant le rendu" que vous pouvez recevoir des outils de test de vitesse. Les attributs "defer " et " async " sont deux outils populaires pour cela. Respectivement, ils déplacent l'exécution de JavaScript à la fin de la file d'attente de chargement et indiquent au navigateur de télécharger des fichiers en arrière-plan et de ne les exécuter que lorsqu'ils sont disponibles.

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.

Page de diagnostic

Ensuite, c'est à vous d'ajouter manuellement les balises defer et async. Elles ressemblent à ceci :


<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

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.

Optimisation des fichiers n WP Rocket

Optimiser les images

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 ?

  • Traduire les images - La traduction de votre site web ne se limite pas au texte. Vous devrez également convertir le texte de vos images et/ou utiliser des images plus appropriées sur le plan culturel. Heureusement, Weglot vous couvre dans ce domaine.
  • Compression - Tout comme les fichiers texte, vous pouvez supprimer les données inutiles des images afin d'en réduire la taille.
  • Utiliser des formats modernes - Les images dans des formats de nouvelle génération, tels que WebP ou AVIF, sont beaucoup plus petites que JPG ou PNG tout en étant aussi belles.
  • Dimensionnez correctement les visuels - Affichez des images aussi grandes qu'elles apparaissent sur votre site web. Sinon, vous obligez vos visiteurs à charger des données inutiles.
  • Activer le chargement paresseux - Cette technique ne charge que les images qui sont effectivement visibles dans le navigateur lors du chargement initial et récupère celles qui se trouvent plus bas dans la page à mesure que les visiteurs font défiler celle-ci. Cela permet également d'éviter de gaspiller de la bande passante sur des images non LCP, de sorte que les images importantes se chargent plus rapidement.
Outils disponibles

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.

Paramètres des médias - où fixer la taille des images

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.

Imagify - optimisation en masse de vos fichiers multimédias

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.

Régler les paramètres de chargement paresseux pour vos médias sur WP Rocket

Utiliser un CDN

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.

Les modules complémentaires de WP Rocket comme CloudFare et Sucuri

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

WP Rocket configure votre CDN

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.

Adressage du décalage cumulatif de la disposition

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.

Inclure les attributs de la taille de l'image

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 :


<img src="image.jpg" alt="Insert alt text" width="600" height="700">

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.

Création d'un article de blog sur WordPress via le tableau de bord

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é.

Ajouter des dimensions d'image manquantes sur WP Rocket

Réserver de l'espace pour les Embeds, les Iframes et les emplacements publicitaires

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.

Optimiser la diffusion des polices de caractères sur le Web

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 :

  • Flash of Unstyled Text (FOUT ) - Cela signifie qu'un visiteur voit d'abord le texte de votre site web dans une police standard qui change au moment où le fichier de police se charge, ce qui peut entraîner un déplacement de la mise en page.
  • Flash of Invisible Text (FOIT) - Ici, vous ne pouvez pas voir le texte au début. Il n'apparaît qu'avec le fichier de police web.

Vous pouvez éviter ces problèmes grâce aux stratégies suivantes :

  • Utiliser des formats de polices modernes - Comme les images, les polices sont disponibles dans des formats de fichiers plus ou moins grands. Les plus rapides à charger sont généralement WOFF ou WOFF2.
  • Définir une police de remplacement similaire - La mise en place d'une police de remplacement très similaire à la police actuelle permet de réduire les mouvements de page lors du changement de police. Vous pouvez utiliser Font Style Matcher pour trouver de bonnes combinaisons.
  • Précharger les polices - Donnez la priorité aux fichiers de polices web en les plaçant au début du document et en ajoutant rel=preload à l'appel. Le navigateur les chargera ainsi plus rapidement.

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.

Préchargement des polices

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.

Gérer le contenu dynamique

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éfinir au préalable leurs contenants et leur donner des dimensions fixes.
  • Reliez leur apparition à une interaction avec l'utilisateur. Vous éviterez ainsi une pénalité CLS.

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.

Travailler sur l'interaction avec la prochaine peinture

Enfin, voyons comment vous pouvez vous assurer que votre PNI est pertinent.

Optimiser JavaScript

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.

Optimiser vos tâches JavaScript

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.

Configurer les fichiers pour retarder le chargement en JavaScript

Réduire les feuilles de style CSS inutilisées

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.

Optimiser la diffusion des CSS grâce à WP Rocket

Ajouter le chargement paresseux

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.

Améliorez dès aujourd'hui la vitalité de votre site web multilingue !

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.

Icône de direction
Découvrez Weglot

Rejoignez plus de 110 000 marques qui traduisent déjà leurs sites avec Weglot

Traduisez votre site web instantanément grâce à l'IA, peaufinez le texte avec une révision humaine et mettez-le en ligne en quelques minutes.

Dans cet article, vous allez découvrir :
Icône fusée

Qu'attendez-vous pour vous lancer ?

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.

Autres articles qui pourraient vous intéresser

Icône FAQ

Questions fréquentes

Aucun élément trouvé.

Flèche bleue

Flèche bleue

Flèche bleue