Ritardare gli script finché non sono necessari

Ritardare gli script finché non sono necessari

In questo articolo mostrerò e spiegherò un ottimo schema per caricare in un secondo momento, appena prima che siano necessari, gli script che non servono durante l'avvio del caricamento della pagina.

La cosa in assoluto più efficace che puoi fare con JavaScript per quanto riguarda i Core Web Vitals è ritardare il caricamento di una risorsa finché non è necessaria. Questo rimuoverà JavaScript inutilizzato e non necessario dalla pagina e lo caricherà solo quando serve. Questo risolverà l'avviso di lighthouse 'riduci il JavaScript inutilizzato' e migliorerà anche le metriche di reattività come l'Interaction to Next Paint (INP).
Facciamo questo con le immagini da molto tempo. Si chiama lazy loading. Con il lazy loading un'immagine below-the-fold viene caricata subito prima che scorra nella vista. In questo modo non abbiamo bisogno di caricare l'immagine immediatamente durante il caricamento della pagina e il browser può spendere le sue preziose risorse per scaricare, analizzare e visualizzare cose che sono effettivamente necessarie.

Ora immagina se potessimo fare la stessa cosa con gli script invece che con le immagini. Bene, si scopre che possiamo! Purtroppo non è semplice come aggiungere loading="lazy" a un'immagine, ma con un po' di sforzo possiamo farlo funzionare

Passaggio 1: Caricare gli script su richiesta

Per aggiungere script alla pagina dopo il caricamento della pagina, avremo bisogno di un piccolo script che lo faccia per noi.

function injectScript(scriptUrl, callback) {
  var script = document.createElement("script");
  script.src = scriptUrl;
  if (typeof callback === "function") {
    script.onload = function () {
      callback();
    };
  }
  document.head.appendChild(script);
}        

Questa funzione inietta uno script nella pagina web corrente creando un nuovo elemento script e aggiungendolo alla sezione head del documento. Il parametro scriptUrl specifica l'URL dello script da iniettare. Il parametro callback è una funzione opzionale che verrà chiamata quando lo script avrà finito di caricarsi. Quando lo script ha finito di caricarsi, viene attivato l'evento onload dell'elemento script. Se è stata fornita una funzione di callback, verrà chiamata a questo punto.

Passaggio 2: Caricare gli script su richiesta

Il passaggio successivo è caricare gli script su richiesta. Ci sono 2 metodi comuni per farlo. Il primo è il più affidabile 'quando una parte della pagina è visibile' e il secondo è il più veloce 'all'interazione'.

2a: Intersection observer

Il primo metodo per caricare uno script appena prima che sia necessario utilizza l'intersection observer. L'intersection observer è un metodo affidabile che 'scatta' quando un elemento si interseca con la parte visibile dello schermo. Possiamo usare questo comportamento per attivare il download di uno script solo quando un elemento è visibile. Lo svantaggio di questo metodo è che, anche se un elemento è 'sullo schermo', potrebbe comunque non essere utilizzato.

function injectScriptOnIntersection(scriptUrl, elementSelector) {
  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        injectScript(scriptUrl);
        observer.unobserve(entry.target);
      }
    });
  });

  var element = document.querySelector(elementSelector);
  observer.observe(element);
}
        

Questa funzione accetta due parametri: scriptUrl è l'URL dello script da iniettare e elementSelector è un selettore CSS per l'elemento che dovrebbe attivare l'iniezione.

La funzione crea un nuovo oggetto IntersectionObserver e gli passa una funzione di callback che verrà chiamata ogni volta che un elemento osservato si interseca con il viewport. La funzione di callback controlla se l'elemento si sta intersecando e, in tal caso, inietta lo script e smette di osservare l'elemento.

Tieni presente che l'API Intersection Observer non è supportata in tutti i browser, quindi potresti dover utilizzare un polyfill se devi supportare browser più vecchi.

injectScriptOnIntersection('script.js', '#my-element');

Questo inietterà lo script quando l'elemento con ID my-element diventerà visibile nel viewport.

2b: All'interazione

Il metodo più efficace per caricare JavaScript su richiesta è caricarlo quando un visitatore interagisce con un determinato elemento. Ad esempio un modulo. Il vantaggio di utilizzare questo metodo è che probabilmente non caricherai mai lo script se non è necessario. Lo svantaggio è che l'azione di download avviene piuttosto tardi e dobbiamo decidere quali eventi (mouseover, hover, touchstart ecc. ecc.) vogliamo ascoltare.

function injectScriptOnInteraction(scriptUrl, elementSelector, eventTypes) {
  var element = document.querySelector(elementSelector);
  var eventHandler = function() {
    injectScript(scriptUrl);
    eventTypes.forEach(function(eventType) {
      element.removeEventListener(eventType, eventHandler);
    });
  };
  eventTypes.forEach(function(eventType) {
    element.addEventListener(eventType, eventHandler);
  });
}
        

Questa funzione accetta tre parametri: scriptUrl è l'URL dello script da iniettare, elementSelector è un selettore CSS per l'elemento che dovrebbe attivare l'iniezione e eventTypes è un array di tipi di evento che dovrebbero attivare l'iniezione (es. ["click", "mouseover"]).

La funzione trova l'elemento utilizzando document.querySelector e vi aggiunge dei listener di eventi per ciascuno dei tipi di evento specificati. Quando si verifica uno qualsiasi degli eventi specificati, viene chiamata la funzione injectScript con l'URL specificato e i listener di eventi vengono rimossi utilizzando element.removeEventListener.

injectScriptOnInteraction(
  'script.js',
  '#my-element', 
  ['click', 'mouseover']
);

Questo inietterà lo script quando l'elemento con ID my-element viene cliccato o sorvolato con il mouse, e quindi rimuoverà i listener di eventi.

Conclusione

Quando gli script non sono necessari subito durante l'avvio del caricamento della pagina, è un'ottima idea caricarli su richiesta! Possiamo farlo utilizzando l'intersection observer o all'interazione. Questo libererà risorse preziose durante le prime fasi del caricamento della pagina