Intégrer des vidéos à mon site va-t-il le ralentir ?

Oui, tout élément ajouté à votre site web tend à avoir un impact sur le temps de chargement de vos pages web. La question est donc de savoir, lorsque du contenu vidéo est ajouté à votre site web, quels sont les problèmes associés à l'optimisation des pages web et comment les combattre. Dans cet article, nous examinerons en détail les facteurs qui influent sur les temps de chargement et nous verrons comment résoudre ces problèmes en 6 étapes simples.

‍

Facteurs vidéos contribuant à la vitesse de chargement d'un site web

Examinons plus en détail les quatre facteurs clés qui peuvent entraver la vitesse de chargement de vos pages :

1) Durée de la vidéo

Il va sans dire que, par rapport aux vidéos de longue durée, quelle que soit la résolution, plus le contenu est court (60 secondes ou moins), plus la taille du fichier sera faible par rapport à celle d'une vidéo de longue durée. Dans tous les cas, gardez-en tête que les vidéos de 20 à 40 secondes obtiennent un engagement plus grand sur les pages produits d'un site marchand.

2) La résolution

Le deuxième élément à garder à l'esprit est la résolution. Plus la résolution est élevée, plus le fichier est volumineux. Une bonne pratique étant de légèrement baisser la résolution sur mobile, étant donné que les écrans sont plus petits (donc moins de pixels sont nécessaires). Pour des vidéos courtes, une résolution en 720p fera largement l'affaire. Évitez le HD.

3) Où est hébergé le fichier de streaming, et comment il est chargé

Vous pouvez héberger vos vidéos vous-même sur vos propres serveurs, mais vos fichiers vidéo seront toujours lourds si vous ne les optimisez pas. En général, les plateformes vidéo tierces sont optimisées pour obtenir le meilleur rendu pour votre vidéo : elles compressent les fichiers vidéo, les optimisent, etc. Le fichier vidéo est prêt à être "appelé" (c-a-d "apparaitre") sur une page, mais cet appel peut prendre un certain temps en fonction des autres éléments appelés.

4) Audio

Outre la longueur de la vidéo et sa résolution, le son associé à la vidéo a également un impact sur la vitesse de la page. Bien qu'il n'ait pas d'impact significatif, il ajoute un petit poids à l'ensemble des JS qui sont exécutés sur le site web.

‍

Les soucis liés à l'utilisation des vidéos "embed"

Lorsqu'il s'agit d'intégrer du contenu vidéo sur un site web, l'un des problèmes les plus courants est qu'il ajoute de nouveaux éléments à charger, en plus de ceux déjà présents (images, scripts, textes, chatbot, popups, bannières, etc.). Une certaine expertise technique pour garantir non seulement un comportement approprié des éléments, mais aussi des performances optimales sur les différents appareils, est donc nécessaire. Les vidéos intégrées, lorsqu'elles ne sont pas correctement optimisées, peuvent entraîner des problèmes de décalage cumulatif de la mise en page (CLS), ce qui a un impact sur la stabilité visuelle du site web, surtout pour les visiteurs ayant une faible connexion.

Il est important de rappeler que l'ajout de vidéos à un site e-commerce a pour but de booster l'engagement et les ventes. Cela explique l'importance d'avoir des vidéos optimisées, afin d'offrir la meilleure expérience utilisateurs, et donc d'augmenter le taux de conversion.

‍

Comment vérifier la vitesse d'un site web

D'après les recherches effectuées, on peut déduire qu'une bonne page web nécessite moins de 300 Kib de JavaScript injecté pour faire apparaitre les vidéos. Toute valeur supérieure implique que le temps de mise en mémoire tampon de vos vidéos peut augmenter de manière significative, ce qui crée une mauvaise expérience pour l'utilisateur, qui peut être amené à quitter la vidéo immédiatement.
Google, ou autres navigateurs, vous pénaliseront probablement pour cela.

Exemples de mauvaises pratiques

Vous trouverez ci-dessous un exemple d'un lecteur vidéo qui affecte négativement la vitesse des pages web. Le JavaScript appelé par le lecteur vidéo étant de près de 2 000 KiB, cela signifie que les performances globales sont entravées par le contenu vidéo affiché sur le site web et que le chargement peut prendre beaucoup plus de temps.

‍

Étapes d'utilisation de l'outil Page Speed Insights de Google

1. Ouvrez PageSpeed Insights (également comme comme Google Lighthouse)
2. Saisissez l'URL de votre site web
3. Cliquez sur le bouton « Analyser »
4. PageSpeed Insights vous fournira un score et un certain nombre de recommandations pour améliorer la vitesse de votre site
5. Mettez en œuvre les recommandations fournies par PageSpeed Insights
6. Relancez PageSpeed Insights pour voir si la vitesse de votre site web s'est améliorée

Les résultats devraient ressembler à ceci, avec le JavaScript demandant moins de 100 KiB pour charger le contenu vidéo, et offrir une expérience agréable aux visiteurs.

‍

‍