Comment ajouter facilement le chargement paresseux pour les vidéos dans WordPress

Les vidéos sont idéales pour améliorer l’engagement des utilisateurs/utilisatrices sur votre site. Cependant, l’un des inconvénients du Contenu embarqué des vidéos est qu’il ralentit votre site. Dans cet article, nous allons vous afficher comment ajouter le lazy loading pour les vidéos dans WordPress et améliorer la vitesse de votre page.

Comment fonctionne le chargement paresseux des vidéos ?

Vous vous demandez ce qu’est exactement le chargement paresseux et comment il fonctionne ?

Lorsque vous intégrez une vidéo sur votre site, vous ajoutez des scripts et des fichiers externes supplémentaires qui doivent être chargés. Comme il y a plus de choses à charger, votre site se charge plus lentement.

Le chargement paresseux des vidéos remplace les vidéos Embarqué de YouTube et Vimeo par une image de prévisualisation cliquable. Lorsque vos internautes cliquent sur l’image, la vidéo se charge et est lue.

Les images étant beaucoup moins volumineuses que les vidéos, la technique de chargement paresseux améliore considérablement la vitesse de chargement des pages.

Maintenant que vous en connaissez les avantages, voyons comment charger paresseusement des vidéos YouTube et Vimeo dans WordPress.

Tutoriel vidéo

Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, alors continuez à lire.

Comment ajouter le chargement paresseux pour les vidéos dans WordPress

La première chose à faire est d’installer et d’activer l’extension Lazy Load for Videos.

Cette extension fonctionne d’emblée, et vous n’avez pas besoin de modifier les scripts jQuery de chargement paresseux ou tout autre code d’ailleurs.

Pour vérifier que le chargement paresseux fonctionne, il vous suffit de voir une publication ou une page contenant une vidéo YouTube ou Vimeo. Vous remarquerez que les lecteurs par défaut sont remplacés par une miniature de vidéo et un bouton de lecture.

Lorsque vous cliquez sur l’image, la vidéo est chargée et lue.

Il peut y avoir un léger retard (négligeable) dans le chargement de la vidéo, veuillez donc ne pas penser que le chargement paresseux ne fonctionne pas.

Même si cette extension est prête à l’emploi, il y a encore des réglages que vous pouvez configurer en fonction de vos besoins.

Sur l’écran de l’éditeur de publication, vous pouvez choisir la qualité de la miniature pour les incorporations de vidéos YouTube.

Outre la qualité des miniatures, d’autres options de personnalisation sont disponibles si vous vous rendez dans Réglages  » Chargement paresseux pour les vidéos.

Dans l’onglet des paramètres généraux, vous pouvez personnaliser l’apparence des miniatures vidéo. Vous pouvez activer le mode responsive, choisir le style du bouton de lecture, utiliser des CSS personnalisés et même personnaliser le balisage schema.org.

Cette extension supporte à la fois YouTube et Vimeo. Vous pouvez trouver les réglages spécifiques au fournisseur en cliquant sur les onglets respectifs.

Dans l’onglet YouTube, vous pouvez choisir les couleurs, la qualité des miniatures, désactiver les vidéos similaires et les annotations, etc. Vous pouvez même désactiver le chargement paresseux pour les vidéos YouTube.

De même, dans l’onglet Réglages Vimeo, vous pouvez choisir les couleurs de contrôle, masquer ou afficher le titre de la vidéo et désactiver le chargement paresseux pour les vidéos Vimeo.

C’est tout. Nous espérons que cet article vous a aidé à ajouter le lazy load pour les vidéos dans WordPress.

Pour améliorer encore la vitesse de votre site, vous devrez configurer une solution CDN WordPress avec l’ extension W3 Total Cache.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Google+.