Quando apri una pagina web, il browser richiede il documento HTML a un server, ne analizza i contenuti e invia richieste separate per le risorse di riferimento. In qualità di sviluppatore, conosci già tutte le risorse necessarie per la tua pagina e quali sono le più importanti. Puoi utilizzare queste conoscenze per richiedere in anticipo le risorse critiche e accelerare il processo di caricamento. Questo post spiega come ottenere questo risultato con <link rel="preload">.
Come funziona il precaricamento
Il precaricamento è più adatto per le risorse generalmente scoperte in ritardo dal browser.
@font-face. Il browser carica il file del carattere solo al termine del download e dell'analisi del foglio di stile.Precaricando una determinata risorsa, indichi al browser che vorresti recuperarla prima di quanto il browser altrimenti la rileva, perché hai la certezza che sia importante per la pagina corrente.
La catena di richieste critiche rappresenta l'ordine delle risorse che vengono prioritarie e recuperate dal browser. Lighthouse identifica gli asset che si trovano al terzo livello di questa catena come scoperti tardi. Puoi utilizzare il controllo Precarica le richieste chiave per identificare quali risorse precaricare.
Puoi precaricare le risorse aggiungendo un tag <link> con rel="preload" all'intestazione del documento HTML:
<link rel="preload" as="script" href="critical.js">
Il browser memorizza nella cache le risorse precaricate in modo che siano disponibili immediatamente quando necessario. e non esegue gli script né applica i fogli di stile.
I suggerimenti delle risorse, ad esempio preconnect e prefetch, vengono eseguiti come previsto dal browser. preload, invece, è obbligatorio per il browser. I browser moderni sono già abbastanza bravi nell'assegnazione delle priorità alle risorse, ecco perché è importante usare preload con parsimonia e precaricare solo le risorse più importanti.
I precaricamenti inutilizzati attivano un avviso della console in Chrome, circa tre secondi dopo l'evento load.
Casi d'uso
Precaricamento delle risorse definite in CSS
I caratteri definiti con regole @font-face o immagini di sfondo definite nei file CSS non vengono rilevati finché il browser non scarica e analizza questi file CSS. Il precaricamento di queste risorse garantisce che vengano recuperate prima che i file CSS siano stati scaricati.
Precaricamento dei file CSS
Se utilizzi l'approccio CSS critico, devi dividerlo in due parti. Il CSS fondamentale richiesto per il rendering dei contenuti above the fold è incorporato nel <head> del documento, mentre il CSS non fondamentale viene solitamente caricato con JavaScript. Attendere l'esecuzione di JavaScript prima del caricamento di CSS non critici può causare ritardi nel rendering quando gli utenti scorrono, quindi è una buona idea utilizzare <link rel="preload"> per avviare il download prima.
Precaricamento dei file JavaScript
Poiché i browser non eseguono i file precaricati, il precaricamento è utile per separare il recupero dall'esecuzione, il che può migliorare metriche come Tempo all'interattività. Il precaricamento funziona al meglio se suddivise i bundle JavaScript e precaricati solo i blocchi critici.
Come implementare rel=preload
Il modo più semplice per implementare preload è aggiungere un tag <link> ai file <head> del documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
Se fornisci l'attributo as, il browser può impostare la priorità della risorsa precaricata in base al tipo, impostare le intestazioni corrette e determinare se la risorsa esiste già nella cache. I valori accettati per questo attributo includono: script, style, font, image e altri.
Alcuni tipi di risorse, ad esempio i caratteri, vengono caricati in modalità anonima. Per questi casi, devi impostare l'attributo crossorigin con preload:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
Gli elementi <link> accettano anche un attributo type, che contiene il tipo MIME della risorsa collegata. I browser utilizzano il valore dell'attributo type per garantire che le risorse vengano precaricate solo se il loro tipo di file è supportato. Se un browser non supporta il tipo di risorsa specificato, il criterio <link rel="preload"> verrà ignorato.
Puoi anche precaricare qualsiasi tipo di risorsa tramite l'intestazione HTTP Link:
Link: </css/style.css>; rel="preload"; as="style"
Un vantaggio di specificare preload nell'intestazione HTTP è che il browser non ha bisogno di analizzare il documento per trovarlo, il che può offrire piccoli miglioramenti in alcuni casi.
Precaricamento dei moduli JavaScript con webpack
Se usi un bundler di moduli che crea file di build della tua applicazione, devi verificare se supporta l'inserimento di tag di precaricamento. Con webpack 4.6.0 o versioni successive, il precaricamento è supportato tramite l'uso di commenti magici all'interno di import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Se usi una versione precedente di webpack, usa un plug-in di terze parti come preload-webpack-plugin.
Effetti del precaricamento su Core Web Vitals
Il precaricamento è una potente ottimizzazione delle prestazioni che influisce sulla velocità di caricamento. Queste ottimizzazioni possono comportare cambiamenti nei Segnali web essenziali del tuo sito ed è importante conoscerli.
Largest Contentful Paint (LCP)
Il precaricamento ha un effetto potente su Largest Contentful Paint (LCP) per quanto riguarda caratteri e immagini, in quanto sia immagini che nodi di testo possono essere candidati LCP. Le immagini hero e le grandi sequenze di testo che vengono visualizzate usando i caratteri web possono trarre vantaggio da un suggerimento di precaricamento ben posizionato e dovrebbero essere utilizzati quando si presentano l'opportunità di fornire all'utente questi importanti frammenti di contenuto all'utente.
Tuttavia, è bene fare attenzione quando si tratta di precaricamento e di altre ottimizzazioni. In particolare, evita di precaricare troppe risorse. Se troppe risorse hanno la priorità, di fatto nessuna di loro lo sarà. Gli effetti di un numero eccessivo di suggerimenti di precaricamento saranno particolarmente dannosi sulle reti più lente, dove il conflitto di larghezza di banda sarà più evidente.
Concentrati invece su alcune risorse di alto valore che sai che trarranno vantaggio da un precaricamento ben posizionato. Quando precarichi i caratteri, assicurati di pubblicare i caratteri in formato WOFF 2.0 per ridurre il più possibile il tempo di caricamento delle risorse. Poiché WOFF 2.0 offre un supporto eccellente per i browser, l'utilizzo di formati precedenti come WOFF 1.0 o TrueType (TTF) ritarda l'LCP se il candidato LCP è un nodo di testo.
Per quanto riguarda LCP e JavaScript, assicurati di inviare il markup completo dal server affinché lo scanner di precaricamento del browser funzioni correttamente. Se offri un'esperienza che si basa interamente su JavaScript per eseguire il rendering del markup e non puoi inviare codice HTML sottoposto a rendering dal server, sarebbe utile entrare nel punto in cui lo scanner di precaricamento del browser non può precaricare le risorse che altrimenti sarebbero rilevabili solo al termine del caricamento e dell'esecuzione di JavaScript.
Cumulative Layout Shift (CLS)
La metrica Cumulative Layout Shift (CLS) è una metrica particolarmente importante per quanto riguarda i caratteri web. Inoltre, la metrica CLS ha un'interazione significativa con i caratteri web che utilizzano la proprietà CSS font-display per gestire il modo in cui vengono caricati i caratteri. Per ridurre al minimo le variazioni del layout relative ai caratteri web, prendi in considerazione le seguenti strategie:
- Precarica i caratteri utilizzando il valore predefinito di
blockperfont-display. Questo è un equilibrio delicato. Il blocco della visualizzazione dei caratteri senza un elemento di riserva può essere considerato un problema relativo all'esperienza utente. Da un lato, il caricamento dei caratteri confont-display: block;elimina le variazioni del layout relative ai caratteri web. D'altra parte, ti consigliamo comunque di caricare i caratteri web il prima possibile, se sono fondamentali per l'esperienza utente. La combinazione di un precaricamento confont-display: block;potrebbe essere una compromissione accettabile. - Precarica i caratteri utilizzando il valore
fallbackperfont-display.fallbackè un compromesso traswapeblock, in quanto ha un periodo di blocco estremamente breve. - Utilizza il valore
optionalperfont-displaysenza precaricamento. Se un carattere web non è fondamentale per l'esperienza utente, ma viene comunque utilizzato per visualizzare una notevole quantità di testo della pagina, potresti usare il valoreoptional. In condizioni avverse,optionalmostrerà il testo della pagina come carattere di riserva mentre carica il carattere in background per la navigazione successiva. Il risultato netto in queste condizioni è un miglioramento della metrica CLS, poiché i caratteri di sistema verranno visualizzati immediatamente, mentre i caricamenti delle pagine successivi caricheranno immediatamente il carattere senza variazioni del layout.
La metrica CLS è una metrica difficile da ottimizzare per i caratteri web. Come sempre, fai delle prove nel lab, ma affidati ai dati dei campi per determinare se le tue strategie di caricamento dei caratteri stanno migliorando la metrica CLS o peggiorata.
Interaction to Next Paint (INP)
Interazione con Next Paint è una metrica che misura la reattività all'input dell'utente. Poiché la maggior parte dell'interattività sul web è basata su JavaScript, il precaricamento di JavaScript, che consente di gestire interazioni importanti, può contribuire a ridurre il valore INP di una pagina. Tuttavia, tieni presente che il precaricamento di un codice JavaScript eccessivo durante l'avvio può avere conseguenze negative indesiderate se troppe risorse si contendono la larghezza di banda.
Dovrai inoltre fare attenzione a come utilizzi la suddivisione del codice. La suddivisione del codice è un'ottimizzazione eccellente per ridurre la quantità di codice JavaScript caricato durante l'avvio, ma le interazioni possono subire ritardi se si basano su JavaScript caricato direttamente all'inizio dell'interazione. Per compensare questo problema, devi esaminare l'intento dell'utente e inserire un precaricamento per i blocchi di JavaScript necessari prima che avvenga l'interazione. Un esempio potrebbe essere il precaricamento di JavaScript obbligatorio per convalidare i contenuti di un modulo quando uno dei campi del modulo è attivo.
Conclusione
Per migliorare la velocità delle pagine, precarica risorse importanti scoperte in ritardo dal browser. Precaricare tutto sarebbe controproducente, quindi usa preload con parsimonia e misura l'impatto nel mondo reale.