Accélérer le chargement de vos pages vidéos avec Lazy Load for Videos

Les vidéos ont surpassées les images, et aujourd’hui les vidéos sont devenues parties prenantes dans une grande majorité de blogs ou sites WordPress.

Lorsque vous intégrez des vidéos qui font appels à des cripts externes, cela peut sensiblement ralentir votre site. C’est particulièrement vrai lorsque les vidéos ne peuvent être mis en cache et qu’il est impossible d’avoir le contenu en question sur votre propre site, je veux parler des vidéos tiers de Youtube et Vimeo.

Dans ces cas il est inévitable d’avoir recours à des ressources externes, mais cela ne doit pas ralentir le temps de chargement de votre site pour autant.

Les vidéos ralentissent le chargement de vos pages

 Lazy Load for Videos

Lazy Load For Videos : Le plugin qui apporte la solution

Lazy Load for Videos est un plugin, créé par Kevin Weber, pour accélérer les sites qui font fortement appel au contenu vidéo. Vous avez probablement déjà vu fonctionner Lazy Load pour les images, vous faites défiler la page et l’image apparaît dès que cela est nécessaire. Lazy Load for Videos apporte ce concept de chargement, aux vidéos.

Au lieu de stocker toutes les vidéos sur votre site, le plugin remplace l’appel à Youtube et Vimeo par un aperçu de la vidéo sous forme d’image cliquable. Les vidéos ne sont chargées que lorsque le visiteur clique sur le bouton de lecture de l’image affichée, pour lire la vidéo. Lazy Load for Videos utilise jQuery pour charge les vidéos, ce qui fait qu’aucun code JavaScript supplémentaire n’est nécessaire.

image d'aperçu vidéos

Une démonstration est disponible sur ​​la page d’accueil de Lazy Load for Videos.

[button-blue url= »https://wordpress.org/plugins/lazy-load-for-videos/ » target= »_blank » position= »center »]Téléchargez Lazy Load for Videos[/button-blue]

Kevin Weber a effectué un test de vitesse, à l’aide de Network Panel de Chrome DevTools, qui enregistre l’heure à laquelle chaque ressource est demandée. Cette image montre les fichiers qui sont chargés lorsque le plugin n’est pas en cours d’utilisation et qu’une vidéo Youtube est intégrée.

avant lazy load vidéos

L’image ci-dessous montre les fichiers qui sont chargés lorsque le plugin est en cours d’utilisation et qu’un vidéo Youtube est embarquée:

après lazy load vidéos

Une comparaison rapide montre une réduction de 50% de la taille des ressources demandées et le temps de latence, avec une diminution de près de deux secondes du temps de chargement. Cela représente une amélioration sensible alors qu’une seule vidéo est intégrée. Vous pouvez imaginer les économies sur une galerie vidéos, lorsque le site doit charger les scripts vidéo de YouTube, sur toute la page.

Parmi les fonctionnalités actuelles, il y a:

  • Affichage du titre de la vidéo sur des images d’aperçu
  • Ajout de CSS personnalisé via le panneau d’options du plugin
  • Masque les commandes du lecteur vidéos de Youtube
  • Prise en charge des vidéos dans les widget texte (Youtube seulement)
  • Choix de la taille de la miniature (standard ou couverture)
  • Choix entre deux couleurs pour le lecteur Youtube (clair ou foncé)
  • Choix entre deux couleurs pour la barre de progression du lecteur de vidéo Youtube afin de mettre en évidence la taille de la vidéo que le spectateur a déjà vu (rouge ou blanc)
  • Désactivation des vidéos similaires à la fin des vidéos

Dans un proche avenir, Kevin Weber inclura des options de personnalisation du lecteur de vidéos Vimeo. Il ajoutera également un bouton de lecture CSS, uniquement pour améliorer encore la vitesse de chargement de la page.

Parmi les suggestions des utilisateurs, pour de futures améliorations, la possibilité de choisir entre plusieurs boutons « Play », télécharger votre propre « bouton de lecture », et la possibilité d’ajouter des images personnalisées pour la prévisualisation de la vidéo.

Non content d’accélérer votre site, Lazy Load for Videos fournit également une multitude d’options de personnalisation. Si vous avez un site qui fait appel au contenu intégré de Youtube ou Vimeo, téléchargez Lazy Load for Videos depuis WordPress.org et sans aucun doutes, vous augmenterez les performances de votre site.

[button-blue url= »https://wordpress.org/plugins/lazy-load-for-videos/ » target= »_blank » position= »center »]Téléchargez Lazy Load for Videos[/button-blue]

Partagez cet article pour que d’autres en profitent, Merci!

Publié à l'origine le : 14 octobre 2014 @ 10 h 20 min

Pour compléter votre lecture.