Cet atelier de programmation vous explique comment précharger des polices Web à l'aide de rel="preload" pour supprimer tout flash de texte non stylisé (FOUT).
Mesurer
Commencez par mesurer les performances du site Web avant d'effectuer des optimisations.
- Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran
. - Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Performances est cochée dans la liste Catégories.
- Cliquez sur le bouton Générer un rapport.
Le rapport Lighthouse généré affiche la séquence de récupération des ressources sous Latence maximale du chemin critique.
Dans l'audit ci-dessus, les polices Web font partie de la chaîne de requêtes critique et sont récupérées en dernier. La chaîne de requêtes critiques représente l'ordre des ressources qui sont priorisées et extraites par le navigateur. Dans cette application, les polices Web (Pacfico et Pacifico-Bold) sont définies à l'aide de la règle @font-face et constituent la dernière ressource récupérée par le navigateur dans la chaîne de requêtes critique. En règle générale, les polices Web sont chargées de manière différée, ce qui signifie qu'elles ne sont pas chargées tant que les ressources critiques ne sont pas téléchargées (CSS, JS).
Voici la séquence des ressources récupérées dans l'application:
Précharger les polices Web
Pour éviter l'effet FOUT, vous pouvez précharger les polices Web qui sont requises immédiatement. Ajoutez l'élément Link de cette application en haut du document:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
Les attributs as="font" type="font/woff2" indiquent au navigateur de télécharger cette ressource sous forme de police et aident à hiérarchiser la file d'attente de ressources.
L'attribut crossorigin indique si la ressource doit être récupérée avec une requête CORS, car la police peut provenir d'un autre domaine. Sans cet attribut, la police préchargée est ignorée par le navigateur.
Étant donné que Pacifico-Bold est utilisé dans l'en-tête de la page, nous avons ajouté une balise de préchargement pour l'extraire encore plus rapidement. Il n'est pas important de précharger la police Pacifico.woff2, car elle stylise le texte situé sous la ligne de flottaison.
Rechargez l'application et exécutez Lighthouse à nouveau. Consultez la section Latence maximale du chemin critique.
Notez que Pacifico-Bold.woff2 est supprimé de la chaîne de requêtes critiques. Il est extrait plus tôt dans l'application.
Grâce au préchargement, le navigateur sait qu'il doit télécharger ce fichier plus tôt. Notez que si elle n'est pas utilisée correctement, la précharge peut nuire aux performances en envoyant des requêtes inutiles pour des ressources qui ne sont pas utilisées.