Comment améliorer les Core Web Virtuals sur les sites WordPress ?

Pourquoi la vitesse est-elle importante dans le marketing numérique ? Les utilisateurs qui connaissent des temps de rendu plus rapides sont plus susceptibles de rester sur la page et de naviguer. Ceci, à son tour, peut avoir un impact positif sur votre classement SERP global. De plus, le temps nécessaire à une page Web pour afficher la première zone d'affichage devient de plus en plus intéressant pour les moteurs de recherche. En fait, près de la moitié de tous les facteurs de classement de Google sont directement liés à l'amélioration de l'expérience utilisateur. Les moteurs de recherche sont connus pour mettre l'accent sur certains facteurs de classement, y compris plusieurs aspects du chargement, connus sous le nom de core web vitals (CWV). En plus d'avoir un impact direct sur les classements, l'expérience de votre page est également susceptible d'influencer l'engagement des utilisateurs lors de la navigation sur votre contenu et la probabilité qu'ils y reviennent.

Trois composants de Core Web Vitals

Les algorithmes de Google changent continuellement pour promouvoir des sites conviviaux de haute qualité et rétrograder ceux qui ne répondent pas à leurs normes de qualité. Une partie de ces algorithmes est constituée des éléments vitaux du Web, qui jouent un rôle important dans le déploiement récent d'un large éventail de mises à jour. L'objectif de Google avec CWV est d'encourager les développeurs à se concentrer davantage sur l'expérience utilisateur lors de l'optimisation des performances de leur site.

La plus grande peinture de contenu, le premier délai d'entrée, le changement de mise en page cumulé - ce sont les trois composants des éléments vitaux du Web.

• La plus grande peinture de contenu - La plus grande peinture de contenu (LCP) est un critère important car la perception visuelle d'un site Web est fortement affectée par la vitesse de chargement du plus grand élément de l'écran. Le temps entre le chargement du contenu DOM et le moment où l'utilisateur voit quelque chose sur son écran - une grande image ou un bloc de texte - est le CPL ou latence de peinture de contenu. Il s'agit essentiellement du temps qui s'écoule entre le clic d'un utilisateur (par exemple, pour charger une page) et le moment où il voit une sorte de contenu. Si votre peinture de contenu prend plus de 4 secondes, cela pourrait affecter négativement votre score SEO.
• Premier délai d'entrée - Le premier délai d'entrée est le temps pendant lequel une page répond à votre entrée après avoir cliqué sur quelque chose. Le FID est généralement mesuré en millisecondes (ms). Par exemple, lorsqu'un utilisateur clique sur un élément du site et attend que l'écran se mette à jour avec de nouvelles informations, le navigateur traite cette action et fournit un résultat. Plus le FID est court, plus les utilisateurs peuvent commencer à naviguer rapidement sur votre page, où vous pouvez les conserver plus longtemps et augmenter vos conversions. Google a précisé qu'il tolérerait un premier délai d'entrée de 100 ms pour un excellent score et de 300 ms pour un mauvais score.
• Décalage cumulatif de la mise en page — Avez-vous déjà fait défiler une page vers le bas et avez-vous soudainement remarqué qu'une grande partie de la page se déplaçait vers le haut pendant que vous faisiez défiler ? Le décalage de mise en page cumulé (CLS) se produit lorsque le contenu se déplace sur la page après avoir été peint. Le résultat est que votre utilisateur doit comprendre et analyser le contenu de votre page, surtout s'il y a beaucoup de texte. Un score de décalage de mise en page cumulatif suffisant est inférieur à 0,1 et un score médiocre inférieur à 0,25.

Comment mesurer les Core Web Vitals sur les sites WordPress ?

Pour optimiser vos principaux éléments vitaux Web pour les sites Web WordPress et vous assurer que votre site Web fonctionne à un niveau d'efficacité maximal, il est essentiel de disposer de tous les outils nécessaires pour surveiller, suivre et analyser les points de données importants.

Console de recherche Google

Après avoir mesuré les données utilisateur réelles, la Search Console génère des rapports CWV avec le nombre de pages où les problèmes ont été trouvés séparément pour les versions de bureau et mobile du site Web. Il couvre les performances de l'URL en fonction de son statut (médiocre, besoin d'amélioration, bon), des éléments vitaux Web de base (CLS, FID, LCP) et des groupes de pages similaires. Il est également important de noter que si une URL ne contient pas suffisamment de données de rapport pour une métrique particulière, elle ne sera pas incluse dans le rapport.

Informations sur la vitesse de la page

Dans le même temps, PageSpeed ​​Insights vous permet de visualiser votre site du point de vue des robots d'exploration et des utilisateurs de Google, en fournissant une analyse des problèmes de votre page et en proposant des suggestions pour améliorer les performances. Le rapport vous permet de mieux comprendre quelles ressources contribuent à l'augmentation des temps de chargement. Vous obtiendrez également un rapport qui fournit des informations clés sur la page et vous permet de savoir comment apporter les modifications nécessaires.

Classement SE

Outre les outils mentionnés ci-dessus, Website Audit by SE Ranking propose également une section de base Web Vitals séparément pour les versions de bureau et mobiles. Cet outil peut être encore plus informatif pour les spécialistes du référencement, car il détecte les éventuels problèmes techniques de votre site Web. Sur la base des résultats de l'audit, l'outil fournit le score de santé global du site Web et une liste des problèmes ayant un impact sur ses performances avec des descriptions détaillées et des conseils sur la façon de les résoudre.

Les problèmes les plus courants de Web Vitals et comment les résoudre

1- Le serveur est trop lent

Il est important de se rappeler que tous les sites Web WordPress ne sont pas créés égaux. Cela peut entraîner des performances plus lentes de certains sites Web que d'autres avec des configurations identiques. La raison en est que de nombreux facteurs peuvent affecter la vitesse du serveur : le nombre de plugins que vous avez installés, la quantité de scripts et de CSS, l'emplacement du serveur, etc.

Cependant, il existe des hébergements optimisés spécifiquement pour les sites Web WordPress. Ils ont généralement une vitesse de chargement plus rapide grâce au logiciel de mise en cache et peuvent gérer de nombreux visiteurs. Un tel hébergement peut gérer de nombreux problèmes techniques et dispose de nombreux plugins préinstallés. Ainsi, vous pouvez simplement créer un ou plusieurs sites Web et laisser l'hébergement WP faire tout le travail technique pour vous.

2- Grandes images et vidéos

Lorsque vous travaillez sur un site Web et qu'il est temps d'exécuter un test de base Web Vitals, vous rencontrerez probablement des problèmes liés aux images et aux vidéos. La cause sous-jacente de la vitesse lente des pages est que les images et les vidéos pèsent trop lourd. La question séculaire du cliché de «combien de mégaoctets est trop» est certainement apparue récemment dans le monde des éléments vitaux du Web. Plus précisément, la question de savoir comment optimiser l'utilisation d'images, de vidéos et d'autres fichiers volumineux sur votre site s'est posée.

La règle d'or est d'avoir une image principale et une taille de vidéo, puis d'inclure les attributs de largeur et de hauteur dans vos images et éléments vidéo. Il est souvent préférable de personnaliser vos images à une largeur spécifique avant de les télécharger et de créer un nouvel élément d'image qui coupe des zones spécifiques comme les arrière-plans, le texte inutile, etc. Il existe de nombreuses applications gratuites d'édition d'images en ligne qui vous permettent de recadrer et de redimensionner les photos. . Le problème avec l'affichage d'images plus grandes est la plus grande taille de téléchargement et la bande passante nécessaire pour les afficher.

Il en va de même pour les vidéos - la pré-personnalisation de la vidéo peut améliorer considérablement la vitesse de la page car aucun rétrécissement ne sera nécessaire par le navigateur - la vidéo peut être lue dans des dimensions de taille normale. De plus, comme les vidéos natives sont lourdes, vous pouvez les remplacer par des intégrations Youtube, ce qui accélère un peu le site.

L'utilisation du chargement différé est un autre excellent moyen d'améliorer la vitesse des pages sans compromettre l'expérience utilisateur. Le chargement différé est une technique de chargement des images uniquement lorsqu'elles entrent dans la fenêtre d'affichage (ou la section d'écran). Cette approche entraîne le chargement progressif des images au fur et à mesure que vous faites défiler, ce qui augmente la vitesse de la page. La meilleure partie? Il est élémentaire de mettre en œuvre à l'aide de plugins de chargement paresseux WordPress comme Lazy Load. Cela améliorera considérablement l'expérience utilisateur. Les utilisateurs n'ont pas à attendre que la page se charge. Après quelques défilements, les images se chargeront d'elles-mêmes.

3- Code non optimisé

Un code non optimisé peut nuire à votre score de base Web Vitals comme First Contentful Paint et à votre expérience utilisateur. Le plus grand coupable ici est principalement JavaScript. Parce qu'il doit être téléchargé et exécuté après le chargement de la page. (JavaScript vient avant HTML, qui bloque le chargement de la page). Cela peut facilement conduire à un écran figé pendant plusieurs secondes, surtout si la connexion de l'utilisateur n'est pas rapide. Par conséquent, si JavaScript n'est pas optimisé, vous risquez de faire perdre des points de performance à votre site. Pour vous assurer que le chargement de la page n'est pas bloqué tant que le JavaScript n'a pas été chargé, vous pouvez utiliser des balises asynchrones et différées. De plus, supprimer les éléments inutiles de vos fichiers de code est une bonne pratique.

La minification du code supprime les commentaires, les espaces et les sauts de ligne inutiles du code. Cela peut vous aider à réduire la taille de votre fichier, ce qui se traduit par des temps de téléchargement plus rapides dans les navigateurs de vos visiteurs. Il y a deux raisons de le faire. Tout d'abord, cela accélère le téléchargement pour vos visiteurs. Deuxièmement, cela le rend plus petit, donc il utilise moins de ressources serveur. Certains fichiers que vous pouvez facilement minifier incluent les fichiers <style> et <script>. Vous pouvez vous tester en comparant un fichier avant et après optimisation. Les résultats peuvent ne pas être très visibles pour les feuilles de style ou les fichiers JavaScript. En effet, les outils de compression CSS et JS, tels que YUI Compressor, Minify, etc. optimisent bien mieux ces types de fichiers que les plugins de minification.

Le DOM (Document Object Model) est la hiérarchie de tous les éléments d'un document. Le DOM est composé de balises HTML, auxquelles sont associés des styles CSS et JavaScript. Comme le nombre d'éléments peut être assez élevé, la taille de votre page sera importante. Cela peut entraîner des problèmes de performances si vous diffusez la page sur des appareils mobiles. Par conséquent, il est important de minimiser le nombre d'éléments et d'optimiser leur placement dans votre document.

4- Changements de mise en page

Un changement de mise en page est un phénomène qui se produit lorsque la fenêtre du navigateur de votre visiteur est redimensionnée. Et les éléments de votre site Web, tels que les images, les polices et les couleurs, se détendent ou changent de position. Cela rend difficile pour les lecteurs de se concentrer sur ce que vous essayez de présenter. Le score de changement de mise en page est un score qui suit à quel point votre site est affecté par les changements de mise en page sur tous les appareils. C'est un gros problème quand on parle de fenêtres. Parce que si vos conceptions changent trop, vous risquez de perdre des visiteurs et des conversions. Minimiser les changements de mise en page et les optimiser autant que possible entraînera moins de désabonnement et, en fin de compte, plus de pages vues.

De plus, des changements de mise en page importants peuvent affecter négativement vos efforts de référencement. Cependant, concevoir une grande mise en page peut être difficile à maintenir. En effet, à moins que vous n'ayez spécifiquement conçu le site avec un design réactif. Ainsi, la mise en page doit être ajustée pour s'adapter à tous les appareils. Devoir le faire régulièrement peut prendre du temps. Il faut de la persévérance et de la cohérence pour réussir sans compromettre la qualité ou la fonctionnalité. C'est pourquoi la meilleure solution est de rendre la conception de votre site Web réactive. Les écrans réactifs se redimensionnent en fonction de la taille de l'écran sur lequel ils sont affichés. La mise en œuvre d'écrans réactifs signifie que votre site Web s'adaptera sans ralentir ni planter.

5- Problème de mise en cache

Différentes stratégies de mise en cache sont utilisées pour différentes ressources lors de la création d'une ressource Web. Les politiques de mise en cache définissent comment chaque ressource sera mise en cache et fournissent des informations sur la durée pendant laquelle les ressources doivent être mises en cache. Vous devez configurer ces politiques. Ainsi, les ressources Web peuvent être réutilisées sans avoir à les créer à partir de zéro chaque fois que les utilisateurs y accèdent. Pour améliorer les performances, il est important de s'assurer que vos serveurs ne perdent pas de temps à créer des ressources qui ont déjà été créées. Avec l'aide de la technologie de script côté serveur, vous pouvez tirer parti de cette politique. Assurez-vous que les ressources vitales ne sont jamais recréées à moins que quelque chose n'ait changé en elles.

L'échange signé (SXG) est une nouvelle initiative qui permet de préextraire du contenu sur le Web tout en préservant la confidentialité. Un échange signé contient une spécification pour quelles ressources un site Web souhaite préextraire. Assurez-vous également que ces ressources sont récupérées en toute sécurité (sans révéler d'informations privées). Le format binaire d'échange signé est un format de transfert d'actifs. Cela signifie que le contenu sera transféré via HTTPS avec un en-tête supplémentaire attaché. Il s'agit d'une nouvelle façon passionnante d'activer la recherche Google pour améliorer les performances de chargement des pages. Surtout sur les pages AMP ou tout autre type de page qui s'appuie sur des ressources externes.

Conclusion

Les Core Web Vitals sont trois mesures développées par Google qui évaluent l'expérience d'un utilisateur lors du chargement d'une page Web. Les trois éléments essentiels du Web sont essentiels pour comprendre la vitesse de chargement d'une page. La réactivité du navigateur aux entrées des utilisateurs et l'instabilité du contenu lors de son chargement dans le navigateur. Les temps de chargement lents affectent le fait que les visiteurs restent ou non sur votre site. Ils pourraient partir complètement ou passer moins de temps à interagir avec votre contenu sur le site.