Contexte
Une PME basée à Morges disposait d’un site vitrine WordPress récent, visuellement correct, mais ressenti comme lent sur smartphone. Les pages principales chargeaient toutes les ressources dès l’arrivée, ce qui pénalisait l’affichage initial et l’interaction. Les demandes existaient, mais l’équipe constatait une perte d’attention sur mobile.
Objectifs
- Améliorer la performance mobile sans refonte graphique complète.
- Stabiliser les Core Web Vitals, en priorité LCP et INP.
- Réduire le poids des pages clés (Accueil, Services, Contact).
- Mesurer l’impact réel sur l’usage et les conversions.
Diagnostic initial
- LCP : image principale trop lourde et non priorisée.
- INP : scripts chargés globalement, même lorsqu’ils n’étaient pas utilisés.
- CLS : variations légères liées aux images sans dimensions définies.
- Architecture : sections Gutenberg riches mais empilées sans hiérarchie de chargement.
Approche mise en place
L’optimisation a été réalisée par couches successives, avec des tests PageSpeed Insights à chaque étape. L’objectif était d’améliorer le ressenti réel sur mobile, pas uniquement le score.
1) Optimisation des images et du LCP
- Remplacement de l’image principale par une version optimisée (WebP).
- Définition explicite des dimensions pour éviter les décalages visuels.
- Priorisation de l’image LCP au chargement.
2) Chargement conditionnel des scripts
- Désactivation de scripts tiers sur les pages qui n’en avaient pas besoin.
- Report du chargement de certains JS non critiques.
- Nettoyage de blocs Gutenberg inutilisés.
3) Cache et réseau
- Mise en place d’un cache page adapté au site vitrine.
- Activation d’un CDN lorsque pertinent pour les ressources statiques.
- Vérification des en-têtes de cache navigateur.
4) Mesure et suivi
- Suivi des Core Web Vitals via PageSpeed Insights et Search Console.
- Contrôle GA4: taux d’engagement, temps moyen, actions clés.
- Comparaison avant / après sur les pages stratégiques.
Exemple technique : prioriser l’image LCP (WordPress)
Exemple simple pour ajouter fetchpriority= »high » sur l’image mise en avant. À adapter selon le thème et la structure.
<?php
/**
* Ajoute fetchpriority="high" à l'image mise en avant.
*/
add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment) {
if (!empty($attr['class']) && strpos($attr['class'], 'wp-post-image') !== false) {
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 2);Exemple technique : lazy loading contrôlé pour les images secondaires
Assure que seules les images hors écran utilisent le lazy loading.
<?php
/**
* Force le lazy loading sur les images non critiques.
*/
add_filter('wp_get_attachment_image_attributes', function ($attr) {
if (empty($attr['fetchpriority'])) {
$attr['loading'] = 'lazy';
}
return $attr;
});Résultats observés
- Amélioration nette du LCP sur mobile.
- Interaction plus fluide et réduction du délai au premier clic.
- Pages principales plus légères et plus rapides à afficher.
- Meilleur taux d’engagement sur mobile dans GA4.
Points clés à retenir
- La performance mobile dépend surtout de quelques éléments critiques bien traités.
- Optimiser le LCP apporte un gain immédiat sur le ressenti utilisateur.
- Les Core Web Vitals sont utiles lorsqu’ils sont suivis dans la durée, page par page.
