Il existe de nombreuses méthodes pour implémenter le chargement différé sur votre site web. Nous vous invitons à consulter notre classement des meilleurs plugins WordPress compatibles avec le chargement lent.
Le répertoire WordPress propose de nombreux plugins gratuits permettant le chargement différé d'images et de vidéos. Après avoir examiné et testé plusieurs dizaines de plugins, nous en avons identifié deux qui améliorent significativement les performances des sites web. Si le chargement différé vous intéresse, découvrez les options ci-dessous.
Utilisation de WP Rocket (Premium)
WP Rocket est la solution la plus simple pour implémenter le chargement lent des images sur votre site web. De plus, son activation ne prend pas plus d'une minute. LazyLoad est le nom du plugin intégré à WP Rocket pour le chargement différé des images.
Lorsque LazyLoad est activé, WP Rocket arrête immédiatement le chargement différé des images natif de WordPress afin d'éviter tout problème éventuel.
Suivez les étapes ci-dessous pour activer la fonctionnalité LazyLoad de WP Rocket :
- Vous pouvez activer LazyLoad en accédant à Réglages > WP Rocket > Panneau Média dans votre installation WordPress.
- Cliquez sur « Activer pour les images » sous la zone LazyLoad en haut de l'écran.
- Cliquez sur « Enregistrer les modifications » après avoir effectué votre sélection.
Voilà tout ce qui reste à faire. Par conséquent, le chargement des photos sera lent pour les visiteurs.
LazyLoad permet le chargement différé d'éléments HTML supplémentaires, tels que les iframes et les vidéos, contrairement à l'approche native de WordPress. De plus, il utilise le chargement différé pour les images d'arrière-plan si celles-ci sont intégrées directement dans certains composants HTML.
Si vous souhaitez utiliser la fonctionnalité de chargement différé des images native de WordPress, vous pouvez désactiver l'option LazyLoad dans WP Rocket. Cependant, cette nouvelle propriété de chargement n'est pas encore prise en charge par tous les navigateurs. De plus, l'installation de WordPress étant axée sur les photos, LazyLoad de WP Rocket reste la meilleure solution, notamment si votre site web contient de nombreuses images, vidéos et contenus intégrés.
Éléments à prendre en compte lors de l'activation du chargement différé natif de WP Rocket
Bien que WP Rocket ne soit pas automatiquement compatible avec les navigateurs Chrome utilisant le chargement différé natif, vous pouvez activer cette fonctionnalité via une extension. Il en va de même pour les autres navigateurs utilisant le chargement différé natif, même si WP Rocket n'est pas automatiquement compatible.
Grâce à ce plugin utile, vous pouvez garantir les points suivants :
- Chacune de vos photos contiendra la syntaxe HTML essentielle pour utiliser le chargement différé natif ; les navigateurs compatibles avec Chrome utiliseront automatiquement le chargement différé natif ; tous les autres navigateurs utiliseront automatiquement LazyLoad de WP Rocket.
- Vous avez la possibilité de continuer à utiliser notre technologie LazyLoad performante ou de passer à la fonction de chargement différé intégrée à Chrome.
Tout dépend de vous ! Commencez par tester les deux approches sur place, puis choisissez celle qui vous convient le mieux.
Utilisation de a3 Lazy Load (gratuit)
Si vous recherchez une solution gratuite, nous vous recommandons l' extension a3 Lazy Load vidéos sur votre site web .
De plus, cette extension permet le chargement différé des images et vidéos externes. WordPress n'intègre pas cette fonctionnalité.
Vous pouvez installer et activer cette extension depuis votre tableau de bord WordPress. Vous pouvez ensuite personnaliser les paramètres de l'outil.
Étape 2 : Ajuster les paramètres d’image du plugin
Ensuite, accédez à Paramètres > a3 Lazy Load. Sous Activation du chargement différé, vous constaterez que l'extension est activée par défaut après l'installation.
Ouvrez maintenant l'onglet « Chargement différé des images ». Vous pouvez (1) choisir les images du site web dont le chargement doit être différé et (2) prévoir une solution de repli pour les navigateurs web qui refusent JavaScript. Pour les images dont vous ne souhaitez pas différer le chargement, vous pouvez (3) définir une classe CSS :
Les paramètres par défaut activent . Nous vous recommandons vivement de conserver ce paramètre. Créez une classe CSS permettant de désactiver le chargement différé pour certaines images.
Étape 3 : Ajuster les paramètres vidéo du plugin
L'onglet « Chargement différé des vidéos et des iframes » est l'étape suivante. Grâce à a3 Lazy Load, vous pouvez activer le chargement différé pour certains clips, comme pour les images.
Le plugin permet l'intégration de vidéos dans (1) le contenu et les widgets et fournit (2) une fonctionnalité de repli pour les navigateurs qui ne prennent pas en charge JavaScript :
Vous pouvez spécifier une classe CSS dans les paramètres vidéo (3) pour exclure certaines vidéos du chargement différé. Pour une configuration plus simple, utilisez la même classe que celle choisie dans la section images.
Plus de plugins de chargement différé pour WordPress
Outre WP Rocket et a3 Lazy Load, plusieurs plugins utiles pour le chargement différé sont disponibles et peuvent être envisagés :
- Chargement différé pour les vidéos
- BJ Lazy Load
- Charger plus de produits pour WooCommerce
- Défilement infini WordPress – Chargement Ajax
- Chargement conditionnel Disqus
- Chargement différé des commentaires
Réflexions finales
Il est essentiel de prendre en compte tout conflit potentiel lors de la mise à jour ou de la modification de votre site web. Consultez cette liste de problèmes fréquents liés au chargement différé si vous constatez que l'activation de cette fonctionnalité a rendu une partie de votre site web inutilisable.
Des incompatibilités peuvent survenir si la fonction de chargement différé n'est pas appliquée aux images importées par des extensions comme Revolution Slider et Envira Gallery. La liste complète des extensions compatibles est disponible ici.
Cet article, ainsi que beaucoup d'autres, est disponible sur le blog de Seahawk Media .
