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

Les vidéos sont idéales pour stimuler l’engagement des utilisateurs/utilisatrices sur votre site. Mais le fait de les embarquer peut ralentir le chargement de votre site, ce qui n’est pas très agréable pour les internautes.

Une façon de corriger ce problème est d’utiliser le lazy loading pour vos vidéos.

Le chargement paresseux aide votre site à se charger plus rapidement en chargeant uniquement les vidéos lorsqu’elles sont vues. Ainsi, votre page n’est pas encombrée par le chargement simultané de toutes les vidéos. Il s’agit d’une astuce simple qui peut améliorer les performances de votre site.

Dans ce guide, nous allons vous afficher comment ajouter facilement le lazy loading pour les vidéos dans WordPress.

Qu’est-ce que le chargement paresseux et comment fonctionne-t-il pour les vidéos ?

Le chargement paresseux est une technique qui retarde le chargement des éléments non essentiels d’une page web jusqu’à ce qu’ils soient nécessaires. Pour les vidéos, cela signifie qu’elles se chargent uniquement lorsqu’elles sont vues.

Lorsque vous intégrez une vidéo sur votre site, des scripts et des fichiers externes supplémentaires doivent être chargés. Cette charge supplémentaire peut avoir un impact négatif sur les performances de votre site.

Le chargement paresseux des vidéos aide à remplacer les vidéos YouTube et Vimeo embarquées par une image de prévisualisation cliquable. Lorsque les internautes cliquent sur l’image, la vidéo se charge et se lit.

Les images étant de taille beaucoup plus réduite que les vidéos, la technique du chargement paresseux améliore considérablement la vitesse de la page.

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

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez les instructions écrites, continuez à lire.

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

Pour ajouter le lazy loading pour les vidéos, la première chose à faire est d’installer et d’activer l’extension Lazy Load for Videos.

Cette extension est prête à l’emploi et vous n’avez pas besoin de modifier les scripts ou le code jQuery à chargement paresseux.

Et pour voir si votre chargement paresseux fonctionne, il vous suffit de voir une publication ou une page qui contient une vidéo YouTube ou Vimeo. Vous remarquerez qu’une miniature de vidéo et un bouton de lecture remplacent les lecteurs par défaut.

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

Il se peut que vous notiez un petit décalage d’une seconde lors du chargement de la vidéo, mais c’est tout à fait normal. Ne vous inquiétez pas, le chargement paresseux fonctionne parfaitement.

Maintenant, notez que même si cette extension fonctionne hors de la boîte, 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 contenus vidéo YouTube embarqués.

Outre la qualité des miniatures, d’autres options de personnalisation sont disponibles.

Vous pouvez aller dans Réglages  » Chargement paresseux des vidéos pour vérifier et réajuster ces options.

Dans l’onglet  » Général/Styling « , 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 activer le balisage schema.org.

Cette extension supporte à la fois YouTube et Vimeo. Vous trouverez les réglages spécifiques à chaque fournisseur en cliquant sur les onglets correspondants.

Dans l’onglet « YouTube », vous pouvez choisir la couleur de la barre de progression, désactiver les cookies, masquer 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.

Si vous avez apporté des modifications à ces Réglages, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » en bas de page afin de ne pas perdre votre progression.

Astuce bonus : Ne jamais téléverser de vidéos sur WordPress

Avant de plonger dans les raisons pour lesquelles vous devriez éviter de téléverser des vidéos sur votre site WordPress, clarifions la différence entre les téléversements et les contenus embarqués.

Téléverser une vidéo signifie stocker les fichiers vidéo directement sur votre site, de la même manière que vous stockez les images dans la médiathèque de WordPress. Nous vous le déconseillons vivement.

En revanche, pour Embarquer une vidéo, il faut d’abord la téléverser sur un site tiers comme YouTube. Vous intégrez ensuite la vidéo sur votre blog, ce qui autorise sa vue sur votre site tout en la stockant ailleurs. Nous recommandons vivement d’Embarquer les vidéos chaque fois que cela est possible.

Pour en savoir plus sur les avantages de l’Embarqué au lieu du Téléversé des vidéos sur WordPress, alors vous pouvez vous référer à notre guide sur les raisons pour lesquelles vous ne devriez jamais téléverser une vidéo sur WordPress.

Nous espérons que cet article vous a aidé à ajouter le lazy load pour les vidéos dans WordPress. Ensuite, vous voudrez peut-être consulter notre guide ultime sur la vitesse et les performances de WordPress ou comment configurer une solution CDN WordPress pour booster la vitesse de votre site.

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