Optimiser les Core Web Vitals sur WordPress : le guide complet

Les Core Web Vitals sont devenus un facteur de classement officiel de Google. Pour les sites WordPress, optimiser ces métriques peut faire la différence entre la première et la deuxième page de résultats. Voici un guide pratique pour améliorer vos scores.

Qu'est-ce que les Core Web Vitals ?

Les Core Web Vitals sont trois métriques clés mesurées par Google pour évaluer l'expérience utilisateur de votre site :

• LCP (Largest Contentful Paint) : mesure le temps de chargement du plus grand élément visible. Objectif : moins de 2,5 secondes.
• INP (Interaction to Next Paint) : mesure la réactivité aux interactions utilisateur. Objectif : moins de 200 millisecondes. Il a remplacé le FID en mars 2024.
• CLS (Cumulative Layout Shift) : mesure la stabilité visuelle de la page. Objectif : score inférieur à 0,1.

Vous pouvez vérifier vos scores en temps réel avec PageSpeed Insights ou le rapport Core Web Vitals de la Search Console.

1. Optimiser le LCP

Le LCP est souvent le point faible des sites WordPress. Voici les actions les plus efficaces :

Choisir un hébergement performant

Le temps de réponse serveur (TTFB) est la base de tout. Un hébergement mutualisé classique génère souvent un TTFB supérieur à 800 ms. Sur mon hébergement WordPress optimisé, le TTFB descend sous les 200 ms grâce au cache LiteSpeed et à HTTP/2.

Optimiser les images

Les images sont responsables du LCP dans 70 % des cas selon Google. Quelques règles :

• Utilisez le format WebP (30 % plus léger que JPEG), Squoosh permet de convertir gratuitement
• Définissez toujours les attributs width et height
• Activez le lazy loading natif avec loading="lazy" (sauf pour l'image above-the-fold)
• Utilisez un plugin comme ShortPixel ou Imagify pour la compression automatique

Précharger les ressources critiques

Ajoutez dans votre <head> :

<link rel="preload" as="image" href="/votre-image-hero.webp">
<link rel="preconnect" href="https://fonts.googleapis.com">

Consultez le guide preload de MDN pour aller plus loin.

2. Améliorer l'INP

L'INP mesure la latence de toutes les interactions, pas seulement la première. C'est souvent la métrique la plus difficile à optimiser sur WordPress.

Réduire le JavaScript

WordPress charge souvent trop de JS. Quelques solutions :

• Désactivez les plugins inutiles : chaque plugin ajoute du JS. Utilisez Query Monitor pour identifier les scripts chargés
• Différez le chargement : utilisez defer ou async sur vos scripts
• Supprimez jQuery si votre thème ne l'utilise pas (wp_dequeue_script)

Optimiser les event handlers

Évitez les opérations lourdes dans les gestionnaires d'événements. Utilisez requestAnimationFrame pour les animations et debounce pour les événements fréquents (scroll, resize). Le guide INP de web.dev détaille ces techniques.

3. Réduire le CLS

Le CLS est causé par des éléments qui se déplacent pendant le chargement.

Réserver l'espace des images et iframes

<!-- Mauvais -->
<img src="photo.jpg" alt="Photo">

<!-- Bon -->
<img src="photo.jpg" alt="Photo" width="800" height="450">

Éviter les injections dynamiques

Les publicités, les polices web et les embeds sont les principales causes de CLS. Solutions :

• Utilisez font-display: swap pour les polices (documentation Google Fonts)
• Réservez un espace fixe pour les publicités avec min-height
• Préchargez les polices critiques avec <link rel="preload">

4. Le cache, votre meilleur allié

Un système de cache bien configuré améliore les trois métriques simultanément :

Sur mon hébergement WordPress, ces quatre niveaux de cache sont activés par défaut.

5. Mesurer et itérer

Utilisez ces outils pour suivre vos progrès :

L'optimisation des Core Web Vitals n'est pas un projet ponctuel. Chaque nouveau plugin, chaque mise à jour de thème peut impacter vos scores. Mettez en place un monitoring régulier et testez avant chaque déploiement.

En résumé

Un hébergement WordPress performant est la fondation de bons Core Web Vitals. Le reste, images, JS, cache, sont des optimisations qui s'ajoutent par-dessus. Commencez par la base, mesurez, puis itérez.