Les iframes sont de plus en plus à la mode; car ils permettent d'intégrer le contenu d'un autre site web sur notre site. Comme exemple, si vous voulez ajouter une vidéo Youtube, google Map, une vidéo de Vimeo ou des produits d'Amazon, vous pouvez utiliser les ifs rames. Cependant un iframe sur un site affecte considérablement le temps de chargement des pages. Et comme conséquence, une page web qui aurait pu prendre 2 secondes pour s'afficher prendrait 10 ou même 15 secondes. Dans l'article d'aujourd'hui, nous allons discuter de quelques alternatives aux iframes. Nous allons également voir comment vous pouvez vous servir des outils offerts par la compagnie offrant du contenu pour rendre votre site meilleur.

Comment fonctionnent les iframes?


De façon générale, les iframes aux contenus d'un site externe compresser pour vous permettre d'afficher des informations sur votre site sans avoir à vous soucier de la programmation. D'autre part, c'est un moyen pour des compagnies de vous offrir leur contenu tout en se rassurant d'éviter les failles de sécurité. Finalement (il y'a autres objectifs), les compagnies l'utilisant gagnent en popularité lorsque plusieurs utilisateurs en font usage. En effet, lorsque vous intégrez le contenu d'un site sur votre site en utilisant l'iframe, vous conférez à cette dernière une certaines crédibilités ou notoriété (backlink).

Paramètres des iframes


Si vous avous eu l'occasion de copier un iframe sur les sites tels que YouTube, Google Map ou Amazon, vous remarquerez que c'est dans la balise iframe, écrite sous la forme suivante:
<iframe> .... </iframe>

À l'intérieur de cette balise, nous avons les attributs tels que:

  • src - Qui correspond au lien source de l'information.

  • width - La largeur du iframe. Vous pouvez faire varier la largeur pour la rendre compatible avec les dimensions de votre site.

  • height - La hauteur du iframe. Tout comme l'attribut "width", vous pouvez faire varieur la valuer de la hauteur.

  • Vous trouverez également des attributs tels que - name, sandbox , srcdoc...


Ci-dessous un exemple d'iframe de YouTube.
<iframe width="560" height="315" src="https://www.youtube.com/embed/BRkQ-ZGiNbc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Quelques avantages des iframes


L'utilisation des iframes sur votre site peut procurer plusieurs avantages; à savoir;

  • Ajouter un contenu externe sur n'importe quelle page de votre site sans avoir à se soucier de toutes la programmation derrière. Vous pouvez, par exemple, copier le code de Google Map, YouTube, Vimeo, eBay ou Amazon et coller directement sur votre site pour bénéficier des services.

  • Vous n'avez pas à gérer le droit d'auteur (si l'auteur vous donne l'autorisation). Dans la grande partie des cas, les propriétaires des sites n'ont aucun problème à ce que vous copier leur contenu si vous utilisez leur iframe. En faisant usage de leur contenu sous forme de frame, vous leur offrez de la crédibilité. C'est donc une situation gagnant-gagnant.

  • Pas besoin de compétence technique pour utiliser un frame. Le processus pour copier et coller le contenu via le frame sur son site est simple et très rapide même pour les novices du web. À cet effet, si vous n'avez pas de compétences technique ou des ressources pour payer un développeur, vous pouvez suivre les instructions et ajouter les produits d'Amazon (par exemple) sur votre site.


Quelques inconvenients des iframes


Utiliser les iframes presentent des inconvenients tels que:

  • La réduction de la performance de la page du site. Ajouter un frame sur son site fait grimper le temps de chargement de la page de plus de 12 secondes. Cela dit, si vous avez une page qui prend environ 2 secondes pour s'afficher, vous pourriez voir cette même page prendre 14 à 16 secondes avec un frame,

  • Vous avez moins de contrôle sécuritaire sur votre site. Compte tenu du fait que les frames utilisent javascript et les ressources d'un site externe, il est parfois difficile de contrôler l'aspect sécurité. Le propriétaire du site peut s'il le souhaite se servir de son site pour injecter le votre.

  • Un problème d'ergonomie. Votre site pourrait avoir des difficultés à s'adapter aux types d'écrans de vos visiteurs. Ou alternativement, vous pourriez mettre plus d'effort pour améliorer l'ergonomie.


Quelques alternatives


Veuillez noter que toutes les plateformes web n'offrent pas la possibilité d'utiliser autre chose que les iframes. Si vous êtes intéressé par les ventes des produits d'amazon ou Ebay, vous pourriez ne pas avoir autre choix que d'utiliser les frames. Cependant, dans le mesure du possible, voici quelques alternatives:

L'utilisation des APIs


Les plateformes telles que Vimeo, Google, eBay offrent la possibilité de se servir de leur Interface de programmation(API) pour accéder aux mêmes informations que vous accédez via les iframes. À cet effet, en souscrivant à cette option, vous pourrez faire afficher les informations et conserver la performance de votre site.

JQuery/JavaScript


Si vous n'avez pas accès aux APIs, vous pouvez utiliser JQuery ou JavaScript pour minimiser l'impact de l'iframe sur votre site.

Transfer des données csv/json via FTP


Dans le cas de la vente des produits affiliés particulièrement, le fournisseur peut vous envoyer les données sous un format CSV pour votre site. C'est le cas pour les plateformes telles que CJ Affiliate.

Cas d'étude - Utilisation de jQuery/JavaScript pour afficher les vidéos YouTube et Viméo sur le site


Aujourd'hui je vous donne le design idéal pour créer votre blogue des vidéos. Nous avons créé une page uniquement dédiée aux vidéos (vlog).

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 iframe

Comme 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.

  • 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>