Quando apri una pagina web, il browser richiede il documento HTML a un server, analizza i suoi 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 raggiungere questo obiettivo con <link rel="preload">.
Come funziona il precaricamento
Il precaricamento è più adatto per le risorse rilevate in genere 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 vuoi recuperarla prima di quanto il browser la scoprirebbe perché hai la certezza che sia importante per la pagina corrente.
La catena di richieste critiche rappresenta l'ordine delle risorse a cui viene data la priorità e che vengono recuperate dal browser. Lighthouse identifica gli asset che si trovano al terzo livello di questa catena come scoperti in ritardo. Puoi utilizzare l'audit Precarica le richieste di chiavi per identificare le risorse da 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 immediatamente disponibili quando necessario. Non esegue gli script né applica i fogli di stile.
Gli hint delle risorse, ad esempio preconnect e prefetch, vengono eseguiti in base alle esigenze del browser. Il preload, invece, è obbligatorio per il browser. I browser moderni sono già abbastanza bravi a dare priorità alle risorse, ecco perché è importante usare preload con parsimonia e precaricare solo le risorse più critiche.
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 le regole @font-face o le immagini di sfondo definiti 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 del download dei file CSS.
Precaricamento dei file CSS
Se utilizzi l'approccio CSS fondamentale, suddividi il CSS in due parti. Il codice CSS fondamentale richiesto per il rendering dei contenuti above the fold è integrato nella sezione <head> del documento, mentre i CSS non fondamentali vengono generalmente caricati tramite caricamento lento con JavaScript. Attendere l'esecuzione di JavaScript prima di caricare il codice CSS non fondamentale può causare ritardi nel rendering quando gli utenti scorrono i contenuti, quindi è consigliabile utilizzare <link rel="preload"> per avviare il download prima.
Precaricamento dei file JavaScript
Poiché i browser non eseguono file precaricati, il precaricamento è utile per separare il recupero dall'esecuzione, il che può migliorare metriche quali Tempo all'interattività. Il precaricamento funziona meglio se suddividi i bundle JavaScript e precarichi solo i blocchi critici.
Come implementare rel=preload
Il modo più semplice per implementare preload è aggiungere un tag <link> al <head> del documento:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
La specifica dell'attributo as consente al browser di 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 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 tipo di file è supportato. Se un browser non supporta il tipo di risorsa specificato, ignorerà <link rel="preload">.
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 deve analizzare il documento per scoprirlo, il che in alcuni casi può offrire piccoli miglioramenti.
Precaricamento dei moduli JavaScript con webpack
Se utilizzi 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 dei commenti magici all'interno di import():
import(_/* webpackPreload: true */_ "CriticalChunk")
Se usi una versione precedente del webpack, usa un plug-in di terze parti come preload-webpack-plugin.
Effetti del precaricamento sui Segnali web essenziali
Il precaricamento è un'efficace ottimizzazione delle prestazioni che ha un effetto sulla velocità di caricamento. Queste ottimizzazioni possono determinare cambiamenti nei Segnali web essenziali del tuo sito ed è importante esserne consapevoli.
Largest Contentful Paint (LCP)
Il precaricamento ha un potente effetto sulla Largest Contentful Paint (LCP) per quanto riguarda i caratteri e le immagini, poiché sia le immagini che i nodi di testo possono essere candidati per LCP. Le immagini hero e le grandi esecuzioni di testo visualizzate utilizzando caratteri web possono trarre vantaggio in modo significativo da un suggerimento di precaricamento ben posizionato e dovrebbero essere utilizzate quando c'è la possibilità di fornire più velocemente questi importanti frammenti di contenuti all'utente.
Tuttavia, devi fare attenzione quando si tratta di precaricamento e altre ottimizzazioni. In particolare, evita di precaricare troppe risorse. Se viene assegnata la priorità a troppe risorse, non lo è affatto. Gli effetti di un eccesso di suggerimenti di precaricamento saranno particolarmente dannosi per le reti più lente in cui il conflitto di larghezza di banda sarà più evidente.
Concentrati invece su alcune risorse di alto valore che sai beneficiano di un precaricamento ben posizionato. Quando precarica i caratteri, assicurati di pubblicare caratteri in formato WOFF 2.0 per ridurre il più possibile il tempo di caricamento delle risorse. Poiché WOFF 2.0 ha un supporto eccellente del browser, l'uso di formati meno recenti come WOFF 1.0 o TrueType (TTF) comporterà un ritardo nella visualizzazione della LCP se il candidato LCP è un nodo di testo.
Per quanto riguarda LCP e JavaScript, dovrai assicurarti 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 il rendering del markup e non puoi inviare codice HTML sottoposto a rendering dal server, sarebbe vantaggioso intervenire in un punto in cui lo scanner di precaricamento del browser non è in grado di e precaricare le risorse che altrimenti sarebbero rilevabili solo al termine del caricamento e dell'esecuzione di JavaScript.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) è una metrica particolarmente importante per i caratteri web e 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 relativo ai caratteri web, prendi in considerazione le seguenti strategie:
- Precarica i caratteri utilizzando il valore
blockpredefinito perfont-display. Questo è un equilibrio delicato. Il blocco della visualizzazione di caratteri senza un fallback può essere considerato un problema relativo all'esperienza utente. Da un lato, il caricamento dei caratteri confont-display: block;elimina le variazioni di layout relative ai caratteri web. D'altra parte, è consigliabile caricare questi 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è una compromissione 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 quantità significativa del testo della pagina, ti consigliamo di utilizzare il valoreoptional. In condizioni avverse,optionalmostrerà il testo della pagina in un carattere di riserva mentre caricherà il carattere in background per la navigazione successiva. Il risultato netto in queste condizioni è il CLS migliorato, poiché i caratteri di sistema verranno visualizzati immediatamente, mentre i caricamenti di pagina successivi caricheranno il carattere immediatamente senza variazioni del layout.
Il CLS è una metrica difficile da ottimizzare per i caratteri web. Come sempre, sperimenta nel lab, ma fidati dei tuoi dati sul campo per determinare se le tue strategie di caricamento dei caratteri stanno migliorando il CLS o peggiorando la situazione.
Interaction to Next Paint (INP)
Interazione con la visualizzazione successiva è una metrica che valuta la reattività all'input dell'utente. Poiché la maggior parte dell'interattività sul web è guidata da JavaScript, il precaricamento del codice JavaScript che alimenta le interazioni importanti può contribuire a mantenere basso l'INP di una pagina. Tuttavia, tieni presente che un precaricamento eccessivo di JavaScript durante l'avvio può avere conseguenze negative indesiderate se troppe risorse si contendono la larghezza di banda.
Devi inoltre fare attenzione a come procedere per 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 subire ritardi se si basano sul caricamento di JavaScript all'inizio dell'interazione. Per compensare questo problema, devi esaminare l'intenzione dell'utente e inserire un precaricamento dei blocchi di JavaScript necessari prima che venga eseguita l'interazione. Un esempio potrebbe essere il precaricamento del codice JavaScript necessario per convalidare i contenuti di un modulo quando è attivo uno qualsiasi dei campi del modulo.
Conclusione
Per migliorare la velocità delle pagine, precarica le risorse importanti rilevate in ritardo dal browser. Precaricare tutto sarebbe controproducente, quindi usa preload con parsimonia e misura l'impatto nel mondo reale.