Une expérience utilisateur (UX) améliorée peut transformer votre visiteur en acheteur potentiel. Que vous souhaitiez améliorer l’expérience utilisateur de la navigation sur votre site, réduire le taux de rebond o augmenter les conversions, il premier facteur commun que vous devez prendre en compte est une expérience utilisateur repensée du point de vue du système d’information.
L’UX (user experience) a toujours été importante dans le marketing en ligne, mais les indicateurs Web de base de Google sont maintenant online, à quoi s’attendre. En mode avancé Web, il est essentiel que votre blog WordPress soit fait pour tous les navigateurs populaires, pas seulement les navigateurs standard. Cela signifie que vous allez probablement devoir faire quelques petits changements mineurs sur votre site.
Les Core Web Vitals de Google vous permettent d’évaluer et améliorer l’expérience utilisateur de votre site, ainsi que la rapidité de chargement. Il est donc important d’être sûr que vos pages passent le test Vitals chaque mois afin de maintenir la première page de résultats de Google pour les vitaux importants pour votre site Web.
Vous êtes en train d’apprendre comment améliorer les vitales web de Google Core de votre site WordPress. Nous avons créé ce guide pour vous aider peut que vous soyez un débutant ou un expert.
Vous n’utilisez pas obligatoirement Google Analytics et Google Search Console pour vos mesures de web, mais ces deux outils sont importants pour les Core Web Vitals. Les Core Web Vitals sont tout ce que Google utilise pour déterminer la bonne santé ou la mauvaise santé d’un site Web.
Qu’est-ce que Google Core Web Vital?
Les vitales Web de base sont des indicateurs importants qui montrent le bon fonctionnement de votre site Web. C’est-à-dire que Google cherche à voir si vous êtes capable d’analyser les erreurs, d’accomplir une opération sécurisée pour votre site et d’assurer un bon fonctionnement au niveau web apparemment. Si vous n’êtes pas capable de vous associer avec ces caractéristiques, votre site peut être difficilement classé.
Ces mesures clés peuvent être utilisées pour évaluer dans quelle mesure votre site Web offre une excellente expérience utilisateur, en mettant l’accent sur la vitesse de chargement. Notre outil de QI vous aidera à améliorer les Core Web Vitals de Google et optimiser en conséquence votre taux de clics de résultat.
Les indicateurs Web de base de Google comprennent les informations de vitales de votre site, le taux de rebond et la page vue. Autant que les autres facteurs, des indicateurs Web basiques peuvent aider vos pages à apparaître plus souvent dans les résultats de recherche web.
Il s’agit de:
- Le plus grand tableau de contenu (LCP)
- Délai de première entrée (FID)
- Déplacement cumulatif de la mise en page (CLS)
Les entrées de CORE sont des termes de recherche utilisés par les gens qui cherchent un site WordPress en anglais sur Google. Plus votre site apparaît pour ces mots, plus il vous apparaîtra pour d’autres utilisateurs qui cherchent les mêmes réponses que ceux-ci.
Largest Contentful Paint
La LCP délimite la partie de votre site Web qui est visible au premier élément à être affiché dès le chargement complet du site. Cela peut paraître trivial, mais il ne l’est pas. Les études ont prouvé ce que nous savons tous: les utilisateurs lisent les premiers paragraphes des pages Web pour savoir à quoi s’attendre. Les cinq premières secondes du chargement du site Web sont critiques.
La vitesse d’affichage peut être très importante sur un site web ayant de nombreux éléments. En effet, les utilisateurs occupés doivent pouvoir accéder aux informations rapidement et avec fluidité.
Le LCP est utilisé pour évaluer la vitesse de chargement du point de vue de l’utilisateur. Bien que votre site Web puisse se charger rapidement en général, si le plus gros élément de contenu met un certain temps à devenir visible, un utilisateur peut tout de même percevoir le site comme étant lent. Nous verrons dans cet article comment vous pouvez améliorer les vitales web du point de vue du client pour votre site WordPress par rapport aux performances réseau, à la gestion des ressources et au code source.
Idéalement, l’élément le plus important de votre site Web devrait se charger en 2,5 secondes.
Délai de première entrée
Google affirme que le temps de délai de première entrée n’a aucun impact direct sur votre classement Core. Pourtant, il peut vous donner un coup de pouce puissant pour améliorer le pourcentage d’utilisateurs qui restent sur votre site et effectuent des actions qui engendrent des revenus (tels que les conversions).
La réduction de ces délais est exceptionnellement critique pour les moteurs de recherche comme Google. Il est mieux pour votre visibilité dans les résultats des moteurs de recherche si votre site Web répond vite aux requêtes des utilisateurs que si vous augmentez le nombre de pages indexées.
Au mieux, ce délai devrait être de 100 millisecondes ou moins. S’il dure plus de 300 millisecondes, le DIF est médiocre et doit être considérablement amélioré.
Décalage cumulatif de la mise en page
Le décalage cumulatif de la mise en page (CLS) est une mesure de la stabilité visuelle. Divers éléments sont ajoutés à la page Web. Ces changements peuvent être déconcertants pour les utilisateurs, engendrant des erreurs de surf.
Pour que votre site web fonctionne de manière optimale, vous devriez rappeler les points suivants. Le placement approprié des fenêtres sur une page les unes par rapport aux autres. La disposition initiale correcte des interfaces aux utilisateurs rend votre public plus facile à utiliser.
CLS est calculé en multipliant la portion d’espace déplacée par la distance parcourue par l’élément déplacé. Idéalement, les scores CLS devraient être inférieurs à 0,1, et vous devriez commencer à vous inquiéter s’ils dépassent 0,25.
Pourquoi les vitales du Web sont-elles importantes?
Depuis juillet 2021, Google utilise les Core Web Vitals comme facteur de classement dans le cadre de sa nouvelle mise à jour de l’algorithme Page Experience.
Les Web Vitals d’un site ont une influence directe sur les résultats des SERP. Nous avons donc mis à jour notre plugin Google Core afin de simplifier la reconnaissance de ces derniers.
En incluant ces signaux liés à l’expérience utilisateur dans les facteurs de classement des recherches, Google encourage une meilleure qualité des résultats de recherche, qui donne la priorité aux utilisateurs finaux.
Malgré l’importance de ces signaux pour le succès d’un site, de nombreux sites Web ne sont pas optimisés pour les Core Web Vitals.
Par exemple, une étude menée par Searchmetrics a révélé que pas moins de 96 % des deux millions de sites Web les plus visités n’ont pas réussi les tests Core Web Vitals.
Bien que cette statistique soit choquante, elle signifie également qu’il est possible de prendre une longueur d’avance dans le jeu du référencement en optimisant simplement votre site Web pour Google Core Web Vitals.
Comment vérifier l’indice Google Core Web Vitals de votre site Web?
Les vitales du Web sont aussi faciles à mesurer qu’à comprendre, et il existe plusieurs outils qui permettent de les mesurer.
Voici deux des meilleurs outils expliqués :
1. PageSpeed Insights
Page Speed Insights est l’un des outils les plus simples que vous pouvez utiliser pour évaluer les vitales web de votre site. Il vous suffit de coller l’URL de votre site Web et de cliquer sur “Analyser”.
Après avoir cliqué sur le bouton “Analyser”, les vitales de votre site Web s’affichent dans la section “Données du champ”.
Tout en haut de la section “Données du champ”, vous verrez une déclaration indiquant si votre site Web a réussi ou non les vitales Web de base du champ sur la base de données réelles du mois dernier.
Il est important de noter que cet outil ne vous permet d’évaluer que des pages individuelles.
Si l’URL que vous avez insérée est la racine de votre site Web, vous verrez une case à cocher “Afficher le résumé de l’origine” juste en dessous de la section “Données du champ”. En cliquant sur cette case, vous pourrez voir le score total de toutes les pages servies à partir de cette origine.
L’un des avantages de PageSpeed Insights est qu’en plus des diagnostics, il fournit des recommandations sur la manière d’améliorer la vitesse et les performances de votre site.
2. Console de recherche Google
Pour une évaluation encore plus détaillée, vous pouvez trouver un rapport Core Web Vitals sur votre tableau de bord Google Search Console – à condition que vous ayez vérifié la propriété du site.
Pour accéder à ce rapport, faites défiler la page vers le bas, allez dans la section “Améliorations” et cliquez sur “Core Web Vitals”.
Vous accéderez alors à un rapport détaillé qui indique le nombre d’URL de votre site ayant obtenu de bons résultats, et qui vous indiquera les pages dont les performances sont médiocres et qui doivent être améliorées.
Comment améliorer les vitales de votre site Web?
Maintenant que vous savez exactement ce que sont les vitales Web, pourquoi elles sont importantes et comment les mesurer, nous pouvons discuter de certaines des façons dont vous pouvez les améliorer.
Pour vous rassurer, vous n’avez pas besoin d’être un gourou de la technologie pour optimiser les vitales Web de votre site !
Nous vous présentons ci-dessous quelques moyens simples d’améliorer chacun des indicateurs pertinents, ainsi que quelques conseils supplémentaires.
1. Comment améliorer le score du Largest Contentful Paint (LCP)?
Si le chargement du contenu le plus volumineux prend plus de 2,5 secondes, votre site peut sembler lent aux yeux des utilisateurs et les inciter à le quitter. Il est essentiel de remédier à ce problème pour améliorer l’expérience utilisateur.
Voici quelques mesures que vous pouvez prendre :
Trouvez et optimisez la partie la plus importante du contenu de votre site :
Comme nous l’avons mentionné précédemment, votre LCP dépend du plus gros élément de contenu de votre site. Il peut s’agir d’une image ou d’un texte.
Selon le type de contenu, il existe plusieurs façons de l’optimiser :
La vidéo : Les vidéos sont naturellement des types de contenu lourds. Pour contourner ce problème, envisagez d’utiliser une iFrame pour héberger du contenu vidéo. Les iFrames sont un code HTML qui vous permet d’afficher du contenu lourd, comme des vidéos provenant de sources externes telles que YouTube, sans avoir à les héberger sur votre serveur Web. Quel que soit le temps de chargement de la vidéo dans l’iFrame, LCP ne sera pas affecté si l’iFrame elle-même se charge rapidement.
Image : Une image peut prendre trop de temps à charger si elle est trop lourde ou si ses dimensions sont trop grandes. Si une image est trop grande, envisagez de la remplacer. Vous pouvez également utiliser un redimensionneur d’image tel que le logiciel gratuit Image Resizer d’Adobe pour compresser l’image sans en altérer la qualité.
Texte : Le texte ne devrait pas poser de problème en ce qui concerne LCP, mais les blocs de texte extraordinairement longs peuvent parfois poser problème. Dans ce cas, il peut être utile de diviser le texte en petits paragraphes.
Utiliser un réseau de diffusion de contenu (CDN)
Un CDN désigne un réseau de serveurs tiers situés à divers endroits dans le monde. Lorsque vous utilisez un CDN, les visiteurs de votre site peuvent visualiser le contenu de votre site plus rapidement car ils accèdent à ce contenu à partir de serveurs qui sont plus proches d’eux.
Il existe plusieurs services CDN que vous pouvez utiliser. Si vous souhaitez faire un choix rapide, Cloudflare CDN est une excellente option que vous pouvez utiliser gratuitement.
Activez le chargement paresseux
Avec le chargement paresseux, les images ne sont téléchargées que lorsque l’utilisateur les fait défiler. Si votre site contient beaucoup d’images, le chargement paresseux peut contribuer à améliorer votre LCP en empêchant le chargement simultané de plusieurs images.
Heureusement, la dernière version de WordPress, WordPress 5.8, est livrée avec le chargement paresseux par défaut, il suffit donc de mettre à jour le logiciel et tout ira bien.
2. Comment améliorer le score du délai de première entrée (DPI)?
Un mauvais FID signifie que les utilisateurs sont confrontés à un délai de plus de 300 ms lorsqu’ils essaient d’interagir avec votre site. La frustration qui en résulte peut conduire à un taux de rebond élevé.
Voici quelques moyens d’y remédier :
Optimisez JavaScript
JavaScript est l’un des principaux langages de codage utilisés pour créer des sites Web. Bien qu’il permette de faire beaucoup de choses, il est principalement utilisé pour ajouter des éléments visuels dynamiques aux pages Web. Il s’agit notamment de curseurs, d’éléments mobiles, etc.
Si le DIF de votre site Web est mauvais, c’est souvent parce que les navigateurs doivent gérer beaucoup de JavaScript après le chargement du contenu de votre page. Ainsi, lorsque les utilisateurs essaient d’interagir avec votre site Web, le navigateur est trop occupé à traiter le JavaScript pour répondre à leurs commandes.
Pour éviter que cela ne se produise, il y a plusieurs choses que vous pouvez faire.
Tout d’abord, vous pouvez différer le JavaScript qui bloque le rendu. Cela rend les scripts moins prioritaires et empêche les navigateurs de les exécuter immédiatement. Ils ne se chargent qu’une fois que d’autres ressources plus importantes ont été rendues.
Ainsi, les visiteurs peuvent interagir avec votre site Web sans avoir à attendre le chargement de ces scripts. Des plugins comme WP Rocket et Async JavaScript sont parfaits pour différer l’exécution de JavaScript.
Vous pouvez également réduire les fichiers JavaScript.
La minification consiste à prendre les fichiers et à supprimer toutes les parties inutiles, comme les sauts de ligne, l’indentation et les commentaires, afin de réduire leur taille.
Des outils de réduction tels que Closure Compiler et WP Rocket peuvent vous aider à le faire.
Supprimez les scripts tiers inutilisés
Pour que des outils comme les plugins et les thèmes fonctionnent, ils chargent des scripts sur votre site. Si certains de ces scripts jouent un rôle important, d’autres ne contribuent pas à sa fonctionnalité. Ils ne font que prendre de l’espace et entraver les performances.
Ces scripts peuvent être supprimés.
Pour les trouver, vous pouvez utiliser PageSpeed Insights. La section ” Reduce unused JavaScript ” vous donnera une liste de scripts inutilisés que vous pouvez supprimer pour améliorer le temps de réponse.
En outre, vous pouvez utiliser un outil comme Perfmatters pour activer les plugins uniquement lorsque cela est nécessaire.
Envisagez d’utiliser un plugin de mise en cache
Chaque fois qu’un utilisateur visite votre site, tous les éléments de votre site doivent être transmis au navigateur de l’utilisateur pour qu’il puisse le voir. Les plugins de mise en cache comme WP Super Cache permettent de stocker temporairement les données de votre site afin qu’elles puissent être récupérées et transmises plus rapidement.
3. Comment améliorer le score cumulé de Layout Shift (CLS)?
Le CLS de votre site doit être inférieur à 0,1. Si ce n’est pas le cas, les utilisateurs risquent d’être désorientés ou simplement ennuyés par des problèmes tels que le fait de cliquer sur le mauvais lien.
Plusieurs facteurs affectent le CLS. L’un d’eux est la vitesse globale.
Si certains éléments de votre site se chargent lentement, il peut y avoir des décalages soudains dans la position d’autres éléments lorsqu’ils se chargent complètement.
Dans ce cas, les tactiques décrites ci-dessus pour améliorer le LCP et le FID peuvent être utiles.
Voici d’autres moyens d’améliorer le CLS de votre site :
Précisez les dimensions des images
Vous devez toujours préciser les dimensions des images de votre site. Cela indique aux navigateurs l’espace qu’ils doivent occuper sur la page et peut les empêcher de se déplacer.
Lorsque des images sont ajoutées via l’éditeur de WordPress, les attributs hauteur et largeur sont automatiquement spécifiés. Mais si vous ajoutez des images manuellement via le code, assurez-vous de spécifier les dimensions pour éviter les décalages de mise en page.
Un moyen facile de le faire est d’utiliser un plugin tel que Specify Missing Image Dimensions, qui analysera automatiquement vos images pour trouver les attributs de largeur et de hauteur manquants et les appliquer.
Définissez les dimensions de tous les éléments intégrés
Tout comme les images, les éléments intégrés comme les vidéos ou les iFrames peuvent se déplacer sur la page et causer des problèmes de CLS. Lorsque vous insérez des éléments intégrés dans WordPress, la meilleure pratique consiste à spécifier leurs dimensions.
Par exemple, lorsque vous insérez une vidéo de YouTube sur votre site, vous devez ouvrir le lien de la vidéo YouTube. En dessous de la vidéo, vous trouverez un bouton ” partager ” sur lequel vous pouvez cliquer.
Ensuite, cliquez sur l’option “Embed”.
Vous obtiendrez ainsi un code que vous pourrez insérer dans le back-end de votre site Web. Ce code contient les dimensions de la vidéo que vous pouvez modifier manuellement pour l’adapter à la mise en page de vos pages Web.
Placement correct des publicités
Si votre site Web comporte des publicités, leur emplacement est un autre facteur important qui peut affecter votre CLS. Les publicités peuvent repousser le contenu lorsqu’elles se chargent, ce qui entraîne des changements soudains de mise en page et nuit à l’expérience de l’utilisateur.
Les publicités doivent être placées de manière optimale pour être visibles, mais aussi à des endroits où elles sont moins susceptibles de provoquer des changements de présentation. Ce point idéal se situe généralement au milieu de la page, sous le pli.
Dans la mesure du possible, évitez de placer les publicités en haut de la fenêtre d’affichage, où elles peuvent causer plus de dommages en déplaçant une grande partie du contenu vers le bas.
Et si vos publicités sont intégrées à l’aide d’iFrames, veillez à définir leur dimension correctement !
Optimisez les polices Web
L’utilisation de polices Web personnalisées sur votre site peut entraîner des modifications de la mise en page. En effet, lorsqu’un utilisateur essaie de charger votre site, le navigateur peut d’abord utiliser une police de secours pour afficher le texte pendant le téléchargement de la police personnalisée.
Une fois que le téléchargement est terminé et que le navigateur passe à la police personnalisée, l’emplacement des éléments de texte concernés sur la page peut se déplacer.
Un moyen de remédier à ce problème consiste à précharger vos polices.
Des plugins comme Autoptimize peuvent être utilisés à cette fin. Ce plugin peut être utilisé pour optimiser automatiquement divers aspects de votre site Web, y compris vos polices et JavaScript.
WP Rocket est une autre excellente option pour l’optimisation des polices.
4. Mesures générales
Outre les mesures que vous pouvez prendre pour améliorer des paramètres spécifiques, voici quelques mesures générales qui peuvent vous aider à améliorer les vitales Web de votre site Web :
Utilisez un hébergement de haute qualité
La qualité de votre hébergement est sans doute l’un des facteurs les plus importants qui déterminent les performances de votre site Web.
Si le changement d’hébergeur peut s’avérer peu pratique et coûteux, il en vaut la peine s’il entraîne une amélioration de la vitesse de chargement de votre site.
Même si vous mettez en œuvre toutes les autres tactiques ci-dessus, un hébergement web de mauvaise qualité sera toujours un obstacle à la performance de votre site web.
Choisir un hébergement de haute qualité signifie disposer d’une excellente plateforme pour des sites Web à chargement rapide.
Parmi les facteurs à prendre en compte, citons la présence de centres de données distribués (pertinent si vous avez un public international), de meilleurs serveurs, HTTP/2 au lieu de HTTP/1, etc.
Tous les bons services d’hébergement Web ne sont pas chers.
Des fournisseurs d’hébergement Web comme Bluehost et SiteGround, par exemple, sont fortement recommandés et proposent des prix abordables.
Utiliser un thème léger.
Votre thème est la base sur laquelle votre site est construit. Si vous choisissez un thème mal codé, vous ne pourrez pas faire grand-chose pour optimiser la vitesse de votre site.
Les thèmes lourds comportant beaucoup de code et de scripts inutiles peuvent empêcher votre site Web de fonctionner comme il le devrait et offrir à vos utilisateurs une expérience médiocre.
Pour améliorer la vitesse et l’interface utilisateur de votre site, choisissez un thème simple, léger et adapté au référencement, construit sur un code de haute qualité. Le thème Astra en est un bon exemple.
Astra est un thème léger codé selon les normes les plus strictes de WordPress et est connu pour obtenir des scores parfaits dans les tests Google Web Vitals.
Commencez à optimiser votre site Web pour Core Web Vitals dès aujourd’hui.
Les Core Web Vitals de Google vous offrent un moyen simple de mesurer et d’optimiser votre site Web en fonction de certains des paramètres les plus importants en matière d’ergonomie.
En suivant le guide ci-dessus, testez votre site Web, puis utilisez les conseils fournis pour apporter des améliorations là où elles sont nécessaires.
L’optimisation de votre site Web pour un meilleur chargement, une meilleure stabilité visuelle et une meilleure interactivité peut offrir à vos utilisateurs une meilleure expérience, augmenter l’engagement sur votre site, stimuler la génération de prospects, vous donner un avantage concurrentiel et améliorer vos résultats.
Avez-vous déjà essayé d’optimiser votre site Web pour les vitales Web de Google ? Si vous connaissez d’autres astuces utiles à essayer, nous serions ravis de vous entendre dans les commentaires !