Problèmes courants de Web Vitals dans WordPress et comment les résoudre

Vous avez du mal à réussir Core Web Vitals ?

Selon Google :

55,4 % de tous les sites Web disposant de données CrUX ne parviennent pas à atteindre le bon seuil pour les trois mesures : LCP, FID et CLS.

Cependant, réussir l’évaluation CWV n’est en aucun cas une mission impossible.

En fait, c'est un processus en 3 étapes :

• Exécuter des tests de performances
• Identifier les problèmes Core Web Vitals
• Optimisez-les

Et à la fin de la lecture de cet article, vous disposerez de toutes les connaissances nécessaires pour mener à bien chaque étape.

Alors lisez la suite !

Récapitulatif rapide des Core Web Vitals

Vous êtes peut-être tombé sur cette déclaration de Google :

Mais comme le dit le célèbre dicton : on ne peut pas améliorer ce que l’on ne mesure pas.

Ou du moins, c'était le cas pour la mesure de l'expérience utilisateur avant CWV.

En 2020, Google a introduit Core Web Vitals pour fournir aux propriétaires de sites Web un ensemble définitif de références qui ont un impact direct et signifient l'expérience utilisateur. Ils ont été annoncés dans le cadre d'une initiative plus large de Google visant à mettre l'accent sur les mesures centrées sur l'utilisateur dans l'évaluation de la santé globale du Web.

À la base (jeu de mots), les CWV sont un ensemble de mesures de performances qui mettent en lumière la qualité de l'expérience utilisateur sur une page Web. Ils englobent trois éléments principaux :

• Performances de chargement (LCP)
• Interactivité (FID)
• Stabilité visuelle (CLS)

LCP, ou Largest Contentful Paint, mesure les performances de chargement d’une page. Il évalue le temps nécessaire au chargement du contenu principal de la page. Un LCP optimal est considéré comme étant inférieur à 2,5 secondes.

Le FID, ou First Input Delay, évalue l’interactivité et la réactivité d’un site. Il mesure le temps écoulé entre le moment où un utilisateur interagit pour la première fois avec votre page (comme cliquer sur un bouton) et le moment où le navigateur commence à traiter cette interaction. Un bon score FID est inférieur à 100 millisecondes.

CLS, ou Cumulative Layout Shift, évalue la stabilité visuelle d'une page. Il examine les changements de disposition inattendus qui se produisent sans intervention de l'utilisateur. Un score CLS louable serait inférieur à 0,1.

Il existe également une quatrième mesure qui remplacera le FID en mars 2024 : l'interaction avec Next Paint (INP).

INP enregistre la latence de toutes les interactions tout au long du cycle de vie de la page. Ensuite, le délai le plus long de toutes les interactions est enregistré comme INP de la page.

La raison pour laquelle INP remplacera FID est quele premier introduit une manière plus complète d'évaluer la réactivité des pages , en mesurant toutes les interactions.En revanche, le FID ne prend en compte que le premier. Un bon score INP est inférieur à 200 millisecondes.

Bien que l'INP n'ait pas d'impact direct sur votre évaluation Core Web Vitals (pour l'instant), Google a déjà commencé à signaler les problèmes INP via la Search Console.

Apprenez les meilleures techniques pour optimiser votre score INP auprès de Google eux-mêmes. Inscrivez-vous à notre webinaire exclusif →

Passer les Core Web Vitals : le 75e centile

Lorsqu'il discute des métriques Core Web Vitals, Google fait souvent référence au 75e centile.

Cela signifie qu'un site doit viser des mesures de performances qui atteignent ou dépassent les seuils recommandés pour au moins 75 % de ses visites de pages.

C'est un moyen de garantir qu'une majorité des interactions des utilisateurs avec le site sont satisfaisantes plutôt que de se concentrer uniquement sur des valeurs moyennes ou médianes.

Outils pour identifier les problèmes essentiels du Web

Les deux premières étapes de votre parcours d'optimisation Core Web Vitals nécessitent que vous effectuiez des tests et identifiiez les coupables possibles.

Il existe plusieurs outils populaires que vous pouvez exploiter en cours de route :

1. Informations sur la vitesse de page

PageSpeed ​​Insights de Google propose des données CWV spécifiques à la page et à l'échelle de l'origine pour les 28 derniers jours. Il fournit également des conseils pratiques pour améliorer les performances.

C'est l'un des outils de performance les plus utilisés en raison de son UX/UI convivial. La page de rapport comprend votre évaluation Core Web Vitals basée sur les données de terrain et le score de performance basé sur les données de laboratoire.

Et en bas, vous disposez des widgets Opportunités et diagnostics, qui vous fournissent une liste de problèmes et les mesures respectives qu'ils affectent.

2. Console de recherche Google

Le rapport Core Web Vitals dans la Search Console inclut des données de performances pour les URL individuelles. Cela en fait une excellente option pour identifier les pages spécifiques qui doivent être améliorées. Contrairement à PageSpeed ​​Insights, les rapports de la Search Console incluent des données de performances historiques.

Ainsi, vous pouvez déterminer l’impact de vos optimisations et si vous avancez ou non dans la bonne direction.

Rapport sur l'expérience utilisateur Chrome (CrUX)

CrUX rassemble des données sur l'expérience utilisateur réelle provenant d'innombrables sites Web, offrant des informations clés sur les Core Web Vitals basées sur de véritables interactions utilisateur.

Vous pouvez exploiter l’ensemble de données CrUX de deux manières principales :

• L'API Chrome UX Report - idéale pour ceux qui connaissent JavaScript et JSON ;
• BigQuery - adapté à ceux qui possèdent un projet Google Cloud et des connaissances en SQL.

Bien que ces méthodes nécessitent plus d'efforts qu'une vérification rapide de PageSpeed ​​Insights ou GSC, elles présentent des options polyvalentes d'analyse et de visualisation des données. Par exemple, BigQuery permet la segmentation des données et l'intégration avec d'autres ensembles de données.

Consultez vos résultats CWV avant et après avec NitroPack. Testez votre site gratuitement →

Problèmes Web Vitals les plus courants dans WordPress

Les plus gros problèmes de Contentful Paint (LCP)

Comme vous le savez déjà, LCP évalue la durée nécessaire pour que l'élément de contenu principal, comme une image ou un bloc de texte, devienne visible sur une page Web.

Tout retard dans la récupération du document HTML initial à partir du serveur peut pousser la métrique LCP dans une fourchette défavorable.

Et voici les principaux coupables :

1. Temps de réponse lents du serveur en raison du budget d'hébergement

Les temps de réponse lents des serveurs, souvent observés dans les environnements d'hébergement mutualisé ou de serveurs surchargés, peuvent notamment influencer votre score LCP.

Lorsque les temps de réponse du serveur sont décalés, le chargement des éléments LCP emboîte le pas, créant un effet en cascade de rendu de contenu retardé.

De plus, une caractéristique clé de WordPress est sa nature dynamique, nécessitant souvent que le contenu soit récupéré à partir d’une base de données. Dans les scénarios où cette base de données est hébergée sur un serveur lent, la récupération et l'affichage du contenu peuvent être impactés, affectant encore davantage le temps de chargement de l'élément le plus important de votre page.

Enfin, s'appuyer sur un hébergement budgétaire peut affecter négativement votre délai d'obtention du premier octet. TTFB mesure l'intervalle pendant lequel le premier octet d'informations est envoyé du serveur au navigateur de l'utilisateur. Un TTFB prolongé est souvent le précurseur d’un LCP retardé.

Et comme les ressources telles que le processeur et la RAM sont réparties entre plusieurs sites Web sur un hébergement partagé, votre site WordPress risque de ne pas toujours disposer des ressources dont il a besoin pour un chargement efficace.

2. JavaScript et CSS bloquant le rendu introduits par certains thèmes et plugins

Les ressources bloquant le rendu sont les scripts et les feuilles de style qui agissent comme des barrages routiers, empêchant le rendu d'une page Web jusqu'à ce qu'elle soit entièrement traitée.

Lorsqu'un thème ou un plugin WordPress introduit des éléments qui obstruent le rendu, cela retarde intrinsèquement la visibilité du contenu principal, ce qui conduit les sites Web à échouer dans leur évaluation LCP.

Ainsi, lorsqu’il s’agit de votre site WordPress, moins c’est plus.

En d’autres termes, trouver le bon équilibre entre les fonctionnalités et la vitesse d’un site est essentiel pour atteindre ces fondamentaux verts du Web.

3. Images non optimisées

Selon le Web Almanac :

Les images haute résolution possèdent des tailles de fichiers importantes. Sans optimisation, ces fichiers volumineux nécessitent plus de bande passante, prolongeant ainsi leurs temps de téléchargement et de rendu.

De plus, les images non optimisées peuvent présenter des problèmes de rendu. Lorsque les navigateurs rencontrent des formats d'image qui ne sont pas pris en charge nativement ou nécessitent un traitement supplémentaire, le décodage ultérieur peut augmenter le temps de rendu global.

Problèmes de décalage de mise en page cumulatif (CLS)

Un mauvais score CLS indique que des éléments de la page se déplacent de manière inattendue au cours de la durée de vie d'une page, ce qui peut entraîner une expérience utilisateur frustrante, des clics furieux et des taux de rebond plus élevés.

Voici les éléments qui font monter et descendre le contenu de votre page :

1. Images insérées sans dimension définie

Un détail souvent négligé dans le développement Web est la spécification des dimensions de l’image.

Définir les attributsde largeur et de hauteurdes images n'est pas seulement une question de précision esthétique ; c'est une mesure pratique pour maintenir la stabilité de la mise en page.

Sans ces attributs, un navigateur n'a pas la prévoyance nécessaire pour allouer l'espace nécessaire à l'image lors du rendu initial. Cela peut sembler sans conséquence jusqu'à ce que l'image soit complètement chargée.

À ce stade, si ses dimensions réelles sont plus grandes que l’espace par défaut ou supposé, l’image écarte ou déplace le contenu à proximité, entraînant des changements de disposition brusques et perturbateurs.

2. Emplacements d'annonces sans espace réservé

Incorporez-vous des éléments dynamiques comme des publicités, des vidéos ou d’autres contenus intégrés ?

Il faut savoir que cette intégration comporte son lot de défis.

L’imprévisibilité des dimensions du contenu est un facteur important. Si vous ne réservez pas de manière proactive de l'espace pour ces éléments, la page s'affichera sans tenir compte de l'espace qu'ils occuperaient.

Cela devient problématique lorsque ces éléments, notamment les publicités dynamiques, se chargent. Si leur taille réelle dépasse l'espace non alloué ou par défaut, ils empiètent sur d'autres contenus, provoquant leur déplacement.

3. Livraison de polices non optimisée

Dans la recherche de la cohérence de l’image de marque et d’un design captivant, les polices personnalisées sont devenues un incontournable de la conception Web.

Mais ils introduisent des défis, à savoir FOIT (Flash of Invisible Text) et FOUT (Flash of Unstyled Text).

Avec les polices personnalisées, en particulier les plus lourdes ou celles récupérées à partir de sources externes, il existe un intervalle de temps avant qu'elles ne soient complètement chargées et affichées. Pendant cet intervalle, une page peut afficher FOIT, où le texte reste invisible, ou FOUT, où une police système de secours est remplie.

Lorsque la police personnalisée chargée diffère considérablement de son homologue de secours, la disposition du texte est remaniée. Ce changement soudain peut être à la fois désorientant et frustrant pour les utilisateurs absorbés par la lecture ou l’interaction avec des éléments de texte.

Problèmes de délai de première entrée (FID)

Un thread principal bloqué est l’un des principaux responsables des mauvais scores FID. Lorsqu'un travail important est en attente sur le thread principal, les interactions des utilisateurs doivent faire la queue, ce qui entraîne des retards perceptibles.

Et voici les ressources qui bloquent le plus souvent le thread principal :

1. Exécution lourde de JavaScript

Une exécution lourde de JavaScript peut affecter considérablement le FID sur les sites Web, principalement en raison de la nature monothread de JavaScript.

Lorsqu'un navigateur traite du JavaScript étendu, il monopolise le thread principal, qui est responsable de diverses tâches critiques, notamment la gestion des entrées utilisateur. Par conséquent, si un utilisateur interagit avec une page lors de cette exécution lourde, la réponse est retardée.

2. Mauvaise priorisation des ressources

Toutes les ressources chargées sur un site Web n'ont pas la même importance pour le rendu initial ou les interactions utilisateur.

Si les ressources non essentielles sont prioritaires par rapport aux ressources cruciales, ou s'il n'y a pas de hiérarchisation appropriée, le fil principal peut être occupé par des tâches qui ralentissent la réactivité de la page.

En d'autres termes, une hiérarchisation efficace des ressources garantit que le navigateur reste réactif aux utilisateurs en se concentrant d'abord sur ce qui est essentiel, en optimisant l'expérience de l'utilisateur et en maintenant les scores FID à un niveau bas.

3. Exécution d'une quantité excessive de scripts tiers

Les plugins tiers peuvent avoir un impact significatif sur la réactivité de vos pages Web. Ces plugins, qui se présentent souvent sous la forme de scripts, d'outils d'analyse, de réseaux publicitaires ou de widgets divers, peuvent introduire des tâches de traitement supplémentaires.

De plus, de nombreux plugins tiers, tels que l'analyse, la gestion des publicités et les formulaires, ne sont pas optimisés pour les performances, ce qui signifie qu'ils peuvent ne pas adhérer aux meilleures pratiques en matière d'exécution de scripts non bloquantes ou de chargement efficace des ressources. Certains peuvent même provoquer une exécution importante de JavaScript ou être accompagnés de charges utiles volumineuses.

De plus, gardez à l’esprit que les scripts tiers reposent souvent sur des serveurs externes. Tout retard dans les temps de réponse de leur serveur peut également introduire de la latence.

Problèmes d’interaction avec Next Paint (INP)

Étant donné que l'INP remplacera le FID l'année prochaine, il n'est pas surprenant que les éléments qui ont un impact négatif sur la mesure de réactivité actuelle affecteront également la prochaine.

En d’autres termes, bloquer votre thread principal avec des tâches longues en raison de l’exécution de fichiers JavaScript non optimisés entraînera également un mauvais score INP.

Mais il y a encore une chose :

1. Avoir une grande taille de DOM

Le modèle objet de document (DOM) est l'épine dorsale de chaque page Web, présentant un document HTML sous la forme d'une arborescence structurée. Chaque branche de cet arbre se termine par un nœud qui abrite divers objets. Ces nœuds peuvent représenter différents segments du document, comme des éléments, du contenu textuel ou des commentaires.

Bien que le DOM soit fondamental pour le fonctionnement d'une page Web, sa taille peut entraîner des problèmes de réactivité car :

Plus le DOM est grand, plus la demande d'un navigateur pour afficher une page rapidement et efficacement est grande.

En termes plus simples :

Pour une réactivité rapide aux actions des utilisateurs, il est crucial de rationaliser votre DOM aux seuls éléments essentiels.

Vous pourriez réfléchir à la définition de « essentiel ». Selon les critères de Lighthouse, la taille d'un DOM est considérée comme lourde si elle dépasse1 400 nœuds.

Rejoignez les 45 % de sites Web qui réussissent leurs Core Web Vitals. Installez NitroPack aujourd'hui →

Comment résoudre les problèmes de base du Web Vitals dans WordPress (liste de contrôle)

Optimisation du LCP

LCP est la métrique avec laquelle les propriétaires de sites Web ont le plus de difficultés. C'est pourquoi vous devez appliquer plusieurs optimisations :

• Mettez à niveau votre hébergement : envisagez de vous éloigner de l'hébergement mutualisé.Bien que rentable, cette solution peut être plus lente que les options plus coûteuses (solutions d'hébergement dédiées ou cloud). Les options d'hébergement premium ont tendance à offrir des temps de réponse plus rapides.
  
• Utilisez unréseau de diffusion de contenu (CDN): les CDN stockent les versions mises en cache de votre site sur plusieurs serveurs situés dans le monde. Cela garantit que les utilisateurs reçoivent les données du serveur le plus proche, réduisant ainsi le temps nécessaire à la récupération des données.
  
• Optimiser les bases de données : cela inclut la suppression des données obsolètes, l'optimisation des requêtes et l'utilisation efficace des index. Pour les sites Web avec WordPress, des plugins comme WP-Optimize peuvent aider à la maintenance de la base de données.
  
• Choisissez le bon format d'image : Sélectionnez le format le plus efficace pour vos images. Alors que JPEG est idéal pour les photographies, PNG est meilleur pour les images transparentes. Les formats modernes comme WebP peuvent offrir des visuels de haute qualité avec des fichiers de plus petite taille.
  
• Appliquer la compression : utilisez la compression avec perte pour réduire la taille des fichiers sans dégradation visuelle significative. Utilisez la compression sans perte pour préserver chaque détail des images où la qualité est primordiale.
  
• Redimensionner les images : fournissez des images adaptées à l'appareil et à la fenêtre d'affichage. Évitez d'utiliser des images volumineuses qui sont ensuite redimensionnées avec CSS ou dans le navigateur. Générez différentes tailles d'image pour différentes résolutions d'écran et diffusez-les à l'aide de l'attribut "srcset". Ou essayez un plugin comme NitroPack, qui redimensionne automatiquement vos images.
  
• Réduisez les fichiers JS et CSS : réduisez la taille de vos scripts et feuilles de style en supprimant les caractères, les espaces et le code inutiles. Des outils comme Terser (pour JS) et CSSNano (pour CSS) peuvent vous aider.
  
• Utiliser defer ou async : utilisez l'attribut defer pour les scripts qui ne sont pas requis pour le rendu initial de la page. Cela garantit que les fichiers JS sont exécutés dans l'ordre après l'analyse du code HTML. Utilisez l'attribut async pour les scripts qui ne reposent pas sur d'autres scripts et ne sont pas critiques pour le rendu initial. Cela permet au navigateur de continuer à analyser la page pendant le téléchargement du script.
  
• CSS critiqueen ligne :identifiez le CSS minimum nécessaire pour le rendu initial de la page et intégrez-le directement dans le HTML. Cela garantit que les styles essentiels pour le contenu au-dessus de la ligne de flottaison sont disponibles immédiatement.
  

Améliorer le FID

Pour garantir une réactivité fluide et rapide des pages, mettez en œuvre les optimisations suivantes :

• Utiliser Web Workers : déchargez des calculs complexes vers Web Workers. Ils exécutent JavaScript en arrière-plan sur un thread distinct, garantissant que le thread principal reste réactif.
  
• Prioriser les JS critiques : donnez la priorité au chargement et à l'exécution du code JS le plus essentiel en premier. Utilisez rel="preload" pour informer le navigateur des scripts hautement prioritaires.
  
• Réduire les CSS inutilisés : alors que JavaScript est généralement le principal méchant, CSS bloque également le thread principal. En réduisant les CSS inutilisés, vous réduisez le nombre total d'octets à télécharger. Plus important encore, vous garantissez que les navigateurs peuvent commencer à afficher la page plus rapidement, car ils ont moins d'opérations à effectuer.
  
• Divisez les tâches longues : divisez les tâches longues en morceaux plus petits et asynchrones à l'aide de techniques telles que requestIdleCallback(). Cela garantit que le fil de discussion principal reste libre pour les entrées de l'utilisateur plus souvent.
  
• Optimiser les écouteurs d'événements : si vous disposez de nombreux écouteurs d'événements sur plusieurs éléments, envisagez la délégation d'événements. Cette méthode associe un seul écouteur d'événement à un parent commun, réduisant ainsi le nombre d'écouteurs et améliorant les performances.
  

Réduire le CLS

Pour éliminer la possibilité que les utilisateurs subissent des changements inattendus, assurez-vous de :

• Définissez les dimensions des images, des publicités et des intégrations : incluez toujours les attributs de largeur et de hauteur pour vos images. Cela aide le navigateur à allouer la quantité correcte d'espace pour l'image avant son chargement.
  
• Utilisez font-display: facultatif : L'utilisation de font-display: facultatif en combinaison avec le lien rel=preload pour vos polices les plus essentielles est considérée comme la meilleure stratégie globale de polices pour un bon CLS. La valeur facultative ne provoquera pas de nouvelle mise en page lorsque la police Web sera prête. Dans le même temps, la police préchargée correspondra probablement à la première peinture, garantissant ainsi qu'aucun changement de mise en page ne se produise.
  
• Réservez de l'espace pour le contenu dynamique : allouez toujours au préalable un espace approprié pour le contenu chargé dynamiquement, tel que les publicités ou les iframes. Cela empêchera le contenu de déplacer d’autres éléments lors de son chargement.
  

Réussir l'INP

Toutes les techniques d'optimisation mentionnées dans la section FID amélioreront inévitablement votre score INP. En plus de cela, vous devez mettre en œuvre les éléments suivants :

• Réduisez la taille du DOM : pour réduire la profondeur du DOM de votre site, évitez les plugins et les thèmes mal codés, ne masquez pas les éléments indésirables à l'aide de display:none, éloignez-vous des constructeurs de pages qui surchargent votre code et minimisez les nœuds DOM basés sur JavaScript.
  
• Évitez les minuteries récurrentes : setTimeout et setInterval sont des fonctions de minuterie JavaScript couramment utilisées qui peuvent contribuer au retard d'entrée. Si vous contrôlez les minuteries de votre code, évaluez leur nécessité et réduisez leur charge de travail autant que possible.

Conclure

Parcourir la longue liste d’optimisations pourrait être si écrasant que cela pourrait faire penser :

Dois-je vraiment réussir l’évaluation Core Web Vitals ? Sont-ils si percutants ?

Et la vérité est que ce n’est pas une question de mesures elles-mêmes.

Oui, faire un test PSI et voir tout en vert est toujours agréable. Et oui, ils font partie des facteurs de classement de Google, de sorte que vous pourriez constater une amélioration de votre position SERP.

Mais la valeur réelle vient du fait que la réussite de votre CWV se traduit directement par une expérience utilisateur de premier ordre.

Et cela conduit à des résultats concrets tels que :

• Taux de conversion accrus
• Diminuer les taux de rebond
• Avoir un site Web que les utilisateurs aiment visiter

Donc, pour en revenir aux questions, nous dirions que réussir vos Core Web Vitals est crucial.

Mais nous sommes également d’accord sur le fait qu’il n’est pas facile de gérer toutes les optimisations.

C'est pourquoi nous avons créé NitroPack.

NitroPack est une solution légère de performances Web qui alimenteplus de 180 000 sites Web dans le monde , leur permettant d'atteindre d'excellents Core Web Vitals, des scores de performances et une expérience utilisateur excellente.

Grâce à ses plus de 35 fonctionnalités intégrées d'optimisation de la vitesse des pages , NitroPack est le leader de l'optimisation Core Web Vitals :

Et le meilleur, c'est que vous pouvez configurer NitroPack en 3 minutes. Aucune compétence technique ou codage requis. Installez simplement le plugin, connectez-le à votre site Web et voyez vos problèmes de performances être résolus.

Testez NitroPack GRATUITEMENT →