Aujourd'hui je vous donne le design idéal pour créer votre blogue des vidéos. En effet, avec le nombre de contenu que Prositeweb publie sur Youtube, nous avons jugé nécessaire de faire bénéficier nos visiteurs. Pour cette raison, nous avons créé une page uniquement dédiée aux vidéos (vlog). Le but de cet article est de faire bénéficier du thème que nous avons conçu. Par la même occasion, nous voulons soulever l'impact des ifs rames sur la performance des sites Internet.

Comment créer son vlog (blogue vidéo)?

Si vous combinez articles, vidéos et/ou podcast pour informer votre audience, vous êtes certainement conscient de la portée des vidéos. Pour créer son vlog, vous avez 3 possibilités:
  1. Mettre vos videos sur les plateformes d'hébergement des vidéos telles que YouTube ou Vimeo. Une fois que c'est fait, utilser les iFrames pour ajouter sur votre votre site.
  2. Heberger vos videos sur les plateformes de vidéos (Youtube ou Vimeo). Faire appel à leur API pour récuperer les contenus pour votre site.
  3. Héberger vous même vos vidéos.
Chaque approche à ses avantages et ses inconvénients que nous allons élaborer ci-dessous.

Utilisation des iFrames pour ajouter les vidéos sur votre site

Un iFrame de façon basique est une balise HTML qui permet d'intégrer une page HTML au sein d'un autre HTML. Pour plusieurs propriétaires de sites, c'est la méthode facile pour avoir le contenu d'un site tierce sans trop de programmation.Dans le cadre de notre projet, nous avons envisagé cette éventualité. Mais, avec un peu de récul et d'analyse, c'est une mauvaise option pour plusieurs raisons:
  • Un iframe comporte des fichiers CSS et JavaScript qui rendent votre page plus lourde.
  • Le temps de chargement des pages son quasiment triplé
  • Si la source externe n'est pas assez sécurisé, les iframes peuvent constituer une faille de sécurité.
Afin de mieux vous expliquer l'impact des iframes, nous avons par exemple créer deux pages avec le même contenu vidéo venant de Youtube. La principale différence entre ces pages est que l'un utilise un iframe et l'autre la librairie de javaScript avec un Popup.

Cas 1 - Page video sans iframe avec popup

Dans le cadre de notre projet, en ajoutant un video a nos pages sans iframe, on avait un temps de chargement rélativement plus bas. Et la proportion s'envoisinnait pratiquement à 1/3 de temps des page avec iframes. Pour mieux vous démontrez, nous avons créer une page test que nous avons analysez via GTmetrix. Après analyse de la page, nous avons le resultat illustré sur la page ci-dessous. sans iframe via cette analyse, on peut remarque 3 choses:
  • Le temps de chargement de la page est 0.9 secondes (ce qui est relativement bon)
  • Le nombre de réquête pour cette page est 9
  • Les paramêtres PageSpeed et Yslow sont assez élevés
Via ce resultat, on peut être ammené à penser que la vidéo n'a pas un grand impact sur la performance de la page.

Cas 2 - Même contenu vidéo avec l'iFrame

Pour le même contenu vidéo (vidéo Youtube), nous avons refait la même expérience. Cependant, plutôt que d'utiliser le poppup, on a fait usage du iframe. Ci-dessous le rapport de performance obtenu.avec iframeComme pouvez le remarquer les resultats sont complètement différents:
  1. le temps de chargement est 13.1 sécondes. Ce resultat est 13 fois plus que le cas sans iframe
  2. Le nombre de réquête (Resquests) est 25. Cela implique qu'on a plus de 16 liens qui se sont ajouté avec l'iframe.
  3. Les paramètres Yslow et pageSpeed sont plus bas.
 

Replacer les iframes par les popups

Il est evident que les iframes on un impact sur la perfomance des sites internet. Pour être en mesure d'améliorer la performance, l'approche sera de remplacer les iframes par les popups utilisant javascript. Pour être en mesure de réaliser cela, voici les étapes à suivre.
  • Télecharger le librairie JavaScript pour le popup en cliquant sur ce lien.
  • Inclure le code javascript dans le bas de la page du site comportant les vidéos.  (Voir le code)
  • Ajouter le fichier CSS dans la tête de la page du site comportant la vidéos (Voir le code)
  •  remplacer le iframe par le code ci-dessous. (Remplacer la l'URL dans la balise a par l'URL de sa vidéo)
<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Meta -->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--  Ajouter le code CSS dans l'entête du site contenant la vidéo comme -->
	
	<link rel="stylesheet" href="dist/style.css">
	
</head>

<body class="js-preload-me">

	<div class="page js-page ">

		<div class="content content--bottom">
			<div class="container">
				<div class="row">
					<div class="col-md-24">
						<h1 class="article__title">Remplacement du iframe par e popup </h1>
					</div>
				</div>
				<div class="row">
					<div class="col-md-17">
						<article class="thumb-video mb50">
							<a href="https://www.youtube.com/watch?v=ltfJrHs8SSU" class="thumb-video__link js-modal-video">
								<img src="https://www.prositeweb.ca/wp-content/uploads/2019/10/IFRAME-e1571154640833.jpg" class="thumb-video__image smush-detected-img smush-image-1" alt="Créez votre vlog(blogue vidéo) sans utiliser de iframe">
								<span class="thumb-video__button">
								<i class="fa fa-play" aria-hidden="true"></i>
								</span>
							<!--	<span class="thumb-video__time ">19:30</span> -->
							</a>
						<h4 class="thumb-video__title">Créez votre vlog(blogue vidéo) sans utiliser de iframe</h4>
						</article>
		
					</div>
				</div>
			</div>
		</div>
	
	</div>
	<!--  Ajouter le code JS dans le pied  du site contenant la vidéo comme -->
	<script src="dist/script.js"></script>
</body>

</html>