Contexte
Une PME basée à Delémont utilisait un site WordPress comme vitrine principale, avec des pages services et quelques pages de campagne. Sur mobile, la sensation de lenteur augmentait, et certaines pages dépassaient facilement plusieurs mégaoctets, surtout à cause des images et de scripts chargés partout. L’objectif était d’améliorer la performance réelle (Core Web Vitals) sans refonte, avec des optimisations mesurables et durables.
Objectifs
- Réduire le poids des pages, en particulier l’impact des images.
- Améliorer le LCP sur les pages d’entrée les plus consultées.
- Limiter les scripts tiers aux pages où ils sont utiles.
- Mettre en place un cache efficace et stable.
- Mesurer l’avant/après avec PageSpeed Insights, Core Web Vitals et GA4.
Diagnostic initial
- Images : plusieurs visuels non dimensionnés, formats lourds, absence de variantes adaptées mobile.
- Hero : image principale trop grande et chargée trop tôt sur certaines pages.
- Scripts : widgets et trackers chargés sur toutes les pages, même inutiles.
- Cache : réglages partiels, pas d’optimisation cohérente des assets.
Optimisations réalisées
1) Images: format, tailles, priorité
- Conversion des images principales en WebP et nettoyage de la médiathèque.
- Définition de tailles cohérentes pour éviter le surchargement (desktop vs mobile).
- Priorisation de l’image LCP (si pertinente) et lazy-load sur le reste.
2) Cache et assets
- Mise en place d’une stratégie cache (page cache + navigateur) et purge contrôlée.
- Optimisation CSS/JS: différer ce qui peut l’être, sans casser les interactions.
- Activation CDN selon le besoin (Cloudflare) pour améliorer la livraison.
3) Scripts tiers: charger seulement où nécessaire
- Déplacement de certains scripts vers les pages concernées (contact, campagne).
- Réduction du nombre de tags actifs et simplification des intégrations.
- Contrôle de l’INP en évitant des scripts bloquants sur mobile.
4) Contrôles et suivi
- Mesures PageSpeed Insights avant/après sur 3 pages d’entrée.
- Suivi Search Console (signaux CWV) et rapports GA4 (engagement mobile).
- Ajout d’un monitoring disponibilité pour éviter les régressions silencieuses.
Exemple technique : servir WebP via WordPress (filtre)
Exemple simple pour privilégier WebP si disponible, en gardant un fallback.
<?php
add_filter('wp_generate_attachment_metadata', function ($metadata) {
// Place pour une pipeline image (plugin ou traitement serveur).
return $metadata;
});Exemple technique : précharger l’image LCP (si stable)
À utiliser seulement si l’image LCP est fixe et identifiée, sinon risque d’effet inverse.
<?php
add_action('wp_head', function () {
if (!is_front_page()) return;
$lcp = 'https://www.exemple.ch/wp-content/uploads/hero.webp';
echo '<link rel="preload" as="image" href="' . esc_url($lcp) . '" fetchpriority="high">' . "\n";
}, 1);Exemple technique : décharger un script tiers hors pages ciblées
Réduit le coût JS global, souvent bénéfique pour l’INP.
<?php
add_action('wp_enqueue_scripts', function () {
// Exemple: ne charger un script que sur la page contact
if (!is_page('contact')) {
wp_dequeue_script('exemple-widget');
wp_dequeue_style('exemple-widget');
}
}, 99);Résultats observés
- Pages sensiblement plus légères, surtout sur mobile.
- LCP amélioré sur les pages d’entrée, avec une sensation de rapidité plus cohérente.
- Moins de scripts inutiles, donc une meilleure stabilité des interactions.
- Base d’exploitation plus saine: cache, monitoring et routine de contrôle.
Points clés à retenir
- Les images et scripts tiers expliquent souvent la majorité du problème, avant toute refonte.
- Le cache est utile quand il est cohérent et testé après chaque mise à jour.
- Limiter le chargement global améliore l’expérience mobile et la conversion.
