Nous avons tous ressenti cette pointe de frustration lorsqu'une page web se charge à la vitesse d'un escargot, ou qu'un bouton bouge juste au moment où vous essayez de cliquer dessus. Chez WPBeginner, nous sommes obsédés par la vitesse des sites car nous savons que ces petits moments font une énorme différence dans l'expérience utilisateur.
Lorsque Google a introduit les Core Web Vitals, il a donné un nom à ces problèmes de performance, mais le jargon technique peut sembler écrasant. Vous pourriez craindre que votre SEO en pâtisse si vous n'avez pas de diplôme en informatique.
La bonne nouvelle, c'est que vous n'avez pas besoin d'être un développeur pour obtenir d'excellents scores. Nous avons nous-mêmes suivi ce processus d'optimisation exact et l'avons réduit à l'essentiel pour vous.
Dans ce guide, nous vous présenterons des étapes simples et pratiques pour améliorer vos Core Web Vitals afin d'obtenir un site WordPress plus rapide et plus fluide.
Voici un bref aperçu de ce que nous allons couvrir dans ce guide :
- Que sont les Core Web Vitals de Google ?
- Comment tester votre score Google Core Web Vitals
- Pourquoi les Core Web Vitals sont-ils importants ?
- Comment améliorer vos Core Web Vitals dans WordPress (7 astuces)
- Questions fréquemment posées sur les Core Web Vitals
- Guides d'experts sur la mesure et l'amélioration des performances WordPress
Que sont les Core Web Vitals de Google ?
Les Core Web Vitals de Google sont des métriques de performance spécifiques que le moteur de recherche utilise pour mesurer l'expérience utilisateur globale d'un site web. Ces scores font partie des signaux d'expérience de page de Google, qui peuvent influencer vos classements SEO.
La vérité, c'est que personne n'aime un site web lent, et Google non plus. Les Core Web Vitals vous aident à mesurer la rapidité avec laquelle votre site devient visible, interactif et stable pour vos visiteurs.
Pour ce faire, Google utilise trois tests clés :
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
Note : Jusqu'en mars 2024, Google utilisait le First Input Delay (FID) à la place de l'INP. Vous pourriez encore voir cette ancienne métrique rapportée dans certains outils de test de performance.
Les noms de ces tests peuvent sembler techniques, mais ce qu'ils mesurent est assez simple à comprendre. Examinons le fonctionnement de chacun.
Largest Contentful Paint (LCP)
Le Largest Contentful Paint (LCP) mesure la rapidité avec laquelle le contenu principal de votre page devient visible pour les utilisateurs. Il peut s'agir d'une image mise en avant, d'un grand bloc de texte ou d'un autre élément proéminent.
Une page peut se charger rapidement dans l'ensemble, mais si le contenu le plus important apparaît en dernier, la page semblera toujours lente à l'utilisateur. Le LCP vous aide à identifier et à résoudre ce problème.
Interaction to Next Paint (INP)
L'Interaction to Next Paint (INP) mesure le temps nécessaire à votre site pour fournir un retour visuel après qu'un utilisateur a interagi avec lui. Cette interaction peut être un clic, un toucher ou une pression de touche.
Par exemple, lorsqu'une personne clique sur le bouton « Envoyer » de votre formulaire de contact, l'INP mesure le temps jusqu'à ce que quelque chose change visuellement à l'écran pour accuser réception de cette action.
Cumulative Layout Shift (CLS)
Le Cumulative Layout Shift (CLS) mesure la stabilité visuelle de votre page pendant son chargement. Un mauvais score CLS signifie que des éléments sautent sur l'écran pendant que la page se rend.
C'est frustrant lorsqu'un utilisateur essaie de cliquer sur un bouton, pour qu'il bouge à la dernière seconde parce qu'une publicité ou une image chargée au-dessus de lui. Un bon score CLS signifie que votre mise en page est stable et prévisible.
Comment tester votre score Google Core Web Vitals
Le moyen le plus simple de tester votre score Core Web Vitals est d'utiliser l'outil PageSpeed Insights de Google. Entrez simplement l'URL que vous souhaitez vérifier et cliquez sur le bouton « Analyser ».
Les résultats sont affichés dans la section « Évaluation des Core Web Vitals ». Une note de réussite sera indiquée en vert à côté de l'en-tête.
Vous trouverez ci-dessous les scores spécifiques pour chacun des trois indicateurs. Pour réussir l'évaluation, vous devez atteindre ces objectifs :
- Largest Contentful Paint (LCP) : 2,5 secondes ou moins
- Interaction to Next Paint (INP) : 200 millisecondes ou moins
- Cumulative Layout Shift (CLS) : 0,1 ou moins
Comment afficher les Core Web Vitals pour l'ensemble de votre site web
Pour obtenir un score moyen pour l'ensemble de votre site web, vous pouvez utiliser le rapport Core Web Vitals dans votre compte Google Search Console.
Ce rapport vous indique quelles URL de votre site ont des scores bons, à améliorer ou médiocres, vous permettant de prioriser vos efforts d'optimisation.
Pour des rapports encore plus détaillés, vous pouvez utiliser le test Lighthouse intégré directement dans le navigateur Chrome. Ouvrez simplement un site Web, faites un clic droit n'importe où et sélectionnez l'option « Inspecter ».
Remarque : Vous devez exécuter les tests Chrome en mode Incognito pour obtenir les résultats les plus précis. Sinon, vos propres extensions de navigateur pourraient affecter négativement les scores.
Pourquoi les Core Web Vitals sont-ils importants ?
Les Core Web Vitals sont importants car ils reflètent directement l'expérience utilisateur de votre site Web. Ils se concentrent non seulement sur la vitesse brute, mais sur la rapidité avec laquelle les visiteurs peuvent réellement voir et interagir avec votre contenu.
Une étude a révélé qu'un délai d'une seconde dans le temps de chargement d'une page peut entraîner une perte de 7 % des conversions et 11 % de vues de pages en moins. Un site Web plus rapide avec une mauvaise expérience utilisateur nuit toujours à vos bénéfices.
L'amélioration des Core Web Vitals vous aide à résoudre ce problème. L'expérience utilisateur étant un facteur de classement SEO confirmé par Google, un bon score peut vous donner un avantage sur vos concurrents.
Comment améliorer vos Core Web Vitals dans WordPress (7 astuces)
Améliorer votre score Core Web Vitals dans WordPress n'est pas si difficile. En suivant quelques conseils essentiels d'optimisation des performances, vous pouvez facilement réussir l'évaluation.
1. Optimiser votre hébergement WordPress
Votre fournisseur d'hébergement WordPress joue le rôle le plus important dans les performances de votre site web. Un hébergeur de qualité optimise ses serveurs spécifiquement pour WordPress, ce qui donne à votre site une plateforme solide sur laquelle construire.
Chez WPBeginner, nous utilisons SiteGround pour cette raison précise. Ils sont l'un des rares hébergeurs officiellement recommandés par WordPress.org, et leurs performances sont excellentes.
Leur plateforme fonctionne sur Google Cloud et inclut leur puissant plugin SG Optimizer. Il gère automatiquement toutes les optimisations avancées de mise en cache et de performance, ce qui est une raison majeure pour laquelle notre site est si rapide.
Si vous utilisez un autre hébergeur, alors WP Rocket est la meilleure alternative. C'est le plugin de mise en cache que nous recommandons pour nos autres projets, et il rend l'obtention d'un meilleur score Core Web Vitals beaucoup plus facile.
2. Améliorer le score Largest Contentful Paint (LCP)
Comme nous l'avons mentionné, le LCP est le temps nécessaire pour que le plus grand élément de contenu apparaisse à l'écran. Dans un article de blog typique, il s'agit souvent de l'image mise en avant ou du texte de l'article.
Pour savoir quel élément est mesuré, faites défiler les résultats de PageSpeed Insights et développez l'onglet « Élément Largest Contentful Paint ».
Si l'image est volumineuse, essayez de la remplacer par un fichier plus petit. Vous pouvez en savoir plus dans notre guide sur comment optimiser les images pour le Web.
3. Amélioration du score d'Interaction to Next Paint (INP)
Le score d'Interaction to Next Paint mesure le temps entre le moment où un utilisateur clique sur quelque chose sur votre site et le moment où il voit une réponse visuelle. Un long délai ici peut donner l'impression que votre site est lent et peu réactif.
Par exemple, imaginez qu'un visiteur remplisse un formulaire de contact et clique sur le bouton « Envoyer ». Sur nos sites, nous utilisons WPForms car il est conçu pour la vitesse et traite les soumissions sans délai, créant une expérience fluide.
Une cause majeure d'un mauvais INP est le JavaScript qui se charge avant le reste de la page. La façon la plus simple de résoudre ce problème est d'utiliser un plugin comme WP Rocket, dont nous vous montrerons comment le configurer.
Tout d'abord, vous devez installer et activer le plugin. Ensuite, allez dans Paramètres » WP Rocket et basculez vers l'onglet ‘Optimisation des fichiers’.
Faites défiler vers le bas et cochez la case à côté de ‘Charger le JavaScript de manière différée’. N'oubliez pas d'enregistrer vos modifications.
Ce simple réglage indique à votre site web de charger d'abord le contenu visible et d'attendre le JavaScript. Ce seul changement peut améliorer considérablement votre score INP.
4. Amélioration du score de Cumulative Layout Shift (CLS)
Un mauvais score CLS est causé lorsque des éléments d'une page se déplacent pendant leur chargement. Pour voir quels éléments posent problème, développez l'onglet ‘Éviter les grands décalages de mise en page’ dans votre rapport PageSpeed.
Pour éviter cela, vous devez indiquer aux navigateurs les dimensions (largeur et hauteur) de vos images, de vos intégrations vidéo et de vos publicités. Cela permet au navigateur de réserver l'espace correct pour l'élément avant qu'il ne se charge.
WordPress ajoute automatiquement des dimensions à vos images, mais vous devriez vérifier les autres intégrations multimédias. Vous pouvez le faire en utilisant l'outil Inspecter l'élément de votre navigateur pour vérifier si un élément a des attributs de largeur et de hauteur définis.
5. Élimination des éléments bloquant le rendu
Les éléments bloquant le rendu sont des fichiers, généralement du JavaScript ou du CSS, qui doivent se charger avant que le reste de votre page ne puisse être affiché. Cela ralentit la vitesse perçue de votre page et nuit à vos scores Core Web Vitals.
PageSpeed Insights listera ces fichiers problématiques pour vous. Ils proviennent souvent de plugins et d'outils tiers comme Google Analytics ou Facebook Pixel.
Corriger cela manuellement peut être délicat pour les débutants. Nous avons un guide étape par étape sur la façon d'éliminer facilement les ressources bloquant le rendu sans toucher à aucun code.
6. Dimensionner correctement les images dans WordPress
Télécharger des images inutilement volumineuses est une erreur courante qui ralentit les sites Web. Les photos haute résolution prennent beaucoup plus de temps à charger et ne sont souvent pas nécessaires pour la visualisation sur le Web.
C'est particulièrement problématique pour les utilisateurs mobiles. Même si votre thème réduit l'image pour s'adapter à un écran plus petit, le navigateur du visiteur doit toujours télécharger le fichier complet.
Nous avons un guide détaillé sur la façon d'optimiser correctement les images pour votre site WordPress sans perdre en qualité.
7. Utiliser un CDN pour améliorer votre score Core Web Vitals
Un CDN, ou réseau de diffusion de contenu, est un service qui rend votre site plus rapide pour les visiteurs du monde entier. Il le fait en stockant des copies de vos fichiers statiques (comme les images et le CSS) sur des serveurs situés dans différentes régions géographiques.
Cela permet aux utilisateurs de télécharger ces fichiers à partir du serveur qui leur est le plus proche, ce qui réduit les temps de chargement. Cela décharge également beaucoup votre serveur d'hébergement principal.
Pour WPBeginner, nous nous appuyons sur le CDN d'entreprise de Cloudflare. Il accélère non seulement notre site, mais fournit également un pare-feu puissant qui bloque des millions de requêtes de spam et d'attaques malveillantes chaque jour.
Pour la plupart des entreprises, même le plan gratuit de Cloudflare offre un excellent service CDN et une protection de pare-feu de base. C'est l'un des moyens les plus efficaces d'améliorer vos scores Core Web Vitals.
Questions fréquemment posées sur les Core Web Vitals
Ayant aidé des milliers d'utilisateurs à accélérer leurs sites web, nous recevons beaucoup de questions sur les Core Web Vitals. Voici les réponses à certaines des plus fréquentes.
Q : Quelles sont les trois Core Web Vitals ?
R : Les trois métriques principales sont le Largest Contentful Paint (LCP) pour la performance de chargement, l'Interaction to Next Paint (INP) pour l'interactivité du site web, et le Cumulative Layout Shift (CLS) pour la stabilité visuelle.
Q : Quel est un bon score Core Web Vitals ?
R : Vous devriez viser un LCP de 2,5 secondes ou moins et un INP de 200 millisecondes ou moins. Pour le CLS, un score de 0,1 ou moins est considéré comme bon.
Q : Un bon thème peut-il corriger automatiquement mes Core Web Vitals ?
R : Un thème bien codé offre une excellente base, mais ce n'est pas une solution miracle. Vos scores sont également fortement influencés par votre fournisseur d'hébergement, la taille des images et le nombre de plugins que vous utilisez.
Q: À quelle fréquence dois-je vérifier mes scores Core Web Vitals ?
R : Nous vous recommandons de vérifier vos scores au moins une fois par mois. Il est également conseillé de les tester après avoir installé un nouveau plugin, modifié votre thème ou ajouté des fonctionnalités majeures à votre site.
Guides d'experts sur la mesure et l'amélioration des performances WordPress
Maintenant que vous savez comment optimiser les Core Web Vitals, vous aimerez peut-être consulter d'autres articles liés à la mesure et à l'amélioration des performances de WordPress :
- Le guide ultime pour améliorer la vitesse et les performances de WordPress
- Comment accélérer les performances de WooCommerce
- Comment effectuer correctement un test de vitesse de site Web (meilleurs outils)
- Comment tester la charge d'un site WordPress
- Qu'est-ce que le score INP de Google et comment l'améliorer dans WordPress
- Comment utiliser le plugin GTmetrix pour améliorer les performances de votre site WordPress
- Hébergement WordPress le plus rapide (Tests de performance)
Nous espérons que ce guide vous a aidé à apprendre comment optimiser les Core Web Vitals pour WordPress. La sécurité est un autre aspect clé de l'expérience utilisateur, nous vous recommandons donc de suivre notre liste de contrôle de sécurité WordPress pour protéger votre site.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Olaf
L'optimisation globale d'un site web peut sembler simple sur le “papier”, mais en pratique, c'est généralement une autre histoire. Obtenir des chiffres et des vitesses impressionnants peut parfois sembler un travail fastidieux. Cela dépend de l'état du site web que vous héritez et de la façon dont le propriétaire précédent l'a entretenu, ou des technologies qu'il a utilisées pour le construire. Parfois, si un site est construit sur un constructeur de pages et repose sur plusieurs plugins pour chaque fonction mineure, il est difficile de concevoir une stratégie pour améliorer les Core Web Vitals. Cette liste fournit un excellent point de départ, un guide sur ce qu'il faut vérifier, ce qu'il faut améliorer et comment s'y prendre. Une excellente base pour les débutants.
Samuel
Il est facile de se laisser emporter par d'autres aspects du SEO et d'oublier les Core Web Vitals. Bien que je connaisse l'existence des Core Web Vitals pour les utilisateurs, je n'y ai pas vraiment prêté attention. Chaque fois que je conçois un nouveau site WordPress, je me concentre toujours sur la rapidité avec laquelle il va se classer sur Google ou tout autre moteur de recherche. La lecture de cet article informe mes réflexions pour inclure les Web Vitals dans mes flux de travail en tant que développeur web. Merci pour ce guide détaillé. Je viens de terminer un site web pour un nouveau client et cet article va être mis à profit en suivant toutes les instructions ici. Merci beaucoup.
Dayo Olobayo
Je luttais avec le temps de chargement lent de mon site WordPress jusqu'à ce que j'implémente les stratégies décrites dans ce guide. Les instructions ont rendu facile l'optimisation de mes Core Web Vitals et maintenant mon site est ultra rapide. Merci !
Support WPBeginner
De rien !
Admin
Jiří Vaněk
Au début, j'ai beaucoup lutté avec la vitesse de WordPress. J'ai un site web sur mon propre serveur avec 4 vCPUs et 8 Go de RAM. Même ainsi, je continuais à voir des chiffres rouges. Par cela, je veux dire que très souvent, l'optimisation ne concerne pas seulement les performances du serveur ou l'hébergement, mais aussi la façon dont vous optimisez WordPress lui-même. Dans ce contexte, je dois dire que le plugin WP Rocket m'a le plus aidé. Ce n'est qu'après avoir implémenté ce plugin que j'ai finalement obtenu des chiffres verts. Ce qui a probablement le plus aidé, c'est le préchargement des liens URL et un cache relativement sophistiqué. Probablement aucun plugin de cache n'est aussi bon que WP Rocket. En ce qui concerne le SEO, j'ai commencé à obtenir de meilleures positions seulement après que le site web ait été correctement optimisé.
Support WPBeginner
Thank you for sharing what you use for your site
Admin
Mohammed Haider
J'ai un site web sur WordPress. Je n'arrive pas à passer les Core Web Vitals. Existe-t-il un plugin WordPress gratuit qui puisse m'aider à y parvenir ?
Support WPBeginner
Il y a de nombreuses parties différentes au score des Web Vitals, nous vous recommandons de consulter la section « Comment améliorer vos Core Web Vitals dans WordPress » pour nos recommandations.
Admin
Jiří Vaněk
Le plugin Autooptimize avec une sorte de plugin de cache est gratuit et peut vraiment aider beaucoup.
Ladyson
N'oubliez pas que de nombreux créateurs de thèmes par glisser-déposer posent des problèmes avec leur code.
En les mettant à jour régulièrement, vous pouvez également résoudre le problème des faibles scores. Ils optimisent leur code pour les Core Web Vitals.
Support WPBeginner
That is certainly something to keep in mind as well
Admin
miamiatz
Google est doué pour inventer des choses utiles. Le problème du Cumulative Layout Shift est critique sur la plupart des appareils numériques.
Vous voulez cliquer sur quelque chose pour vous rendre compte que le lien/l'icône/le bouton sur lequel vous vouliez cliquer s'est déplacé ailleurs et vous finissez par cliquer sur autre chose.
Ce problème se retrouve même dans les applications Android de base et les applications non de base, y compris les applications de médias sociaux, les applications d'actualités, même les applications financières. C'est ridicule.
Bravo à Google pour avoir inventé ces Core Web Vitals.
J'ai un ou deux points à aborder pour ceux qui s'intéressent aux métriques web :
La plupart des thèmes WordPress sont livrés avec des feuilles de style qui sont chargées les unes après les autres.
Le CSS personnalisé déclaré via le personnaliseur de thème est chargé en dernier.
Maintenant, si vous déclarez la taille ou la forme de quelque chose (même les polices) dans le CSS personnalisé qui a été déclaré différemment dans les fichiers CSS du thème, l'élément sera chargé avec le style par défaut du thème, puis ajusté pour obéir à la déclaration CSS trouvée dans le CSS personnalisé.
Cela provoque des changements de mise en page.
Personnel éditorial
Merci de partager ces réflexions. Oui, l'optimisation de la livraison CSS peut aider, ainsi que le chargement différé des éléments.
Admin
Ackson Mwape
Merci beaucoup pour cet article opportun.
Personnel éditorial
Always a pleasure Ackson
Admin