Optimisation des polices

82 % des pages web pour ordinateur utilisent des polices web. Les polices personnalisées sont importantes pour l'image de marque, le design et la cohérence entre navigateurs et appareils de votre site. Cependant, l'utilisation d'une police web ne devrait pas se faire au détriment des performances.

Next.js intègre une optimisation automatique des polices web qui incorpore les CSS des polices lors de la construction, éliminant ainsi un aller-retour réseau supplémentaire pour récupérer les déclarations de polices. Cela permet d'améliorer le First Contentful Paint (FCP) et le Largest Contentful Paint (LCP).

Par exemple, voici l'avant et l'après de l'optimisation de vos polices par Next.js.

Avant l'optimisation, une requête réseau supplémentaire est nécessaire :

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

Après l'optimisation, Next.js incorpore automatiquement le CSS de la police :

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal; }
</style>