mercredi 30 janvier 2019

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.

dimanche 11 février 2018

Formater un disque invisible dans Windows

Petit article qui me servira de mémo pour moi-même, et j'espère pour vous aussi.

Ne vous est-il jamais arrivé d'avoir un disque dur / une clé USB / une carte mémoire invisible au moment du raccordement à votre pc? Pourtant vous entendez la sonnerie typique Windows! Votre disque est détecté par Windows, impossible de le formater car vous le voyez pas dans l'explorateur de fichiers. Alors que faire?

La solution la plus simple, nécessitant aucune application tierce, est de passer par un programme intégré à Windows: diskpart.

 

Lire la suite...