Quando apri una pagina web, il browser richiede il documento HTML da un server, ne analizza i contenuti e invia richieste separate per eventuali risorse a cui viene fatto riferimento. In qualità di sviluppatore, conosci già tutte le risorse di cui ha bisogno la tua pagina e quali sono le più importanti. Puoi utilizzare queste informazioni per richiedere in anticipo le risorse fondamentali e velocizzare il processo di caricamento. Questo post spiega come farlo con <link rel="preload">.
Come funziona il precaricamento
Il precaricamento è più adatto per le risorse generalmente rilevate in ritardo dal browser.
@font-face. Il browser carica il file del carattere solo al termine del download e dell'analisi dello stile.Se precarichi una determinata risorsa, comunichi al browser che vuoi recuperarla prima che lo faccia il browser perché hai la certezza che sia importante per la pagina corrente.
La catena di richieste fondamentali rappresenta l'ordine delle risorse che vengono assegnate una priorità e recuperate dal browser. Lighthouse identifica come scoperti in ritardo gli asset al terzo livello di questa catena. Puoi utilizzare il controllo Precarica le richieste chiave per identificare le risorse da precaricare.
Puoi precaricare le risorse aggiungendo un tag <link> con rel="preload" all'head 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.
Gli hint delle risorse, ad esempio preconnect e prefetch, vengono eseguiti secondo le necessità del 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 3 secondi dopo l'evento load.
Casi d'uso
Precaricamento delle risorse definite in CSS
I caratteri definiti con le regole @font-face o le 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 fondamentale, suddividi il CSS in due parti. Il CSS fondamentale necessario per il rendering dei contenuti above the fold è incorporato nel <head> del documento e il CSS non fondamentale viene generalmente caricato in modo lazy con JavaScript. L'attesa dell'esecuzione di JavaScript prima del caricamento del CSS non critico può causare ritardi nel rendering quando gli utenti scorrono, quindi è consigliabile 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 il tempo di 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 <head> del documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
L'attributo as aiuta il browser a impostare la priorità della risorsa prefetched in base al tipo, a impostare le intestazioni corrette e a 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, come 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 assicurarsi che le risorse vengano precaricate solo se il relativo 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 della specifica di preload nell'intestazione HTTP è che il browser non deve analizzare il documento per rilevarlo, il che può offrire piccoli miglioramenti in alcuni casi.
Precaricamento dei moduli JavaScript con webpack
Se utilizzi un bundler di moduli che crea i file di build della tua applicazione, devi verificare se supporta l'iniezione 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 utilizzi una versione precedente di webpack, utilizza un plug-in di terze parti come preload-webpack-plugin.
Effetti del precaricamento sui Core Web Vitals
Il precaricamento è un'efficace ottimizzazione delle prestazioni che influisce sulla velocità di caricamento. È importante essere consapevoli che queste ottimizzazioni possono comportare modifiche ai Core Web Vitals del tuo sito.
Largest Contentful Paint (LCP)
Il precaricamento ha un effetto significativo su Largest Contentful Paint (LCP) per quanto riguarda i caratteri e le immagini, poiché sia le immagini sia i nodi di testo possono essere candidati LCP. Le immagini hero e le lunghe sequenze di testo visualizzate utilizzando i caratteri web possono trarre notevoli vantaggi da un suggerimento di precaricamento ben posizionato e devono essere utilizzate quando ci sono opportunità di fornire questi importanti frammenti di contenuti all'utente più rapidamente.
Tuttavia, devi fare attenzione al precaricamento e ad 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 suggerimenti di precaricamento eccessivi saranno particolarmente dannosi per chi utilizza reti più lente in cui la contesa per la 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 pubblicarli in formato WOFF 2.0 per ridurre al massimo il tempo di caricamento delle risorse. Poiché WOFF 2.0 offre un eccellente supporto del browser, l'utilizzo di formati meno recenti, come WOFF 1.0 o TrueType (TTF), ritarda l'LCP se il candidato LCP è un nodo di testo.
Per quanto riguarda LCP e JavaScript, devi assicurarti di inviare markup completo dal server affinché lo scanner di precaricamento del browser funzioni correttamente. Se offri un'esperienza che si basa interamente su JavaScript per il rendering del markup e non puoi inviare HTML visualizzato dal server, sarebbe vantaggioso intervenire dove lo scanner di precaricamento del browser non può e precaricare le risorse che altrimenti sarebbero rilevabili solo al termine del caricamento ed esecuzione di JavaScript.
Cumulative Layout Shift (CLS)
Il CLS (Cumulative Layout Shift) è una metrica particolarmente importante per quanto riguarda i caratteri web e interagisce in modo significativo con i caratteri web che utilizzano la font-displayproprietà CSS per gestire il caricamento dei caratteri. Per ridurre al minimo i cambiamenti di layout relativi ai caratteri web, prendi in considerazione le seguenti strategie:
- Precarica i caratteri utilizzando il valore predefinito
blockperfont-display. Si tratta di un equilibrio delicato. Il blocco della visualizzazione dei caratteri senza un'alternativa può essere considerato un problema di esperienza utente. Da un lato, il caricamento dei caratteri confont-display: block;elimina i cambiamenti di layout relativi ai caratteri web. D'altra parte, è comunque consigliabile caricare i caratteri web il prima possibile se sono fondamentali per l'esperienza utente. La combinazione di un precaricamento confont-display: block;potrebbe essere un compromesso 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 un pre-caricamento. Se un carattere web non è fondamentale per l'esperienza utente, ma viene comunque utilizzato per visualizzare una quantità significativa di testo della pagina, valuta la possibilità di utilizzare il valoreoptional. In condizioni avverse,optionalmostrerà il testo della pagina in un 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 successivi caricamenti delle pagine caricheranno immediatamente il carattere senza variazioni del layout.
La metrica CLS è una metrica difficile da ottimizzare per i caratteri web. Come sempre, esegui esperimenti nel lab, ma affidati ai dati sul campo per determinare se le tue strategie di caricamento dei caratteri stanno migliorando o peggiorando il CLS.
Interaction to Next Paint (INP)
Interaction to Next Paint è una metrica che misura la reattività all'input utente. Poiché la maggior parte dell'interattività sul web è basata su JavaScript, il precaricamento di JavaScript che supporta interazioni importanti può contribuire a ridurre l'INP di una pagina. Tuttavia, tieni presente che il precaricamento di troppo codice JavaScript durante l'avvio può comportare conseguenze negative indesiderate se troppe risorse competono per la larghezza di banda.
Inoltre, devi fare attenzione a come esegui la suddivisione del codice. La suddivisione del codice è un'ottimizzazione eccellente per ridurre la quantità di JavaScript caricato durante l'avvio, ma le interazioni possono essere ritardate se si basano su JavaScript caricato 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 del codice JavaScript necessario per convalidare i contenuti di un modulo quando uno dei campi del modulo è attivo.
Conclusione
Per migliorare la velocità della pagina, precarica le risorse importanti che vengono rilevate in ritardo dal browser. Il precaricamento di tutto sarebbe controproducente, quindi utilizza preload con parsimonia e misura l'impatto nel mondo reale.