Comment optimiser les polices dans Webflow pour accélérer le chargement ?
Apprenez à optimiser le chargement des polices dans Webflow : font-display swap, preload WOFF2 et réduction des variantes.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment optimiser le chargement des polices dans Webflow pour accélérer l'affichage de votre site.
| Stratégie | Impact LCP | Mise en place |
|---|---|---|
| font-display: swap | Fort | CSS embed ou variable Webflow |
| Preload de la font principale | Fort | Custom code head |
| Sous-ensemble de caractères (subset) | Moyen | Upload font personnalisée |
| Limiter le nombre de variantes | Moyen | Supprimer les graisses inutilisées |
1. Utilisez font-display: swap
Cette propriété CSS indique au navigateur d'afficher d'abord le texte avec une font système, puis de la remplacer par votre font custom une fois chargée. Sans elle, le texte reste invisible pendant le chargement (FOIT). Ajoutez ce CSS dans un embed global :
@font-face {
font-display: swap;
}Si vous utilisez Google Fonts via Webflow, ajoutez &display=swap à l'URL de votre font dans les paramètres du projet.
2. Préchargez votre font principale
Ajoutez dans le <head> de votre page un preload sur le fichier WOFF2 de votre font principale. Cela indique au navigateur de télécharger la font en priorité dès la réception du HTML.
<link rel="preload"
href="/fonts/votre-font-regular.woff2"
as="font"
type="font/woff2"
crossorigin>3. Limitez le nombre de variantes
Chaque graisse (100, 300, 400, 700, 900) et style (normal, italic) est un fichier séparé. Auditez les variantes réellement utilisées dans votre projet et supprimez les autres dans Font Settings. Une font en 3 variantes au lieu de 6 = 50% de moins à télécharger.
4. Uploadez vos fonts en WOFF2
Si vous uploadez une font custom dans Webflow, utilisez le format WOFF2 : il est 30% plus léger que WOFF et supporté par tous les navigateurs modernes. Convertissez vos fonts avec CloudConvert si nécessaire.
Conclusion
L'optimisation des fonts est l'un des leviers les plus accessibles pour améliorer le score PageSpeed. Cas d'usage :
- Réduction du FOIT (flash de texte invisible) sur les pages longues
- Amélioration du LCP sur les pages avec du texte hero en font custom
- Optimisation globale du poids d'une page
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
