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

Lors de l'optimisation des sites Web clients, nous constatons souvent que les vidéos intégrées sont une cause majeure de lents temps de chargement des pages. Le problème est que les navigateurs chargent l'intégralité du lecteur vidéo immédiatement, même si un visiteur ne clique jamais sur le bouton de lecture, ce qui peut vraiment nuire aux performances de votre site.

La solution est le chargement différé des vidéos. Cette technique simple remplace les intégrations vidéo lourdes par une image d'aperçu légère. Nous avons constaté que cela peut améliorer les temps de chargement des pages jusqu'à 30 % sur les pages contenant de nombreuses vidéos.

Si vous souhaitez accélérer votre site WordPress sans supprimer votre contenu vidéo, vous êtes au bon endroit. Nous allons vous montrer les moyens les plus simples et les plus efficaces d'ajouter le chargement différé pour vos vidéos.

Qu'est-ce que le chargement différé pour les vidéos et comment cela fonctionne-t-il ?

Le chargement différé est une technique d'amélioration des performances qui retarde le chargement des parties non essentielles d'une page Web jusqu'à ce qu'elles soient réellement nécessaires.

Normalement, lorsque vous intégrez une vidéo à partir d'un site comme YouTube ou Vimeo, votre navigateur doit charger l'intégralité du lecteur vidéo et tous ses scripts associés. Cela ajoute un poids supplémentaire à votre page et peut vraiment ralentir les performances de votre site Web.

Le chargement différé des vidéos résout ce problème en remplaçant le lecteur vidéo lourd par une image d'aperçu légère et cliquable (une miniature). Le lecteur vidéo complet ne se charge qu'après qu'un visiteur a cliqué sur le bouton de lecture de l'image.

Comme les images sont beaucoup plus petites que les vidéos, la technique de chargement différé améliore considérablement la vitesse de la page.

Maintenant que vous connaissez les avantages, regardons comment charger de manière différée les vidéos YouTube et Vimeo dans WordPress.

Tutoriel vidéo

S'abonner à WPBeginner

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

Comment ajouter le chargement différé pour les vidéos dans WordPress

Pour ajouter le chargement différé pour les vidéos, la première chose à faire est d'installer et d'activer le plugin Lazy Load for Videos.

Ce plugin fonctionne immédiatement et vous n'aurez pas à toucher une seule ligne de code.

Et pour voir si votre chargement différé fonctionne, il vous suffit de consulter un article ou une page contenant une vidéo YouTube ou Vimeo. Vous remarquerez qu'une miniature de la vidéo et un bouton de lecture remplacent les lecteurs par défaut.

Lorsque vous cliquez sur l'image, la vidéo se charge et se lance.

Vous pourriez remarquer un bref délai d'une seconde lorsque la vidéo se charge, mais c'est tout à fait normal. Ne vous inquiétez pas ; le chargement différé fonctionne parfaitement.

Notez que même si ce plugin fonctionne immédiatement, il existe toujours des paramètres que vous pouvez configurer en fonction de vos besoins. Sur l'écran de l'éditeur d'articles, vous pouvez choisir la qualité de la miniature pour les intégrations de vidéos YouTube.

Outre la qualité de la miniature, d'autres options de personnalisation sont disponibles.

Vous pouvez vous rendre dans Paramètres » Lazy Load for Videos pour vérifier et réajuster ces options.

Sur l’onglet « Général/Style », vous pouvez personnaliser l’apparence des miniatures vidéo. Vous pouvez activer le mode adaptatif, choisir le style du bouton de lecture, utiliser du CSS personnalisé et même activer le balisage schema.org.

Ce plugin prend en charge YouTube et Vimeo. Vous pouvez trouver les paramètres spécifiques au fournisseur en cliquant sur les onglets respectifs.

Sur l’onglet « YouTube », vous pouvez choisir une couleur pour la barre de progression, désactiver les cookies, masquer les annotations, et plus encore. Vous pouvez même désactiver le chargement différé pour les vidéos YouTube.

De même, dans l'onglet des paramètres de Vimeo, vous pouvez choisir les couleurs de contrôle, masquer ou afficher le titre de la vidéo, et désactiver le chargement différé pour les vidéos Vimeo.

Si vous avez apporté des modifications à ces paramètres, n'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » en bas pour ne pas perdre votre progression.

WordPress a-t-il le chargement différé intégré pour les vidéos ?

Vous vous demandez peut-être si vous avez besoin d'un plugin pour cela, et c'est une excellente question. Depuis la version 5.5, WordPress ajoute automatiquement une forme basique de chargement différé aux vidéos. Il indique au navigateur web d'attendre que la vidéo soit proche de l'écran avant de la charger.

Cependant, la méthode du plugin reste beaucoup plus efficace pour la vitesse. Le plugin empêche le lecteur vidéo lourd de se charger du tout jusqu'à ce qu'un visiteur clique réellement sur le bouton de lecture. La méthode intégrée de WordPress charge toujours le lecteur entier, juste un peu plus tard.

Pour le plus grand gain de vitesse, l'utilisation d'un plugin qui remplace la vidéo par une miniature d'aperçu est la meilleure approche. 👍

Bonus : Intégrez toujours les vidéos, ne les téléchargez jamais

Avant de plonger dans les raisons pour lesquelles vous devriez éviter de télécharger des vidéos sur votre site WordPress, clarifions la différence entre les téléchargements et les intégrations.

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

D'autre part, intégrer une vidéo implique d'abord de la télécharger sur un site tiers comme YouTube. Vous intégrez ensuite la vidéo sur votre blog, ce qui permet de la visionner sur votre site web tout en étant stockée ailleurs. Nous recommandons vivement d'intégrer les vidéos chaque fois que possible.

Pour en savoir plus sur les avantages de l'intégration plutôt que du téléchargement de vidéos sur WordPress, vous pouvez vous référer à notre guide sur pourquoi vous ne devriez jamais télécharger une vidéo sur WordPress.

Questions fréquemment posées sur le chargement différé des vidéos

Voici quelques-unes des questions les plus courantes que nos lecteurs se posent sur l'ajout du chargement différé pour les vidéos dans WordPress.

1. WordPress charge-t-il les vidéos par défaut en différé ?

Oui, depuis la version 5.5, WordPress inclut le chargement différé natif pour les vidéos. Cependant, il attend simplement de charger le lecteur vidéo jusqu'à ce qu'il soit proche de l'écran. L'utilisation d'un plugin qui remplace la vidéo par une miniature est beaucoup plus efficace pour améliorer la vitesse.

2. Is lazy loading good for SEO?

Oui, le chargement différé est excellent pour le SEO. La vitesse du site est un facteur clé de classement de Google. En accélérant vos pages, le chargement différé aide à améliorer vos scores Core Web Vitals, ce qui peut conduire à de meilleurs classements dans les moteurs de recherche.

3. Le chargement différé des vidéos affectera-t-il mes vues YouTube ou Vimeo ?

Non, cela n'affectera pas vos nombres de vues. Lorsqu'un visiteur clique sur le bouton de lecture de l'image d'aperçu, le lecteur vidéo officiel se charge. La vue est alors comptabilisée par YouTube ou Vimeo comme elle le ferait normalement.

4. Quel est le meilleur plugin pour le chargement différé des vidéos ?

Nous recommandons le plugin « Lazy Load for Videos » pour sa simplicité et son efficacité. De nombreux plugins de performance populaires, tels que WP Rocket, incluent également d'excellentes fonctionnalités de chargement différé des vidéos dans le cadre de leurs outils d'optimisation de performance.

Ressources supplémentaires pour accélérer votre site

Nous espérons que cet article vous a aidé à ajouter le chargement différé pour les vidéos dans WordPress. Si vous souhaitez découvrir d'autres moyens de rendre votre site Web plus rapide, nous vous recommandons de consulter ces guides :

• Le guide ultime pour la vitesse et la performance de WordPress – Ce guide complet couvre tout ce que vous devez savoir sur l'optimisation de la vitesse de votre site, du cache à la compression d'images.
• Comment configurer correctement un CDN WordPress – Découvrez comment un réseau de diffusion de contenu (CDN) peut améliorer considérablement les temps de chargement de votre site pour les visiteurs du monde entier.
• Pourquoi vous ne devriez jamais télécharger une vidéo sur WordPress – Une analyse approfondie des raisons pour lesquelles l'intégration de vidéos est toujours préférable pour les performances de votre site et l'expérience utilisateur.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.