Si vous êtes ici c’est que vous avez entendu parler de webperformance, de la vitesse de chargement, et surtout, des core web vitals.
Pas de panique, la webperformance sur wordpress peut paraître compliquée, mais grâce à ce guide, en suivant mes conseils (je l’espère), vous allez facilement valider les core web vitals et avoir du vert dans votre score pagespeed insight.
Des termes techniques vont être utilisés sans ce guide, mais ils seront simplifiés et vulgarisés au maximum, pour qu’un débutant puisse s’y retrouver facilement.
L’objectif est que vous obteniez ce score, comme j’ai pu l’obtenir sur plusieurs de mes sites wordpress.
Alors soyez attentif !
Si vous ne voulez pas perdre de temps et aller directement à la solution, rendez-vous à la rubrique mesurer les core web vitals (CVW)
Core Web Vitals c’est quoi ?
Faisons les présentations, les Core Web Vitals sont une norme de vitesse de chargement que les sites devraient respecter (selon Google) pour qu’un utilisateur puisse avoir une bonne expérience sur votre site.
En simple : ce sont les bases de la webperformance.
La validation des core web vitals est indispensable pour performer sur Google Discover et Google News.
3 éléments composent la norme Core Web Vitals, les voici en détails.
LCP – Largest Contentful Paint
Mesure le temps de chargement de l’élément principal de la page. le LCP peut être une image ou un bloc de texte. Dans 90% il s’agit de la plus grosse image au dessus de la ligne de flottaison (partie visible sur votre ordinateur ou mobile sans action de scroll / défilement)
Il doit se charger dans les 2,5 secondes après le début du chargement de la page.
CLS – Cumulative Layout Shift
Mesure la stabilité visuelle d’une page. Vous chargez une page, vous voulez cliquer sur un bouton mais il descend parce qu’un texte vient s’afficher au-dessus, énervant non ? C’est ça le CLS.
Le CLS est un score, et non pas un délai en seconde à atteindre. Le score du CLS doit être de 0,1. ou moins.
INP – Interaction to Next Paint
Mesure l’interactivité de la page. Vous chargez une page, vous cliquez sur un bouton mais rien ne se passe avant 3 secondes ? C’est ça l’INP.
Selon Google, un bon INP se situe à partir de 200 millisecondes ou moins.
à savoir que l’INP à remplacer le FID (First Input Delay), qui était l’ancienne 3ème brique des core web vitals, qui mesurait le moment où un utilisateur inréation avec la page, et le moment où le navigateur répond à cette interaction par l’action demandée (changer une page, passer un slider etc)
Documentation officielle de Google sur les core web vitals: https://web.dev/articles/vitals?hl=fr
Pourquoi valider les Core Web Vitals sur son site wordpress ?
Rappel, la vitesse de chargement d’un site n’est pas un critère hautement important pour votre SEO, dans la limite du raisonnable évidement. Un site qui met 15 secondes à se charger aura du mal à entrer dans le TOP 10 sur des mots clés.
Bonne nouvelle, dans ma prestation de création de site wordpress vous allez valider les core web vitals.
Maintenant, si vous ne validez pas les core web vitals, votre site aura un “malus” selon les robots (invisible à l’oeil humain évidemment). En cas de validation des core web vitals, vous n’aurez plus se malus, mais vous n’avez officiellement pas de bonus à les valider.
Dans le cas où vous êtes au coude à coude avec un concurrent dans le TOP 3, c’est là que le fait de valider les core web vitals a toute son importance. Google peut privilégier le site le plus rapide, synonyme de plus agréable pour les utilisateurs. Et c’est aussi moins coûteux pour lui de charger votre site, il ne faut pas oublier que Google est une entreprise privée qui chercher à faire des bénéfices, et réduire ces coûts.
Comme il n’y a pas que le SEO dans la vie, il y a aussi vos lecteurs et utilisateurs. C’est essentiellement pour eux que vous devez penser vitesse de chargement.
Une meilleure webperformance c’est :
- Avoir un taux de rebond plus faible
- Avoir un meilleur taux de conversion
- Avoir plus de page vues et lues sur son site
- Avoir un avantage pour le SEA (Google Ads / Paid média)
- Avoir une meilleure expérience pour vos utilisateurs
Comment mesurer les core web vitals de son site ?
Oui il faut apprendre à mesurer avant de vouloir appliquer les solutions, sinon vous n’allez pas savoir ce qui vous manque pour valider les core web vitals, ça serait dommage de perdre du temps non ?
Voici les outils à utiliser pour mesurer et prendre connaissance de vos points bloquants sur la validation des core web vitals pour votre site wordpress.
- Page Speed Insight
- Google Search Console
- Chrome UX Report (Crux)
- Web Page Test
Page Speed Insight – gratuit
Outil de base pour tortue personne souhaitant mettre les mains dans la webperformance
Mettez votre URL et c’est parti !
exemple avec le site wordpress.com qui valide les core web vitals (LCP, INP, CLS)
Dans chaque onglet tu trouveras les éléments validés ou non sur chaque brique Core Web Vitals
Google Search Console – gratuit
Onglet à gauche > Core Web Vitals > Mobile – cliquer sur “ouvrir le rapport”
Vous avez une vision globale de la vitesse de chargement de vos pages sur mobile (Google vient sur votre site en version mobile !)
Un détail avec les éléments CVW à améliorer
Cliquez sur une ligne pour afficher le détails des urls et groupe d’url concernées.
Important : la meilleure pratique est de travailler par template de page présents sur votre site puisqu’il s’agit d’élément communs dans 99% des cas :
- accueil
- article de blog
- page business
- fiche produit
- catégorie produit
- catégorie d’article
- page contact
- etc
Crux VIS (ancien chrome UX Report Crux – outil gratuit
Le Chrome UX Report est un rapport axé à 100% sur la webperformance de votre site, basé sur les données Chrome de vos utilisateurs.
Vous ne pourrez donc pas faire plus proche de la réalité
Vous pouvez avoir une vue d’ensemble puis par éléments des CWV pour suivre l’évolution mois par mois sur le support de votre choix (téléphone, ordinateur, tablette)
Vous n’avez pas encore créé ce rapport ? Voici notre guide pour créer un rapport chrome ux report (Crux)
Site officiel du crux vis https://cruxvis.withgoogle.com/
Site officiel pour le créer : http://g.co/chromeuxdash
Les incontournables pour valider les core web vitals sur wordpress (et les plus faciles)
Pour vous faire gagner du temps, voici en version très résumé les points essentiels pour passer les core web vitals.
LCP – Optimiser les images
LCP – Traiter les ressources bloquantes JS et CSS
LCP – Réduire la taille des fichiers JS et CSS
LCP & CLS – Utiliser Font-Display: Swap
LCP & CLS – Pas de lazyloading au-dessus de la ligne de flottaison
Voir le détails en-dessous pour appliquer ces recommandations clés.
Le fait d’avoir des plugins performants et complets vous fera gagner beaucoup de temps. Et lorsque je parle de parle de payant, il s’agit d’environ 50-70€ par an, soit 5€ par mois. Moins cher que votre abonnement netflix pour faire plus de conversion et potentiellement gagner des position SEO. A vous de fixer vos priorités.
Améliorer son LCP
1 – Optimiser vos images. Puisque le LCP sera dans 90% des cas la première grosse image de votre page, autant agir directement sur celle-ci. Deux options sont possibles :
Manuellement en utilisant squoosh.app (grauit) pour compresser vos images
Automatiquement avec un plugin :
WP Fastest Cache (nécessite des crédits)
Imagify ; plugin dédié à cette tâche, efficace et peut être géré en automatique https://imagify.io/fr/
2 – Augmenter la durée de vie du cache. Passez la durée de vie de cache à 1 an.
Comment ? WP Rocket (payant, 59€/an), WP Fastest Cache (gratuit, version complète payante, 49€ à VIE), FlyingPress (payant, 42€/an), LiteSpeed Cache (gratuit)
1 – Ne pas activer le lazyloading sur les images au-dessus du la ligne de flottaison. Le fait de retarder le chargement va forcément ralentir l’apparition du contenu le plus grand de la page, le LCP.
Comment ? Utiliser https://perfmatters.io/ (25€ l’année pour 1 site), le plugin a d’autres fonctionnalités.
Litespeedcache (gratuit)
Liteseep cache > Optimisation de page > VPI > Images de vue écran “Actif”
2 – Mettre l’image au-dessus du la ligne de flottaison en preload, SI vous n’avez pas désactivé le lazyloading
3 – Réduire la taille des fichiers JS et CSS. Ce travail peut se faire rapidement et automatiquement avec des plugins de cache gratuit ou payant. Attention, sur certaines versions gratuites, comme WP Fastest Cache, la compression des fichiers n’est pas maximal, il faut la version payante pour avoir une meilleure compression.
Mais c’est déjà un bon début si vous passez d’aucune compression à une compression moyenne
Comment ? WP Rocket (payant, 59€/an), WP Fastest Cache (gratuit, version complète payante, 49€ à VIE), FlyingPress (payant, 42€/an)
4 – Réduire le TTFB. Pour ce point, c’est du côté de votre hébergement wordpress. Passez sur un serveur dédié si vous avez actuellement un serveur mutualisé. Ou envisagez de carrément changer de solution pour un hébergeur qui offre de meilleures performances pour votre site : capacité de stockage, CPU…
5 – Éliminer les ressources bloquantes JS et CSS. Peut se faire rapidement et automatiquement avec des plugins
Comment ? WP Rocket (payant, 59€/an), WP Fastest Cache (gratuit, version complète payante, 49€ à VIE), FlyingPress (payant, 42€/an)
exemple avant / après avoir retardé un script JS (contenu tiktok embarqué) sur mon site wordpress en quelques clics avec Perfmatters.io
6 – Utiliser Font-Display: Swap. Cela permet à vos polices d’apparaître directement au lieu d’un potentiel temps de latence, qui pourrait faire apparaître la page sans texte, puis avec texte. Problématique si votre LCP est un bloc de texte non ?
Comment ? WP Rocket (payant, 59€/an), WP Fastest Cache (gratuit, version complète payante, 49€ à VIE), FlyingPress (payant, 42€/an)
WP Rocket : se fait automatiquement lorsque vous cochez l’optimisation “Minify CSS” ou “Optimize CSS”.
7 – Mettre vos fonts en preload. Permet de précharger vos polices afin de les faire apparaitre plus rapidement.
8 – Appliquer le lazyloading à des éléments HTML. Le but est de charger en priorité ce que les utilisateurs vient en arrivant sur votre site : le header, corps de l’article, les premières images. Vous pouvez mettre le footer et la zone des commentaires en lazyloading.
9 – Compression Brotli. Rapide à mettre en place selon votre hébergeur WordPress.
O2switch : aller dans votre Cpanel > PHP Selector > Cocher la case Brotli
12 – Éviter de charger des scripts lourds (surtout les tiers) au-dessous de la ligne de flottaison, comme des encarts Google Adsens, galerie d’image très lourdes etc.
13 – Utiliser un CDN. Le Content Delivery Network, ou Réseau de diffusion de contenu, permet de délivré rapidement les contenus des sites pour les utilisateurs en utilisant un réseau de serveur national et mondial (selon la solution de CDN que vous avez peut être déjà).
Le CDN le plus efficace sur le marché est à mon sens Cloudflare, disponible en version gratuite et payante.
Il vous servira à charger plus rapidement vos images et facilite la mise en cache votre contenu. Idéal pour les sites à fort trafic qui ont des problématiques de surcharge de serveur.
Améliorer son CLS
- Déclarer les dimensions d’images, vidéo et iframes. Si vos photos n’ont pas de dimensions spécifiées dans votre page, les éléments avant et après chaque photo vont changer de place au chargement de l’image (en haut ou en bas), et créer du CLS (instabilité visuelle)
Comment ? Les plugins (payant) FlyingPress, WP Rocket et Perfmatters peuvent le faire automatiquement.
Ici sur WProcket :
Réglages > WP Rocket > Média > Dimensions des images (en fin de page)
- Font-Display: Swap. Même chose que pour le LCP, pratique de résoudre deux problèmes d’un coup non ?
- Pas de lazyloading sur les images au-dessus du la ligne de flottaison. Une pierre deux coups avec le LCP !
- Désactiver les CSS inutilisés. Pourquoi charger des éléments qui ne sont pas utilisés ?
- Télécharger les fonts en local et les mettre en preload. Encore une fois, bon pour le LCP en plus du CLS.
Comment ? Si vous avez le thème wordpress Astra pro c’est simple, cochez les cases “load google fonts locally” et “preload local fonts”. On ne peut pas faire plus rapide.
Si vous n’avez pas ce thème (dommage pour vous), vous pouvez utiliser ce plugin gratuit : https://wordpress.org/plugins/host-webfonts-local/
Autre méthode, le faire manuellement en téléchargeant vos fichiers de fonts via cet outil gratuit en ligne https://www.fontsquirrel.com/tools/webfont-generator et en les intégrant via votre FTP.
Si vous êtes perdu et que vous voulez gagner du temps, passez par OMGF
- Réduire les animations. Les effets et animations en tout genre sont souvent la causes de vos problèmes de CLS (et du ralentissement global de vos pages). Le mieux est de comparer vos performances avec et sans animations, et voir la différence. Si vous avez des contraintes de marques, et que vous jugez que ces animations sont nécessaires à votre business, taux de conversion, alors laissez-les. Mais on peut toujours trouver des compromis non ?
- Gestion des contenus dynamiques. Il s’agit de vos bannières, popup, ads, formulaires de contact, bandeau de cookies. Pour faire simple, il ne faut pas afficher de popup dès qu’un utilisateur arrive sur votre site. C’est mauvais pour l’expérience utilisateur et pour votre SEO (et la webperf).
Donc pour capter des leads, mettre en avant une promotion ou autre, retarder simplement l’apparition de la popup. Exemple : attendre 3 secondes après le chargement de la page, ou ne l’afficher qu’après une action de l’utilisateur, comme un clic ou un défilement (scroll).
Comment ? En supprimant des popups pour aller plus vite, ou directement dans la configuration de vos plugins de popup & co qui contiennent des conditions d’affichage.
Améliorer son INP
Nouveau dans la sphère du SEO et de la webperformance, l’INP est là pour mesurer la latence des intéractions utilisateurs sur un site.
C’est une des tâches les plus complexes pour passer les core web vitals, mais si vous avez un site wordpress plutôt léger ou un blog, vous ne devriez pas rencontrer de problème.
Pour faire simple, si vous avez appliqué la majorité des recommandations précédentes sur le LCP et le CLS, vous ne devriez pas rencontrer de problème avec L’INP dans 90% des cas.
L’INP est très étroitement lié au TBT, Total Blocking Time, documentation officielle de Google ici : https://web.dev/articles/tbt
Donc, si l’on optimise le TBT, on optimise en grande partie l’INP, et voici comment faire :
- Réduire l’impact du code tiers (exemple : Tag Manager, Analytics, Calendly..)
- Réduire le temps d’exécution du JavaScript : cf la recommandation de réduire les fichiers JS et optimiser les fichiers JS inutilisés
- Réduire le travail du thread principal : processus qui analyse les CSS, le code HTML, compile le DOM.
Pour faire simple : réduire et optimiser les fichiers JS et CSS, réduire le code tiers et retarder son chargement.
Thread principal ou Main Thread, c’est le moment où le navigateur traite le code d’une page pour afficher la version finale demandée par l’utilisateur.
Les plugins wordpress fortement recommandés pour les core web vitals
Les plugins payants ne sont pas obligatoires, mais disons plutôt qu’il vous feront gagner un temps précieux pour passer les core web vitals sur votre site wordpress, et le coût est faible.
Rappelons qu’ils sont moins cher qu’un abonnement netflix ou amazon prime, et les bénéfices seront pour tous vos visiteurs.
Ma recommandation pour un site très performant : FlyingPress + Perfmatters + Imagify + OMGF + Cloudflare CDN
Cette configuration vous sera très utile si vous évolué dans une thématique concurrentielle ou la webperformance peut faire la différence, que vous avez de véritables enjeux de conversions, expérience utilisateur (UX), et des ambitions de trafic élevé.
Ma recommandation pour améliorer gratuitement sa vitesse de chargement : LiteSpeed Cache + Imagify + OMGF
Test avec les plugins 100% gratuit sur un blog qui ne comporte pas d’animations ou de design très poussé, avec un trafic modéré (hébergement O2switch, thème Ashe gratuit)
Plugin de cache et vitesse de chargement wordpress
- WP Rocket (payant, 59€/an)
- LiteSpeed Cache (gratuit)
- WP Fastest Cache (gratuit, version complète payante, 49€ à VIE)
- FlyingPress (payant, 42€/an)
- Plugin webperformance global (mais ne fait pas le cache) : Perfmatters (payant, 24,95€/an)
- Plugin pour les fonts en local : OMGF (gratuit)
- Plugin pour optimiser les images : Imagify (gratuit pour environ 200 images par mois et payant à partir de 5,99€ par mois)