In cima agli obiettivi di uno sviluppatore frontend vi è la necessità di ottenere una pagina dinamica, responsiva e complessa con i tempi di caricamento azzerati, quasi più veloci dell'homepage di Google. Purtroppo sappiamo che è un traguardo che non riusciremo neanche a sfiorare, ma non è una scusa per non applicare delle best-practice che ci permetteranno di rendere effettivamente più veloce il nostro sito web, sia durante il caricamento, che durante l'utilizzo.

Parliamo inizialmente del Code Splitting, come dice il nome consiste nel suddividere il codice in moduli separati, da caricare dinamicamente solo quando necessario attraverso la funzione import().

// math.js
export function add(a, b) {
  return a + b;
}

// main.js
// al click del bottone
document.getElementById("loadMath").addEventListener("click", async () => {
  const math = await import('./math.js');
  console.log(`2 + 3 = ${math.add(2, 3)}`);
});

Questo approccio riduce la dimensione del bundle iniziale, in quanto il codice per eseguire la funzione non sarà incluso, e migliora i tempi di caricamento della pagina.

Quello che abbiamo visto nello snippet precedente è anche un ottimo esempio di Lazy loading, ossia caricare risorse solo al bisogno. Vediamone un altro esempio:

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.defer = true; // oppure script.async = true;
  document.head.appendChild(script);
}

// al click del bottone
document.getElementById("btnLoad").addEventListener("click", () => {
  loadScript('analytics.js');
});

La scelta tra gli attributi async e defer dipende strettamente dalla funzionalità implementata nello script. Gli script async vengono eseguiti al termine del loro download, bloccando il parsing dell'HTML svolto dal browser e non rispettano l'ordine di importazione: uno script dichiarato a fine pagina, ma di pochi kb può potenzialmente essere eseguito prima di uno script richiesto ad inizio pagina. Al contrario, il defer assicura un ordine di esecuzione che avverrà solamente al termine del parsing dell'HTML.

Questa sottile differenza fa si che gli script più quotati per l'attributo async siano quelli di analytics, di una chat di assistenza, o qualunque funzionalità di supporto alla pagina. Viceversa gli script che gestiscono il sito richiederanno l'utilizzo del defer, che garantirà l'ordine e l'esecuzione solamente quando tutto il DOM sarà pronto.

<script src="analytics.js" async></script>
<script src="chat-assistant.js" async></script>

<script src="jquery.js" defer></script>
<script src="main.js" defer></script>