Questo codelab ti mostra come precaricare i caratteri web utilizzando rel="preload" per la rimozione
un lampo di testo senza stile (FOUT).
Misura
Misura il rendimento del sito web prima di aggiungere eventuali ottimizzazioni.
- Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi
Schermo intero
. - Premi "Ctrl+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 mostrerà la sequenza di recupero delle risorse nella sezione Latenza massima del percorso critico.
Nel controllo riportato sopra, i caratteri web fanno parte della catena di richieste critiche e vengono recuperati per ultimi. La catena di richieste critiche rappresenta l'ordine delle risorse a cui viene assegnata la priorità e che vengono recuperate dal browser. In questa applicazione, i caratteri web (Pacfico e Pacifico-Bold) vengono definiti mediante la regola @font-face e sono l'ultima risorsa recuperata dal browser nella catena di richieste critiche. In genere, i caratteri web vengono caricati tramite caricamento lento, il che significa che non vengono caricati fino al download delle risorse fondamentali (CSS, JS).
Ecco la sequenza delle risorse recuperate nell'applicazione:
Precaricamento dei caratteri web
Per evitare FOUT, puoi precaricare immediatamente i caratteri web richiesti. 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 consentono di assegnare la priorità alla coda delle risorse.
L'attributo crossorigin indica se la risorsa deve essere recuperata con una richiesta CORS, poiché il carattere potrebbe provenire da un dominio diverso. Senza questo attributo, il carattere precaricato viene ignorato dal browser.
Poiché nell'intestazione della pagina viene utilizzato Pacifico-Bold, abbiamo aggiunto un tag di precaricamento per recuperarlo ancora prima. Non è importante precaricare il carattere Pacifico.woff2 perché definisce lo stile del testo below the fold.
Ricarica l'applicazione ed esegui di nuovo il faro. Controlla la sezione Massima latenza del percorso critico.
Osserva come Pacifico-Bold.woff2 viene rimosso dalla catena di richieste critiche. Viene recuperato in precedenza nell'applicazione.
Con il precaricamento, il browser sa che deve scaricare prima questo file. È importante notare che, se non viene utilizzato correttamente, il precaricamento può compromettere le prestazioni facendo richieste non necessarie di risorse che non vengono utilizzate.