Questo codelab mostra come precaricare i caratteri web utilizzando rel="preload" per rimuovere eventuali lampi di testo non formattato (FOUT).
Misura
Prima di aggiungere ottimizzazioni, misura il rendimento del sito web.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
A schermo intero
. - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Assicurati che la casella di controllo Rendimento sia selezionata nell'elenco Categorie.
- Fai clic sul pulsante Genera report.
Il report Lighthouse generato mostra la sequenza di recupero delle risorse in Latenza massima del percorso critico.
Nell'audit riportato sopra, i caratteri web fanno parte della catena di richieste critiche e vengono recuperati per ultimi. La catena di richieste fondamentali rappresenta l'ordine delle risorse a cui viene assegnata la priorità e che vengono recuperate dal browser. In questa applicazione, i caratteri web (Pacifico e Pacifico-Bold) sono definiti utilizzando la regola @font-face e sono l'ultima risorsa recuperata dal browser nella catena di richieste critiche. In genere, i web font vengono caricati in modo lazy, il che significa che non vengono caricati finché non vengono scaricate le risorse fondamentali (CSS, JS).
Ecco la sequenza delle risorse recuperate nell'applicazione:
Precaricamento dei caratteri web
Per evitare l'errore FOUT, puoi precaricare i caratteri web necessari immediatamente. Aggiungi l'elemento Link per questa applicazione all'inizio del documento:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
Gli attributi as="font" type="font/woff2" indicano al browser di scaricare questa risorsa come carattere e aiutano a dare la priorità alla coda delle risorse.
L'attributo crossorigin indica se la risorsa deve essere recuperata con una richiesta CORS, in quanto il carattere potrebbe provenire da un dominio diverso. Senza questo attributo, il carattere precaricato viene ignorato dal browser.
Poiché Pacifico-Bold viene utilizzato nell'intestazione della pagina, abbiamo aggiunto un tag di precaricamento per recuperarlo ancora prima. Non è importante precaricare il carattere Pacifico.woff2 perché applica lo stile al testo sotto la piega.
Ricarica l'applicazione ed esegui di nuovo Lighthouse. Controlla la sezione Tempo di latenza massimo del percorso critico.
Nota come Pacifico-Bold.woff2 viene rimosso dalla catena di richieste fondamentali. Viene recuperato all'inizio dell'applicazione.
Con il precaricamento, il browser sa che deve scaricare questo file in precedenza. È importante notare che, se non utilizzato correttamente, il precaricamento può influire negativamente sul rendimento inviando richieste non necessarie per risorse non utilizzate.