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 sulla velocità del tuo sito in modo significativo. Invece di spedire tutto il codice JavaScript all'utente il prima possibile viene caricata la prima pagina dell'applicazione, suddividi il bundle in più pezzi 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 i tempi di avvio. Se all'avvio forniamo meno codice JavaScript, possiamo rendere le applicazioni interattive più velocemente riducendo al minimo il lavoro del thread principale durante questo periodo critico.
Per quanto riguarda Core Web Vitals, la riduzione dei payload JavaScript scaricati all'avvio contribuirà a migliorare i tempi di Interaction to Next Paint (INP). Il ragionamento alla base di ciò è che, liberando il thread principale, l'applicazione è in grado di rispondere agli input degli utenti più rapidamente riducendo i costi di avvio relativi all'analisi, alla compilazione e all'esecuzione di JavaScript.
A seconda dell'architettura del tuo sito web, in particolare se il tuo sito web fa molto affidamento sul rendering lato client, la riduzione delle dimensioni dei payload JavaScript responsabili del markup del rendering può portare a un miglioramento dei tempi di 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 visualizzare quell'elemento LCP. Entrambi gli scenari possono ritardare il tempo LCP per la pagina.
Misura
Lighthouse visualizza un controllo non riuscito quando viene impiegata una quantità di tempo significativa eseguire tutto il codice JavaScript su una pagina.
Suddividi il bundle JavaScript in modo da inviare il codice necessario per la route iniziale solo quando dall'utente carica un'applicazione. In questo modo si riduce al minimo la quantità di script vengono analizzati e compilati, con un conseguente rallentamento dei tempi di caricamento delle pagine.
Strumenti di bundle di moduli popolari come webpack,
Parcel e
Aggregazione ti consente di suddividere
bundle tramite importazioni dinamiche.
Ad esempio, considera il seguente snippet di codice che mostra un esempio di
someFunction metodo 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 determinata libreria. Se
questo modulo non viene utilizzato altrove, il blocco di codice può essere modificato in modo da utilizzare
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 tramite caricamento lento, oppure fornito all'utente solo quando necessario l'invio del modulo. Per migliorare ulteriormente le prestazioni delle pagine, precarica i blocchi critici per assegnarne la priorità e recuperali prima.
Sebbene lo snippet di codice precedente sia un semplice esempio, il caricamento lento di terze parti delle dipendenze non è un pattern comune nelle applicazioni più grandi. Di solito, il terzo le dipendenze di una parte sono suddivise in un bundle del fornitore separato che può essere memorizzato nella cache poiché non si aggiornano altrettanto spesso. Puoi scoprire di più su come SplitChunksPlugin può di aiutarti a farlo.
La suddivisione a livello di route o componente quando si utilizza un framework lato client è un approccio più semplice al caricamento lento di diverse parti dell'applicazione. Molti i framework più diffusi che utilizzano webpack forniscono astrazioni per rendere il caricamento lento più semplice rispetto ad analizzare tu le configurazioni.