Différer le démarrage d'un script javascript (youtube)

Après de longs mois d'absence, d'hibernage web, je vous dévoile l'un de mes secrets les plus fous! Démarrer un script javascript de façon différée par rapport au reste d'une page web. Ce tuto pourra servir à n'importer quel blogueur sous wordpress / dotclear ou autre CMS. Si vous utilisez un plugin pour intégrer des scripts, cette méthode pourrait ne pas fonctionner correctement.

Pourquoi différer le démarrage d'un script? pour faire simple, un site charge un certain nombre d'éléments: le thème, photos, contenus internes, contenus externes, scripts et polices. Lorsque vous intégrez une vidéo youtube sur votre site, comme je le fais dans certains de mes articles, le navigateur doit rechercher des ressources à l'extérieur, en l'occurrence sur les serveurs de youtube. Dès lors que tous les scripts ne sont pas étagés les uns après les autres, le temps de chargement du premier affichage peut prendre longtemps et décourager l'utilisateur.

L'utilisation de la fonction "defer" s'avère donc indispensable pour améliorer le temps de chargement de votre site, indépendamment du poids total de la page et de la rapidité de votre serveur. Notez tout de même, que chaque vidéo Youtube ajoutée alourdit d'environ 1mo votre site web!

Quand vous intégrez une vidéo youtube, elle se présente de cette manière:

<iframe width="560" height="315" src="https://www.youtube.com/embed/0u4EfBerbjQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Nous avons tout d'abord besoin de remplacer src par data-src, puis rajoutez entre les balises iframe, src="". Vous obtenez ainsi le code suivant:

<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/0u4EfBerbjQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

L'étape suivante est de signaler au navigateur que toutes les vidéos ayant l'attribut data-src doivent se charger après que la page soit affichée. Dans le cas, de mon site, j'ai divisé par deux le temps de chargement de tommy-pi.ovh. Fabuleux n'est-ce pas?!

Voici le script à intégrer dans le corps footer.html de votre thème:

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

Pour Dotclear, ce fichier html est situé dans themes/nom-de-votre-theme/tpl. Si vous avez des difficultés pour trouver le fichier, je serai ravi de vous aider. N'hésitez pas à laisser un message dans la section commentaire de cet article.

La discussion continue ailleurs

URL de rétrolien : https://tommy-pi.ovh/index.php?trackback/38

Fil des commentaires de ce billet