A nessuno piace aspettare. Oltre il 50% degli utenti abbandona un sito web se il caricamento richiede più di 3 secondi.
L'invio di payload JavaScript di grandi dimensioni influisce in modo significativo sulla velocità del sito. Anziché inviare tutto il codice JavaScript all'utente non appena viene caricata la prima pagina dell'applicazione, dividi il bundle in più parti e invia solo ciò che è necessario all'inizio.
Perché la suddivisione del codice è vantaggiosa?
La suddivisione del codice è una tecnica che mira a ridurre al minimo il tempo di avvio. Se inviamo meno codice JavaScript all'avvio, possiamo rendere le applicazioni interattive più velocemente riducendo al minimo il lavoro del thread principale durante questo periodo critico.
Per quanto riguarda i Core Web Vitals, la riduzione dei payload JavaScript scaricati all'avvio contribuirà a migliorare i tempi di Interaction to Next Paint (INP). Il motivo è che, liberando il thread principale, l'applicazione è in grado di rispondere più rapidamente agli input dell'utente riducendo i costi di avvio correlati all'analisi, alla compilazione e all'esecuzione di JavaScript.
A seconda dell'architettura del tuo sito web, in particolare se si basa molto sul rendering lato client, la riduzione delle dimensioni dei payload JavaScript responsabili del rendering del markup può comportare un miglioramento dei tempi di Largest Contentful Paint (LCP). Ciò può verificarsi quando la risorsa LCP viene scoperta dal browser solo in ritardo fino al completamento del markup lato client o quando il thread principale è troppo occupato per eseguire il rendering dell'elemento LCP. Entrambi gli scenari possono ritardare il tempo LCP della pagina.
Misura
Lighthouse mostra un audit non riuscito quando l'esecuzione di tutto il codice JavaScript di una pagina richiede una quantità di tempo significativa.
Dividi il bundle JavaScript in modo da inviare solo il codice necessario per la route iniziale quando l'utente carica un'applicazione. In questo modo si riduce al minimo la quantità di script da analizzare e compilare, il che comporta tempi di caricamento della pagina più rapidi.
I bundler di moduli più diffusi come webpack,
Parcel, e
Rollup ti consentono di dividere i
bundle utilizzando le importazioni dinamiche.
Ad esempio, considera il seguente snippet di codice che mostra un esempio di un metodo someFunction che viene attivato quando viene inviato un modulo.
import moduleA from "library";
form.addEventListener("submit", e => {
e.preventDefault();
someFunction();
});
const someFunction = () => {
// uses moduleA
}
Qui, someFunction utilizza un modulo importato da una libreria specifica. Se questo modulo non viene utilizzato altrove, il blocco di codice può essere modificato per utilizzare un'importazione dinamica per recuperarlo solo quando il modulo viene inviato dall'utente.
form.addEventListener("submit", e => {
e.preventDefault();
import('library.moduleA')
.then(module => module.default) // using the default export
.then(() => someFunction())
.catch(handleError());
});
const someFunction = () => {
// uses moduleA
}
Il codice che compone il modulo non viene incluso nel bundle iniziale e ora viene caricato in modo differito o fornito all'utente solo quando è necessario dopo l'invio del modulo. Per migliorare ulteriormente il rendimento della pagina, precarica i blocchi critici per assegnare loro la priorità e recuperarli prima.
Sebbene lo snippet di codice precedente sia un esempio semplice, il caricamento differito delle dipendenze di terze parti non è un pattern comune nelle applicazioni più grandi. In genere, le dipendenze di terze parti vengono suddivise in un bundle di fornitori separato che può essere memorizzato nella cache perché non viene aggiornato così spesso. Puoi scoprire di più su come il SplitChunksPlugin può aiutarti a farlo.
La suddivisione a livello di route o componente quando si utilizza un framework lato client è un approccio più semplice per il caricamento differito di diverse parti dell'applicazione. Molti framework diffusi che utilizzano webpack forniscono astrazioni per semplificare il caricamento differito rispetto all'approfondimento delle configurazioni.