Cet atelier de programmation vous explique comment précharger les polices Web à l'aide de rel="preload" pour supprimer tout flash de texte sans style (FOUT).
Mesurer
Commencez par mesurer les performances du site Web avant d'ajouter 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 les outils de développement.
- Cliquez sur l'onglet Lighthouse.
- Assurez-vous que la case Performances est cochée dans la liste Catégories.
- Cliquez sur le bouton Generate report (Générer un rapport).
Le rapport Lighthouse généré indique la séquence d'extraction des ressources sous Latence maximale du chemin critique.
Dans l'audit ci-dessus, les polices Web font partie de la chaîne de requête critique et sont extraites en dernier. La chaîne de requêtes critique représente l'ordre des ressources qui sont prioritaires 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. Elles constituent la dernière ressource récupérée par le navigateur dans la chaîne de requête 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 n'ont pas été téléchargées (CSS, JS).
Voici la séquence des ressources récupérées dans l'application:
Préchargement des polices Web
Pour éviter FOUT, vous pouvez précharger les polices Web qui sont requises immédiatement. Ajoutez l'élément Link pour cette application dans l'en-tête 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 des ressources.
L'attribut crossorigin indique si la ressource doit être récupérée à l'aide d'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.
Puisque Pacifico-Bold est utilisé dans l'en-tête de la page, nous avons ajouté une balise de préchargement pour le récupérer encore plus tôt. Il n'est pas important de précharger la police Pacifico.woff2, car elle applique un style au texte qui se trouve en dessous de la ligne de flottaison.
Actualisez l'application et exécutez à nouveau Lighthouse. Consultez la section Latence maximale du chemin critique.
Notez que Pacifico-Bold.woff2 est supprimé de la chaîne de requête critique. Il est récupéré plus tôt dans l'application.
Avec le préchargement, le navigateur sait qu'il doit télécharger ce fichier plus tôt. Il est important de noter que s'il n'est pas utilisé correctement, le préchargement peut nuire aux performances en effectuant des requêtes inutiles pour les ressources non utilisées.