Passa al contenuto principale

JS Non Necessario al Primo Caricamento

Anche lato JS, possiamo avere problemi di performance. Se il nostro modulo utilizza JS per eseguire operazioni, possiamo incorrere in problemi di performance se il JS viene caricato in modo sincrono anche quando non è necessario.

Per ottimizzare l'inclusione e l'esecuzione dei file Javascript, possiamo adottare diverse strategie.

Ottimizzazione del Caricamento JS​

Cerchiamo di distinguere i trigger che potrebbero servirci, e di includere il JS solo quando necessario. I trigger più comuni includono:

  • Visualizzazione di un dato elemento in pagina (viewport trigger)
  • Interazione con elementi

Esempi Pratici per Ciascun Trigger​

Visualizzazione di un Dato Elemento in Pagina​

Ipotizziamo di voler includere un widget che visualizza le recensioni del nostro sito e posizionarlo vicino al footer. Sarebbe inefficiente caricare il codice JS al caricamento della pagina o anche utilizzare defer per caricarlo alla fine. Invece, possiamo caricare il JS solo quando l'utente sta per raggiungere il footer.

Implementazione:

Per implementare questa logica, Ector offre una funzione integrata che permette di effettuarlo in modo semplice.

  1. Crea il Div che farà da Trigger:
<div in-viewport v-id="widget"></div>
  1. Includi lo Script con lo stesso v-id e tipo text/viewport:
<script type="text/viewport" v-id="widget" src="https://url.com/widget.js"></script>

In questo modo, il JS verrà caricato solo quando l'elemento sarà visibile in pagina.

Interazione con Elementi​

Questo trigger presuppone che per caricare un dato script, dobbiamo prima interagire con gli elementi. Ad esempio, sarebbe inefficiente caricare il motore di ricerca se l'utente non effettua una ricerca. Carichiamo il widget solo quando l'utente clicca sul campo di ricerca.

Implementazione:

Colleghiamoci all'evento o alla serie di eventi che fanno da trigger ed includiamo il file JS:

<script>
document.getElementById('search').addEventListener('click', function() {
    var script = document.createElement('script');
    script.src = 'https://url.com/search.js';
    document.head.appendChild(script);
});
</script>

Conclusione​

Ottimizzare il caricamento dei file JS è essenziale per migliorare le performance del sito. Caricando i file solo quando necessario, si riduce il carico iniziale della pagina, migliorando l'esperienza utente. Utilizza i trigger come la visualizzazione degli elementi in pagina o le interazioni dell'utente per caricare dinamicamente i file JS solo quando servono.