Defer sui java esterni al proprio sito? Ecco come fare

Dopo diverso tempo e molte ricerche sono riuscito a trovare come eseguire il "defer" su Java esterni, come, per esempio, quelli di Facebook o di Youtube.

Il “defer” è utile per diminuire i tempi di caricamento delle proprie pagine e il sito “GTmetrix” lo segnala come “impatto alto”. Proprio per questo ho voluto cercare una soluzione al problema, soprattutto dopo aver visto i quasi 500Kb di script che Facebook e Youtube chiedono di caricare ogni volta.

Con questo metodo sarà possibile implementare il "defer" su qualsiasi "<iframe>".

Sono passato da un punteggio defer di:

A un punteggio defer di:

semplicemente andando a fare in modo che i file Java di Facebook e/o Youtube vengano caricati successivamente alla visualizzazione della pagina.

Nel test non ottengo 100 perché ho la necessita che alcuni script java vengano caricati prima, altrimenti non funzionano. Sono comunque in cerca di una soluzione.

Come fare – Defer Java esterno

Per fare ciò vi consiglio di utilizzare un tema child in modo che al successivo aggiornamento del tema la modifica sarà ancora presente. Se non avete una tema child leggete qui come crearlo.
Detto questo passiamo andiamo a vedere come fare questa facilissima modifica.

Per prima cosa dovrete modificare il file “header.php” del vostro tema andando ad aggiungere questo codice:

<!-- Defer iFrame -->
<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>

Il secondo passo da fare è ricercare tutti i vostri blocchi <iframe> e andarli a modificare. Da così:

<div class="separator" style="text-align:center;"><iframe src="https://URL OF BLOG EMBED.html" style="border:0px; height:500px; margin-bottom:0em; margin-left:0em; margin-right:0em; width:100%"></iframe></div>

a così

<div class="separator" style="text-align:center;"><iframe data-src="https://URL OF BLOG EMBED.html" style="border:0px; height:500px; margin-bottom:0em; margin-left:0em; margin-right:0em; width:100%"></iframe></div>

Ovvero semplicemente cambiando da “src” a “data-src”. Semplicemente con queste due piccole modifiche sarà possibile eseguire il defer di tutti quei file java che sono esterni al nostro sito e di cui non abbiamo il controllo.

Conclusione

Guida davvero piccola, ma che per me vale molto visto il tempo che ho impiegato a trovare una soluzione. Questa piccola modifica mi ha aiutato molto ad aumentare la velocità del sito andando a caricare i file Java di Facebook e/o Youtube successivamente alla visualizzazione della pagina.

Spero che vi sia tornata utile. Ecco la Fonti: Link & Link.

A presto AskBruzz