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 tuo sito. Anziché inviare tutto il codice JavaScript all'utente non appena viene caricata la prima pagina dell'applicazione, suddividi 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 cerca di ridurre al minimo i tempi di avvio. Se all'avvio viene fornito meno codice JavaScript, possiamo rendere interattività più rapidamente le applicazioni riducendo al minimo il lavoro dei thread principali durante questo periodo critico.
Per quanto riguarda i Segnali web essenziali, la riduzione dei payload JavaScript scaricati all'avvio contribuirà a migliorare i tempi di First Input Delay (FID) e di Interaction to Next Paint (INP). Il ragionamento alla base di questo è che, liberando il thread principale, l'applicazione è in grado di rispondere più rapidamente agli input utente riducendo i costi di avvio relativi all'esecuzione, alla compilazione e all'analisi JavaScript.
A seconda dell'architettura del tuo sito web, in particolare se il sito si basa molto sul rendering lato client, la riduzione delle dimensioni dei payload JavaScript responsabili del markup del rendering può portare a un miglioramento dei tempi della Largest Contentful Paint (LCP). Questo può verificarsi quando la risorsa LCP viene ritardata nel rilevamento da parte del browser 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 controllo non riuscito quando viene impiegato molto tempo per eseguire tutto il codice JavaScript su una pagina.
Suddividi il bundle JavaScript in modo che invii il codice necessario per la route iniziale solo quando l'utente carica un'applicazione. In questo modo si riduce la quantità di script da analizzare e compilare, il che si traduce in tempi di caricamento della pagina più rapidi.
I bundle di moduli più diffusi come webpack, Parcel e Rollup, ti consentono di suddividere i bundle utilizzando le importazioni dinamiche.
Ad esempio, considera il seguente snippet di codice che mostra un esempio di 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 usa un modulo importato da una determinata libreria. Se questo modulo non viene utilizzato altrove, il blocco di codice può essere modificato in modo da 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 compongono il modulo non viene incluso nel bundle iniziale e ora viene caricato con caricamento lento oppure viene fornito all'utente solo quando è necessario dopo l'invio del modulo. Per migliorare ulteriormente le prestazioni delle pagine, precarica i blocchi critici per assegnare la priorità e recuperarli prima.
Sebbene lo snippet di codice precedente sia un esempio semplice, il caricamento lento delle dipendenze di terze parti non è un pattern comune nelle applicazioni più grandi. Di solito, le dipendenze di terze parti sono suddivise in un bundle di fornitori separato che può essere memorizzato nella cache in quanto vengono aggiornate con minore frequenza. Puoi scoprire di più su come utilizzare lo strumento SplitChunksPlugin.
La suddivisione a livello di route o componente quando utilizzi un framework lato client è un approccio più semplice al caricamento lento di diverse parti dell'applicazione. Molti framework popolari che utilizzano webpack forniscono astrazioni per semplificare il caricamento lento rispetto all'analisi approfondita delle configurazioni.