Questo codelab mostra come precaricare i caratteri web utilizzando rel="preload" per rimuovere
eventuali lampo di testo senza stile (FOUT).
Misura
Prima di aggiungere eventuali ottimizzazioni, misura le prestazioni del sito web.
- Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero
. - Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Verifica che la casella di controllo Rendimento nell'elenco Categorie sia selezionata.
- Fai clic sul pulsante Genera report.
Il report Lighthouse generato mostrerà la sequenza di recupero delle risorse in Latenza massima del percorso critico.
Nel controllo precedente, i caratteri web fanno parte della catena di richieste fondamentali e vengono recuperati per ultimi. La catena di richieste critiche rappresenta l'ordine delle risorse a cui viene data la priorità e che vengono recuperate dal browser. In questa applicazione, i caratteri web (Pacfico e Pacifico-Bold) vengono definiti utilizzando la regola @font-face e sono l'ultima risorsa recuperata dal browser nella catena di richieste critica. In genere, i caratteri web vengono caricati tramite caricamento lento, il che significa che non vengono caricati finché non vengono scaricate le risorse critiche (CSS, JS).
Ecco la sequenza delle risorse recuperate nell'applicazione:
Precaricamento dei caratteri web
Per evitare FOUT, puoi precaricare immediatamente i caratteri web necessari. Aggiungi l'elemento Link per questa applicazione nell'intestazione 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 ad 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é 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 uno stile al testo below the fold.
Ricarica l'applicazione ed esegui di nuovo Lighthouse. Controlla la sezione Latenza massima del percorso critico.
Osserva come Pacifico-Bold.woff2 viene rimosso dalla catena di richieste fondamentali. Viene recuperato in precedenza nell'applicazione.
Con il precaricamento, il browser sa che deve scaricare il file prima. È importante tenere presente che, se non utilizzato correttamente, il precaricamento può compromettere le prestazioni poiché richiede risorse non necessarie per risorse che non vengono utilizzate.