Comment implémenter le chargement différé pour les images et les vidéos dans WordPress
Pourquoi le chargement différé est important
Sans chargement différé, tous les médias d'une page se chargent immédiatement, même s'ils ne sont pas encore visibles à l'écran. Cela entraîne :
- Poids de page plus élevé
- Temps de chargement initial plus long
- Résultats de performance inférieurs dans PageSpeed Insights
Le chargement différé résout ce problème en chargeant uniquement les médias lorsque l'utilisateur fait défiler la page. Cela améliore la vitesse et économise la bande passante.
Chargement différé des images dans WordPress
Depuis la version 5.5, WordPress ajoute automatiquement le chargement="paresseux" Attribut aux images insérées via l'éditeur. Aucun plugin n'est requis pour l'activer.
Comment vérifier si cela fonctionne :
- Cliquez avec le bouton droit sur une image → Inspecter l'élément
- Rechercher:
<img src="..." loading="lazy"> - Si l'attribut est manquant, vérifiez le balisage de l'image de votre thème ou utilisez un plugin
Conseil:
Certains thèmes plus anciens remplacent ou suppriment chargement="paresseux"Dans ce cas, vous pouvez l'ajouter manuellement via des filtres ou passer à un thème moderne.
Chargement différé pour YouTube et les vidéos
Les iframes et les vidéos intégrées sur YouTube peuvent ralentir considérablement la vitesse de chargement des pages. Utilisez les méthodes suivantes :
- Utilisez une image d'aperçu (affiche) et chargez l'iframe uniquement au clic
- Des plugins comme WP YouTube Lyte ou Chargement différé pour les vidéos
- Utilisez une miniature légère et remplacez-la par une iframe de manière dynamique à l'aide de JavaScript
Exemple d'espace réservé HTML :
Plugins de chargement différé recommandés
- a3 Chargement différé – Léger et configurable
- WP Rocket (Premium) – Chargement paresseux complet des médias avec optimisation
- Perfmatters – Inclut le chargement différé et le gestionnaire de scripts
Problèmes potentiels à surveiller
- Images ou vidéos « apparaissant » trop tard – utilisez un espacement approprié
- Les moteurs de recherche ne voient pas les médias : les robots d'exploration modernes prennent en charge le chargement paresseux, mais vérifient le contenu critique
- Supports cassés pour les anciens navigateurs : testez la solution de secours si nécessaire
Test des performances du chargement différé
- Utiliser Informations sur la vitesse des pages → voir le temps de chargement de l'image réduit
- Chrome DevTools → Réseau → filtrer par média → faire défiler et observer le comportement de chargement
Vous voulez que ce soit bien fait ?
Le chargement paresseux est simple mais puissant. Laissez SpeedWP Pro vérifier votre site WordPress pour les problèmes de gonflement des médias, de chargement paresseux et de bloqueurs cachés, le tout dans un seul audit gratuit.