Questo codelab mostra come precaricare i web font utilizzando rel="preload" per rimuovere qualsiasi flash di testo non formattato (FOUT).
Misura
Innanzitutto, 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 "Cmd+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Assicurati che la casella di controllo Prestazioni sia selezionata nell'elenco Categorie.
- 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 riportato sopra, i web font 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 web font (Pacfico 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 webfont vengono caricati con il 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 il FOUT, puoi precaricare i web font 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 stabilire la priorità della 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 lo stile al testo che si trova below the fold.
Ricarica l'applicazione ed esegui di nuovo Lighthouse. Controlla la sezione Latenza massima del percorso critico.
Nota come Pacifico-Bold.woff2 viene rimosso dalla catena di richieste critiche. Viene recuperato prima nell'applicazione.
Con il precaricamento, il browser sa che deve scaricare questo file prima. È importante notare che, se non utilizzato correttamente, il precaricamento può danneggiare le prestazioni effettuando richieste non necessarie di risorse che non vengono utilizzate.